In this article we will take a look at the JSX⁠—an HTML-like syntax used by React to declare user interfaces. By the end of this post, you will have a better understanding of what JSX is, how it works, and why it's a preferred way to declare user interfaces in React.

For this article, we assume that you've just started your React journey. If you prefer a more structured approach to learning new things, we recommend checking the 

import React from "react";
import ReactDOM from "react-dom";

const header = <h1>Hello React!</h1>;

const rootElement = document.getElementById("root");
ReactDOM.render(header, rootElement);

 packages. We'll use these APIs later. Next, we declare the 

After that, we get the DOM node by its id. Finally, we ask React to render the header into the 

 function. We provide a React element to render and an HTML element that will be used as a container.

 id has been already defined in our document. Usually it's a 

 is JSX—a special syntax used by React to declare UI. It intentionally looks like HTML to make it easier to work with UI elements and layout.

As with HTML we can define attributes, which are called properties in React:

const isEditable = true;
const header = (
  <h1 id="welcome" contentEditable={isEditable}>
    Hello React!
  </h1>
);

 properties defined. We can use strings and JavaScript expressions as values. In case of expressions, we wrap an expression with curly braces.

Also, we can define children elements with JSX:

const article = (
  <div>
    <h1>Hello React!</h1>
    <p>We use JSX to declare UI.</p>
  </div>
);

If we'll try to run a code that uses JSX directly in a browser, we'd get an error message. This is because JSX is not a valid JavaScript syntax. We need to process this code first. We can use 

 for this. They will convert the JSX syntax into a plain JavaScript code.

The setup of JSX conversion is out of scope for this article. You may want to check the 

 section in the Babel documentation or check the 

Let's take a look at the code before and after such conversion:

// before
const myH1 = <h1 id="message">Hello React!</h1>;

// after
const myH1 = React.createElement("h1", { id: "message" }, "Hello React!");

You can play with the JSX to JavaScript conversion using this 

Here we can see that our JSX declaration has been converted into the 

 function call. This function takes three parameters. The first parameter defines a type of element to create, the second one is for properties, and the third one allows to specify children for the component. This function returns an object that is later used by React to render actual DOM nodes.

React controls rendering of our components. That means that in JSX we don't declare HTML elements or DOM nodes. Check 

 article to get more information about how rendering in React works.

You may notice that the converted code uses 

 namespace. That's why we need to import the 

 module when working with JSX. Even that we may not call 

As we've seen, JSX is a special syntax that got converted to 

To answer that, let's look at the following code:

const article = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello React!"),
  React.createElement(
    "ul",
    null,
    React.createElement("li", null, "Item 1"),
    React.createElement("li", null, "Item 2")
  )
);

We can tell what happens here, but this requires reading through the code.

Now, let's take a look at the same logic written with JSX:

const article = (
  <div>
    <h1>Hello React!</h1>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
);

Here we can understand the structure after a glance.

JSX is easy to read and reason about. That's the main feature of JSX that makes it preferable over the plain JavaScript.

Keep in mind that JSX is just an additional syntax over React API. There are no tricky hacks or implicit logic under the hood.

In this article, we've seen how to use JSX to declare React components. JSX makes it easier to declare your components and define UI of your application. It looks like HTML and got converted to pure JavaScript by Babel or TypeScript. When your React application runs in a browser, the browser knows nothing about JSX and works with JavaScript only.

Here are additional resources that will help you to learn more about JSX and React:

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Getting Started with JSX in React</h1><div data-node-type="summary" class="summary-block">In this article we will take a look at the JSX⁠—an HTML-like syntax used by React to declare user interfaces. By the end of this post, you will have a better understanding of what JSX is, how it works, and why it's a preferred way to declare user interfaces in React.</div><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>For this article, we assume that you've just started your React journey. If you prefer a more structured approach to learning new things, we recommend checking the <a href="https://www.newline.co/fullstack-react/30-days-of-react/" rel="noopener noreferrer nofollow">30 Days of React</a> step-by-step series.</p></div></div><p>Let's start with an example:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-tEmOS" id="cm-tEmOS">import React from "react";
import ReactDOM from "react-dom";

const header = &lt;h1&gt;Hello React!&lt;/h1&gt;;

