React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

As you might have seen from the last React app post (React basic 1 — “Hello React World”. Setting Up Your First React App.), this funny syntax that looks like HTML, called JSX, is commonly used in React to format UI template. JSX is an extension of JavaScript that helps engineers to visualize how the UI looks like. In this entry I would like to list some of syntax rules and capabilities around JSX.

Some specific syntax for JSX that is different from HTML

In order to clearly differentiate from common syntax used in JavaScript, you either have to or are recommended to use some unique syntax like the followings in JSX:

class should be className

<div className = "header">
Some title
</div>

for should be htmlFor

<label htmlFor = "name">
Enter name:
</label>

Inline styling for each tag has to be represented within {}, in the format of a JavaScript object, then each value has to be written inside of quotation marks (the use of ' ' is more common practice in the community than the use of " ").

<div style = {{ backgroundColor: 'blue', color: 'white' }} ></div>

The use of JavaScript variables and functions

You can reference variables or call functions just like in regular JavaScript. To access variables or functions from JSX, you have to use {}.

const buttonText = 'Click Me!';function getTime() {
return (new Date()).toLocaleTimeString()
}
return ( <div>
<button style = {{ backgroundColor: 'blue' }}>
{buttonText}
</button>
<div>Current Time:</div>
<h3> {getTime()} </h3>
</div>
</div>);

One most parent tag has to be closed inside JSX

Table of Content

React basic 1 — “Hello React World”. Setting Up Your First React App

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Modern React with Redux by Stephen Grider | Udemy

Create a New React App | React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store