What is JSX in React

JSX in React stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

1. It is faster because it performs optimization while compiling code to JavaScript.
2. It is also type-safe and most of the errors can be caught during compilation.
3. It makes it easier and faster to write templates if you are familiar with HTML.

Using JSX

JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.

JSX in React looks like a regular HTML in most cases. We already used it in the Environment Setup chapter. Look at the code from App.jsx where we are returning div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Nested Elements

If we want to return more elements, we need to wrap it with one container element. Notice how we are using div as a wrapper for h1, h2, and elements.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

 

JavaScript Expressions

JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}. The following example will render 2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

 

We cannot use if-else statements inside JSX, instead, we can use conditional (ternary) expressions. In the following example, variable i is equal to 1 so the browser will render true, If we change it to some other value, it will render false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Characteristics:

1. JSX is not mandatory to use there are other ways to achieve the same thing but using JSX makes it easier to develop react applications.
2. JSX allows writing expression in { }. The expression can be any JS expression or React variable.
3. To insert a large block of HTML we have to write it in a parenthesis i.e, ().
4. JSX produces react elements.
5. JSX follows XML rule.
6. After compilation, JSX expressions become regular JavaScript function calls.
7. JSX uses camelcase notation for naming HTML attributes. For example, tabindex in HTML is used as tabIndex in JSX.

Advantages:

1. JSX makes it easier to write or add HTML in React.
2. JSX can easily convert HTML tags to react elements.
3. It is faster than regular JavaScript.
4. JSX allows us to put HTML elements in DOM without using appendChild() or createElement() method.
5. As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions.
6. JSX prevents XSS (cross-site-scripting) attacks popularly known as injection attacks.
7. It is type-safe, and most of the errors can be found at compilation time.