ReactJS – JSX

ReactjS is a syntax extension to JavaScript. We use it with React to express what the UI should look like. It is not mandatory to use JSX in React but it is recommended as it produces React elements.

Advantages of using JSX

  • It is faster as it performs optimization during compiling code to JavaScript.
  • It is type-safe and also most of the errors are caught during the compilation time.
  • It enables you to create templates faster, if you are familiar with HTML.

Using JSX

JSX looks like much similar to HTML in most cases. Let’s look at the below code of App.jsx which is returning div.

App.jsx

import React from 'react';

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

export default myApp;

Nested Elements

If you want to return more elements, you will need to wrap those elements within one container element.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
            <h2>Welcome to the ReactJS Tutorial.</h2>
            <p>This is a JSX topic.</p>
         </div>
      );
   }
}
export default App;

Attributes

You can use your own custom attributes in addition to regular HTML properties and attributes. When you want to add custom attribute, you need to use data- prefix. In the below example, we have added data-<myattribute> as an attribute of p element.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
            <h2>Welcome to the ReactJS Tutorial.</h2>
            <p data-myattribute = "somevalue">This is a JSX topic.</p>
         </div>
      );
   }
}
export default App;

JavaScript Expressions

You can use javascript expressions inside of JSX by wrapping it withing curly braces {}.

Example-

import React from "react";

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

//It will render 5.

You cannot use if else statement inside JSX, if you want to use it then by using ternary expression it can be achieved.

Example –

import React from "react";

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

//It will return True.

Styling

React recommends to use inline styling. When you want to set inline styles, you need to use camelCase syntax. React will also automatically append px after the number value on specific elements.

Example –

import React from 'react';

class App extends React.Component {
   render() {
      var customStyle = {
         fontSize: 20,
         color: '#000000'
      }
      return (
         <div>
            <h1 style = {customStyle }>Hello World!</h1>
         </div>
      );
   }
}
export default App;

Comments

While writing comments, you should to put curly brackets {} wherever you want to write comment within children section of a tag. It is a good practice to always use {} when writing comments, since you want to be consistent when writing the app.

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
            {// Single line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Trending Topics