React JSX

React uses JSX instead of regular JavaScript.

JSX is a syntax extension to JavaScript that looks similar to XML.

While we don't have to use JSX, it offers the following advantages:

JSX performs faster because it is optimized after compilation into JavaScript.
It is type-safe, and errors can be found during compilation.
Writing templates with JSX is simpler and faster.

Let's look at the following code:

const element = <h1>Hello, world!</h1>;

This syntax with tags might seem odd; it's neither a string nor HTML.

It's called JSX, a syntax extension for JavaScript. We recommend using JSX to describe UI in React.

JSX is implemented within JavaScript.

We know that elements are the smallest building blocks of a React application, and JSX is used to declare these elements in React.

Unlike browser DOM elements, React elements are plain objects, and React DOM ensures that the browser DOM is consistent with the React elements.

To render a React element into a root DOM node, we pass it to the ReactDOM.render() method:

React Example

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

Note:

Since JSX is JavaScript, identifiers like class and for are not recommended as XML attribute names. Instead, React DOM uses className and htmlFor for the corresponding attributes.

Using JSX

JSX looks similar to HTML. Here's an example:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

We can nest multiple HTML tags in the above code, which needs to be wrapped in a single div element. In the example, a custom attribute data-myattribute is added to the p element, and custom attributes require the data- prefix.

React Example

ReactDOM.render(
    <div>
    <h1>tutorialpro.org</h1>
    <h2>Welcome to learning React</h2>
    <p data-myattribute="somevalue">This is a great JavaScript library!</p>
    </div>,
    document.getElementById('example')
);

Separate File

Your React JSX code can be placed in a separate file. For example, we create a helloworld_react.js file with the following code:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Then include this JS file in your HTML:

React Example

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript Expressions

We can use JavaScript expressions in JSX. Expressions are written inside curly braces {}. Here's an example:

React Example

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

In JSX, if else statements cannot be used, but conditional (ternary) expressions can be used instead. In the following example, the browser will output true if the variable i equals 1, otherwise it will output false.

React Example

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>,
    document.getElementById('example')
);

Styles

React recommends using inline styles. We can use camelCase syntax to set inline styles. React will automatically add px after specifying numerical values for elements. The following example demonstrates adding myStyle inline style to an h1 element:

React Example

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    &lt;h1 style={myStyle}>tutorialpro.org</h1>,
    document.getElementById('example')
);

Comments

Comments need to be written within curly braces, as shown in the following example:

React Example

ReactDOM.render(
    <div>
    <h1>tutorialpro.org</h1>
    {/*Comment...*/}
     </div>,
    document.getElementById('example')
);

Arrays

JSX allows inserting arrays into templates, and the arrays will automatically expand all members:

React Example

var arr = [
  <h1>tutorialpro.org</h1>,
  <h2>Learning is not just about technology, it's about dreams!</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

❮ React State React Ajax ❯