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 styles

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' }} >