How to use JSX into ReactJS

JSX is the syntactic sugar of HTML that can’t be seen in the browser but in the code editor while using ReactJS. In this article, we will learn how to write JSX into ReactJS.

Prerequisites:

Create a React Application
Run the server to see the preview of the code

Use JSX in React

By Following the below steps, we can use JSX in ReactJS. It is just like writing HTML code in a document file. But here, under the hood, it will work as JavaScript.

Open src/app.js

//src/App.js

import './App.css';

function App() {

  return (
    <div className="App">

    </div>
  );
}

export default App;

Write a variable inside App function and pass it down to <div>...</div>. Use it with JSX expression ” {} “.

  // declaring heading variable
  const heading = 'JSX is amazing'

//src/App.js

import './App.css';

function App() {
  // declaring heading variable
  const heading = 'JSX is amazing'
  return (
    <div className="App">
      <h1>In React, {heading}</h1>
    </div>
  );
}

export default App;

This pretty much is a JSX. In the above code snippet, there is a <h1> tag that says “In React”. But after that, with the help of JSX expression, a variable is passed down there and as a result, a regular JavaScript variable is being used inside of HTML.

In regular HTML, it is not possible to put and run JavaScript inside of it. But with the JSX, it is possible. It basically is a combination of HTML and JavaScript. This allows using any JavaScript syntaxes inside HTML look alike elements which are known as JSX.

//src/App.js 
function App() {
// declaring heading variable
  const heading = 'JSX is amazing'
  return (

    <div className="App">
      <h1>In React, {heading}</h1>
      <p>This is all JSX</p>
    </div>
  );

}

export default App;

Take a look at the browser console of the same code that was declared earlier.

//src/App.js

import './App.css';

function App() {
  // declaring heading variable
  const heading = 'JSX is amazing'
  return (
    <div className="App">
      <h1>In React, {heading}</h1>
      <p>This is all JSX.</p>
    </div>
  );
}

export default App;

There is no JavaScript in it. It’s because browsers don’t support JSX.

Importance of JSX in ReactJS

JSX, sugar-coated the regular HTML so that developers can make any changes easily around a familiar environment.

//src/App.js

import './App.css';

function App() {
// with JSX
  return (
    <div className="App">
      <h1>In React, JSX is amazing</h1>
      <p>This is all JSX.</p>
    </div>
  );
}

export default App;

Take a closer look at the code snippet. There, the App function is returning a <div> tag. Which is a regular HTML tag. But behind the scene, it is JavaScript that looks like HTML.

Now, take a look at the below code,

//src/App.js

import React from 'react';
import './App.css';

function App() {
// without JSX
  return React.createElement(
    'div',
    {},
    React.createElement(
      'h2',
      {},
      'In React, JSX is amazing'
    ),
    React.createElement(
      'p',
      {},
      'This is behind the scene of using JSX'
    ));
}

export default App;

In this code, there is a createElement() method in React object, that takes three elements as its arguments.

The first one is the one, that will be created (e.g. div, p, h1, h2, etc.).
The second one is an object to configure the first argument.
The third one will be the content that will stay in between of opening and closing tag of the first argument.

This will also give the same output as before. But this time we didn’t use any JSX.

Comparing both codes and the previews, a conclusion can be made that, JSX made life easier for the developers to build and maintain the codes in a familiar way without any hassle.

To know more about JSX in-depth, Read This Article.