const rootElement = document.getElementById("root");
ReactDOM.render(header, rootElement);</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F1skdx&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F1skdx&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We start by importing React APIs from <code>react</code> and <code>react-dom</code> packages. We'll use these APIs later. Next, we declare the <code>header</code> React element. This will be an <code>&lt;h1&gt;</code> element.</p><p>After that, we get the DOM node by its id. Finally, we ask React to render the header into the <code>root</code> DOM node with the <code>ReactDom.render()</code> function. We provide a React element to render and an HTML element that will be used as a container.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>The HTML element with the <code>root</code> id has been already defined in our document. Usually it's a <code>&lt;div&gt;</code> element. We can use any id here.</p></div></div><p>The syntax we've used to declare the <code>header</code> is JSX—a special syntax used by React to declare UI. It intentionally looks like HTML to make it easier to work with UI elements and layout.</p><h2><a name="using-jsx">Using JSX</a></h2><p>As with HTML we can define attributes, which are called properties in React:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-sYrOQ" id="cm-sYrOQ">const isEditable = true;
const header = (
  &lt;h1 id="welcome" contentEditable={isEditable}&gt;
    Hello React!
  &lt;/h1&gt;
);</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F4r724&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F4r724&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F4r724%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>Here we've got the same <code>&lt;h1&gt;</code> element with <code>id</code> and <code>contentEditable</code> properties defined. We can use strings and JavaScript expressions as values. In case of expressions, we wrap an expression with curly braces.</p><p>Also, we can define children elements with JSX:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-91iEQ" id="cm-91iEQ">const article = (
  &lt;div&gt;
    &lt;h1&gt;Hello React!&lt;/h1&gt;
    &lt;p&gt;We use JSX to declare UI.&lt;/p&gt;
  &lt;/div&gt;
);</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fqbrq5&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fqbrq5&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fqbrq5%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>Here we've got a <code>&lt;div&gt;</code> element that contains <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> elements.</p><h2><a name="how-jsx-works">How JSX Works</a></h2><p>If we'll try to run a code that uses JSX directly in a browser, we'd get an error message. This is because JSX is not a valid JavaScript syntax. We need to process this code first. We can use <a href="https://babeljs.io/" rel="noopener noreferrer nofollow">Babel</a> or <a href="https://www.typescriptlang.org/" rel="noopener noreferrer nofollow">TypeScript</a> for this. They will convert the JSX syntax into a plain JavaScript code.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>The setup of JSX conversion is out of scope for this article. You may want to check the <a href="https://babeljs.io/docs/en/#jsx-and-react" rel="noopener noreferrer nofollow">JSX and React</a> section in the Babel documentation or check the <a href="https://reactjs.org/docs/create-a-new-react-app.html" rel="noopener noreferrer nofollow">Create a New React App</a> article.</p></div></div><p>Let's take a look at the code before and after such conversion:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-GNBm4" id="cm-GNBm4">// before
const myH1 = &lt;h1 id="message"&gt;Hello React!&lt;/h1&gt;;

// after
const myH1 = React.createElement("h1", { id: "message" }, "Hello React!");</textarea><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>You can play with the JSX to JavaScript conversion using this <a href="https://babeljs.io/repl/#?browsers=&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpePAEpxhwKABEA8gFlldNEZJU0QUNCgqITEJOgceIA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=react&amp;prettier=false&amp;targets=&amp;version=7.8.3&amp;externalPlugins=" rel="noopener noreferrer nofollow">Babel playground</a>.</p></div></div><p>Here we can see that our JSX declaration has been converted into the <a href="https://reactjs.org/docs/react-api.html#createelement" rel="noopener noreferrer nofollow">React.createElement()</a> function call. This function takes three parameters. The first parameter defines a type of element to create, the second one is for properties, and the third one allows to specify children for the component. This function returns an object that is later used by React to render actual DOM nodes.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>React controls rendering of our components. That means that in JSX we don't declare HTML elements or DOM nodes. Check <a href="https://reactjs.org/docs/rendering-elements.html" rel="noopener noreferrer nofollow">Rendering elements</a> article to get more information about how rendering in React works.</p></div></div><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>You may notice that the converted code uses <code>React</code> namespace. That's why we need to import the <code>react</code> module when working with JSX. Even that we may not call <code>React</code> directly in our JSX code.</p></div></div><h2><a name="why-use-jsx">Why Use JSX</a></h2><p>As we've seen, JSX is a special syntax that got converted to <code>React.createElement</code> calls.</p><p>So <strong>why use JSX instead of calling the <code>createElement</code> function directly</strong>?</p><p>To answer that, let's look at the following code:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-Ot4bl" id="cm-Ot4bl">const article = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello React!"),
  React.createElement(
    "ul",
    null,
    React.createElement("li", null, "Item 1"),
    React.createElement("li", null, "Item 2")
  )
);</textarea><p>We can tell what happens here, but this requires reading through the code.</p><p>Now, let's take a look at the same logic written with JSX:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-gTnsj" id="cm-gTnsj">const article = (
  &lt;div&gt;
    &lt;h1&gt;Hello React!&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
);</textarea><p>Here we can understand the structure after a glance.</p><p>JSX is easy to read and reason about. That's the main feature of JSX that makes it preferable over the plain JavaScript.</p><div data-panel-type="success" data-panel-position="inline" class="panel panel-type-success panel-position-inline"><div class="panel-container lolwut"><p>Keep in mind that JSX is just an additional syntax over React API. There are no tricky hacks or implicit logic under the hood.</p></div></div><h2><a name="conclusion">Conclusion</a></h2><p>In this article, we've seen how to use JSX to declare React components. JSX makes it easier to declare your components and define UI of your application. It looks like HTML and got converted to pure JavaScript by Babel or TypeScript. When your React application runs in a browser, the browser knows nothing about JSX and works with JavaScript only.</p><h2><a name="more-resources">More Resources</a></h2><p>Here are additional resources that will help you to learn more about JSX and React:</p><ul><li><p>A detailed overview of JSX and its capabilities—<a href="https://reactjs.org/docs/jsx-in-depth.html" rel="noopener noreferrer nofollow">JSX in depth</a>.</p></li><li><p>How to <a href="https://reactjs.org/docs/create-a-new-react-app.html" rel="noopener noreferrer nofollow">Create a New React App</a>.</p></li><li><p>Documentation on the <a href="https://reactjs.org/docs/react-api.html#createelement" rel="noopener noreferrer nofollow">React.createElement</a> API.</p></li><li><p><a href="https://babeljs.io/repl/#?browsers=&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpePAEpxhwKABEA8gFlldNEZJU0QUNCgqITEJOgceIA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=react&amp;prettier=false&amp;targets=&amp;version=7.8.3&amp;externalPlugins=" rel="noopener noreferrer nofollow">Babel playground</a> that allows converting JSX to pure JavaScript.</p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Getting Started with JSX in React

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript