HomeTutorsContact

How to create a React element?

By Gulshan Saini
Published in ReactJS
July 12, 2020
2 min read

In Introduction to React, we learned how integrate React in simple HTML page and render a React element using React.createElement() method.

In this tutorial, we will explore two ways to create React elements

  1. React.createElement() method ( you can skip this part if you have already gone through Introduction to React tutorial )
  2. Describing element as JSX

We will kick off this tutorial with the following code that

  • imports React and ReactDOM
  • <script> tags to contain React code
  • has a root element with id of root, to render the React application using ReactDOM.render() method
<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

    <script>
      // REST OF CODE GOES HERE

      // Render function to display element on UI
      ReactDOM.render(reactElement, document.getElementById('root'))
    </script>
  </body>
</html>

Creating React element with React.createElement()

A simple React element could be a single HTML element with some content inside it. To create a React element we have to use the React.createElement() method.

const reactElement = React.createElement('h1', null, 'Hello World')

React.createElement() method takes following arguments

  • HTML tag or React Component. If we’re creating an HTML element, we pass in the name as a string, just like we did above. If we’re creating a React component, we pass in the variable that the component is assigned to.
  • props - these could be attributes of element or data
  • children - children could be simply a text node or again a React element
<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

    <script>
      // Create react element using React.createElement() method
      const reactElement = React.createElement('h1', null, 'Hello World')

      // Render function to display element on UI
      ReactDOM.render(reactElement, document.getElementById('root'))
    </script>
  </body>
</html>

If you save above code inside a HTML file and load in browser you should see text Hello World that is rendered by React.

Output

React.createElement('h1', null, 'Hello World')

Creating React element with JSX

Before we create a React element with JSX, we first need to understand what is JSX?

So, what is JSX?

  • A visual way of describing an element. Element created with JSX is compiled to React.createElement() calls. So you can say JSX is syntactic sugar for calling React.createElement().
  • Templating engine - HTML like syntax written in JavaScript that allows combining HTML markup and JavaScript
  • JSX can be assigned to a variable and passed into function as argument

Since JSX in neither HTML nor JavaScript, it requires a special engine to compile and convert into something that the browser can understand. Babel is a JavaScript compiler that converts JSX into plain JavaScript.

To compile JSX to JavaScript we need to import Babel into our project with in <script> tags

<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>

Next, we need to add attribute type="text/babel" in any <script> tag where we have defined JSX. This will tell Babel to treat the JSX code in special way and compile it to plain JavaScript.

Tip: Adding React, ReactDOM, and Babel directly within script tags are good for trying out React however not a recommended approach for production use.

The updated code can be found below.

<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- import Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

    <script type="text/babel">
      // REST OF CODE GOES HERE

      // Render function to display element on UI
      ReactDOM.render(reactElement, document.getElementById('root'))
    </script>
  </body>
</html>

Last, thing is to replace React.createElement() with JSX

const reactElement = <h1>Hello World</h1>

Finally the updated code with JSX will be

<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- import Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

  <script type="text/babel">
    // Create react element with JSX
    // const reactElement = React.createElement('h1', null, "Hello World");
    const reactElement = <h1>Hello World</h1>;
    // Render function to display element on UI
    ReactDOM.render(reactElement, document.getElementById("root"));
  </script>
  </body>
</html>

I have commented line const reactElement = React.createElement('h1', null, "Hello World"); and inserted new code just below it so that you can see the difference between two approaches.

If you save above code inside a HTML file and load in browser you should see text Hello World that is rendered by React.

Output

<h1>Hello World</h1>

Difference between React.createElement() and JSX

  • JSX is not mandatory to use React and is just syntactic sugar for calling React.createElement()
  • JSX allows visualizing the element as it would be rendered by a browser
  • To use JSX we need to have compiler like Babel whereas to use React.createElement() no compiler is required
  • JSX can combine both HTML and JavaScript syntax whereas React.createElement() is like any other JavaScript method

Outro

This tutorial shows two ways to create a React element. We learned how to create an element using React.createElement() method and JSX that is compiled down to React.createElement() calls by Babel compiler.


Tags

#react
Previous Article
Introduction to React

Related Posts

ReactJS
How to set dynamic inner text with React.createElement()?
July 19, 2020
1 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Flutter
JavaScript
NextJS
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media