What is JSX?

JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template. It is just an XML-like extension that allows us to write JavaScript that looks like markup and have it returned from a component. Its just HTML disguised as JavaScript

function App() {
       let name = "Palash"
       return (  
         <div>
           <h2>Hello {name} Welcome to my Website</h2>
           <p>This is just a demo site</p>
         </div>
       );
     }
 export default App;

Everything which App function is returning is JSX. JSX looks like HTML but actually it we'll be transformed into JavaScript when its being compiled. JSX allows us to write HTML like code inside JS file and everything works without breaking. On line 2 we have defined a variable name and then we are using that name on line 5 inside HTML like syntax which will render the value of name inside h2.

So how does this work. How we can return HTML inside of JavaScript file directly?

JSX UNDER THE HOOD

When we run our react application, react uses transpiler (a compiler that translates one form of syntax into another) called Babel to transform JSX into plain JavaScript code which is understandable by the browser because the browser only understands JavaScript it does not understand what is JSX.

Let's see an example to understand it better

import React from 'react'
function Greet(){
    return <h1>Hello World!</h1>
}

The above component is simple it will just render Hello World and it looks like it is returning h1 tag but actually this code will be converted to JavaScript code by Babel before compiling and will look something like this.

import React from 'react'
function Greet() {
    return React.createElement("h1", {}, "Hello, World!")
 }

HTML like code is being transformed into a JavaScript function call React.createElement(). This is the reason we need to import react in our file so it can be used later on to call this function.

Working of React.createElement

The createElement() function primarily accepts the following parameters and returns a React element(which is a JS object):

React.createElement(
      type,
       [props], //attribiute of the element
      [...children]
    )

Let us see an example of how createElement function will be called, where we have attributes for the elements in JSX.

JSX

<div>
  <h1>Hello JSX</h1>
  <h2 label="screen">Sub heading</h2>
</div>

JavaScript

React.createElement("div", {}, [
React.createElement("h1", {}, "Hello JSX"),
React.createElement(
        "h2",
        {
          label: "screen",
        },
        "Sub heading"
        ),
        ]);

So this is how the actual JSX turns out when its pre-compiled by Babel.

What React.createElement() returns

Js file with JSX

import React from 'react'

function App (){
         return (
           <div>
            <p>This is a list</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
          </div>
       );
     };

JavaScript after it has been compiled by Babel

import React from 'react';

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, "This is a list"),
    React.createElement(
      "ul",
      null,
      React.createElement("li", null, "List item 1"),
      React.createElement("li", null, "List item 2")
    )
  );
}

This is what React.createElement() will return

    {
           "type": "div",
           "key": null,
           "ref": null,
           "props": {
             "children": [
               {
                 "type": "p",
                 "key": null,
                 "ref": null,
                 "props": {
                   "children": "This is a list"
                 },
                 "_owner": null
               },
               {
                 "type": "ul",
                 "key": null,
                 "ref": null,
                 "props": {
                   "children": [
                     {
                       "type": "li",
                       "props": {
                         "children": "List item 1"
                       },
                       // truncated for brevity
                     },
                     {
                       "type": "li",
                       "props": {
                         "children": "List item 2"
                       },
                       // truncated for brevity
                     }
                   ]
                 },
                 "_owner": null
               }
             ]
           },
           "_owner": null
       }

The actual one will look something like this.

Why use JSX?

Now that you understand how to use JSX and how it works. You may wonder why even use JSX why complicate things by adding code transpilers and everything why don't simply use plain HTML, CSS, JS.

Traditionally when we write code for a webpages, HTML CSS and JS are usually located in different files. Where HTML is used to render content CSS handles the styling part and JS handles the logic. But as your project grows bigger and things become more and more interactive. logic starts determining the content this is why in react rendering markup(HTML) and logic(JS) lives in the same place as a component and JSX makes this possible.

Things to remember when using JSX

• We can't return more than one element from a react component when using JSX. you can use react fragment to return multiple elements

• Every tag should have a closing tag. Single tags like image tags can be return as <img/>

• Use camel case when writing HTML attribute names and change some names like class to className and for to htmlFor

That's it! with this knowledge you can get started with JSX and React. I hope you enjoyed reading this article and I made your react journey little bit simpler.