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

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.

Output

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.

Output

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

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
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media