What you will learn by the end of this article:

• What a React Element is.
• How to create React Elements.
• What JSX is.
• Rules of JSX.

Elements are the basic building blocks of React and a good understanding of them will help you understand how React works and consequently help you create applications using React much better.

React Element

A React Element is an object that describes what needs to be rendered on the screen. Take you want to show the user a heading with the text "Hello World", the HTML would look like this:

<h1>
  Hello World
</h1>

The React Element to describe this would look something like this:

{
  type: "h1",
  props: {
    children: "Hello World"
  }
}

React uses React Elements to tell the browser what DOM nodes to create, update, or remove. In this case, React will tell the browser to create an h1 element with a child text node with the value "Hello World".

Creating React Elements

Now that we know what React Elements are and what they are used for, let us look at how to create them. React Elements are created using React's createElement function.

const h1 = React.createElement("h1", {}, "Hello World");

createElement takes the element type, props as an object, and optional children.

You can nest createElement calls to describe more complex DOM nodes.

React.createElement(
  "div",
  {className: "App"},
  React.createElement(
    "h1", 
    {},
    React.createElement('i', {}, "Hello")
  )
)

Nesting calls to createElement is not very ergonomic. You can imagine trying to create an entire app like this would be inefficient and frustrating. Fortunately, there is a better way... JSX.

JSX

JSX stands for JavaScript XML. It is a syntax extension to JavaScript that allows you to write HTML-like syntax in JavaScript. JSX allows us to create React Elements in a declarative manner.

const h1 = (
<h1>
  Hello World
</h1>
);

Here we create a React Element using JSX similar to how we would create a React element using createElement like this:

const h1 = React.createElement("h1", {}, "Hello World");

Unfortunately, browsers do not understand JSX, so we need transpilers like Babel to convert this JSX to pure JavaScript that browsers understand. The JSX above will be converted to its equivalent createElement call.

It is more efficient and maintainable to create nested elements using JSX compared to createElement.

import { createElement } from 'React';

const form = createElement(
  'form',
  {},
  createElement(
    'label',
    {},
    'Email',
    createElement('input', { name: 'email' }),
  ),
  createElement(
    'label',
    {},
    'Password',
    createElement('input', { name: 'password', type: 'password' }),
  ),
  createElement('button', {}, 'Submit'),
);

<form>
  <label>
    Email:
    <input name="email" />
  </label>
  <label>
     Password:
    <input name="password" type="password" />
  </label>
  <button>Submit</button>
</form>

JSX is essentially a nice shorthand for writing createElement function calls.

To properly write JSX it is important to be aware of some rules:

• JSX expressions must have a single root element. This means that you can't return adjacent sibling elements without wrapping them inside a parent element. For example, the following is not valid:

// Invalid JSX due to multiple root elements
const element = (
  <h1>Hello</h1>
  <p>World</p>
);

Instead, you should wrap them in a single element:

// Valid JSX with a single root element
const element = (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

• Elements that cannot have children Void Elements must be self closing e.g.

<input name="email" type="email" />

• HTML comments are not allowed in JSX. To add comments use curly braces {} and // or /* .... */.

const element = (
  <div>
    {/* This is a JSX comment */}
    <p>Hello, World!</p>
  </div>
);

• JavaScript expressions must be wrapped in curly braces {}.

const name = "John";
const element = <h1>Hello, {name}!</h1>;

To Recap:

• A React Element is an object that describes what needs to be rendered on the screen.
• A React Element is created using React's createElement function.
• JSX is a nice shorthand for creating elements in React.