loading...
Cover image for The Beginner's Guide To React: JSX

The Beginner's Guide To React: JSX

bipinrajbhar profile image Bipin Rajbhar Updated on ・6 min read

The Beginners Guide To React (6 Part Series)

1) The Beginner's Guide To React: Introduction 2) The Beginner's Guide To React: JSX 3 ... 4 3) The Beginner's Guide To React: Fragment 4) The Beginner's Guide To React: Components and Props 5) The Beginner's Guide To React: Validation of Custom React Component Props with PropTypes 6) The Beginner's Guide To React: Styling React Component with className and inline Styles

What is React?
JSX stands for JavaScript XML. It is syntactic sugar to React.createElement(component, props, ...children) method which returns React element.

JSX Code:
const element = <h1>Hello, World</h1>;

Compile Into:
const element = React.createElement(“h1”, null, “Hello, World”);

Who compiles the JSX?
Babel compiles the JSX to React.createElement(component, props, ...children) method.

What is Babel?
Babel is a toolchain (set of programming tools) that is mainly used to convert ES6 code into a backward-compatible version of JavaScript in current and older browser or environment.

If the Babel is mainly used to convert ES6 code int backward-compatible, so how Babel compiles JSX code to React.createElement(component, props, ...children) method?

Babel uses preset called @babel/preset-react which convert JSX code into React.createElement(component, props, ...children) method.

Here I am using a @babel/standalone package. It has all the presets including @babel/preset-react.

To see how Babel is compiling JSX code to React.createElement(component, props, ...children) method:
click on babeljs.io.

Add the script given below after the react-dom script:
<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
       <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>

</body>


html

Make sure you have added type="text/babel" in the script tag.

In the code given below <h1>JSX is awesome</h1> is neither String nor HTML its JSX.

Yes, you can store a JSX in a variable.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = <h1>JSX is awesome</h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>

Compiled Into:

  <body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("h1", null, "JSX is awesome");

      ReactDOM.render(element, rootElement);
    </script>
  </body>

Output:

In the code given below, I have added the style props or attribute to the h1 tag.

If you are thinking about why I am writing style in { border: "1px solid black", padding: "8px"} object why not "border: 1px solid black" in String because its a JSX not HTML 😂.

The style attribute expects a JavaScript Object with camelCased properties rather than CSS string.

Every express must be in the curly braces.

That is why we put { border: "1px solid black", padding: "8px"} (expression) in curly braces {{ border: "1px solid black", padding: "8px"}}.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = (
        <h1 style={{ border: "1px solid black", padding: "8px" }}>
          JSX is awesome
        </h1>
      );

      ReactDOM.render(element, rootElement);
    </script>
  </body>

Compiled Into:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement(
        "h1",
        {
          style: {
            border: "1px solid black",
            padding: "8px"
          }
        },
        "JSX is awesome"
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>

Output:

In the code given below, we closed the div tag as an empty tag.

Yes, you can close any tag as an empty tag.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = (
        <div
          style={{
            backgroundColor: "skyBlue",
            border: "1px solid black",
            width: "50px",
            height: "50px"
          }}
        />
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>

Complied Into:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("div", {
        style: {
          backgroundColor: "skyBlue",
          border: "1px solid black",
          width: "50px",
          height: "50px"
        }
      });

      ReactDOM.render(element, rootElement);
    </script>
</body>

Output:

In the code given below, we used a children property and closed an h1 tag as an empty tag. We have already seen the children's property in the introduction.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

    // JSX Code
      const element = <h1 children="JSX is Awesome"></h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>

Compiled Into:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("h1", {
        children: "JSX is Awesome"
      });

      ReactDOM.render(element, rootElement);
    </script>
</body>

Output:

In the code given below, we used spread operator.

JSX Code:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code

      const style = {
        padding: "8px",
        border: "1px solid black"
      };

      const children = "JSX is Awesome";

      const props = { style, children };

      const element = <h1 {...props}></h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>

Compiled Into:

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const style = {
        padding: "8px",
        border: "1px solid black"
      };
      const children = "JSX is Awesome";
      const props = {
        style,
        children
      };
      const element = React.createElement("h1", props);

      ReactDOM.render(element, rootElement);
    </script>
</body>

Output:

The Beginners Guide To React (6 Part Series)

1) The Beginner's Guide To React: Introduction 2) The Beginner's Guide To React: JSX 3 ... 4 3) The Beginner's Guide To React: Fragment 4) The Beginner's Guide To React: Components and Props 5) The Beginner's Guide To React: Validation of Custom React Component Props with PropTypes 6) The Beginner's Guide To React: Styling React Component with className and inline Styles

Posted on Mar 28 by:

bipinrajbhar profile

Bipin Rajbhar

@bipinrajbhar

I love to share every thing that i have learned

Discussion

markdown guide