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

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.

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

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


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

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.

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

Finally the updated code with JSX will be

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.


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


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.


Previous Article
Introduction to React

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to set dynamic inner text with React.createElement()?

July 19, 2020
1 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usContact UsBrowserCSSPythonPuppeteer

Social Media