Chances are you, if you've ever looked at a React component, you've seen JavaScript that looks like this:

class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

What is that stuff that looks like HTML or XML? That's called JSX and it stands for JavaScript eXtension. It might seem weird to have XML tags in your JavaScript, but it turns out to be super useful. By the end of this blog post, you'll have a solid understanding of what JSX is, and how we'll use it to build powerful React apps.

 function that specifies what the HTML output of our React component will be. JSX is a "language extension" that allows us to write JavaScript that 

Let me be clear: when you write JSX, it's really just calling a JavaScript function under the hood.

To see what this means, imagine we had a React component that renders an 

 HTML tag. JSX allows us to declare an element in a manner that closely resembles HTML.

 component that shows a message to the user. Without using JSX, we could write this component like the following:

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

It can become cumbersome creating HTML using the function of 

 everywhere, both specifying the attributes of a tag as well as defining child elements, especially when our component output grows in complexity. For example:

// Gross anti-example
// we don't actually write React code
// this way:
class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'div',
        {className: 'container'},
        React.createElement(
          'span', { className: 'title' },
          React.createElement(
            'H3', { className: 'large' }, 'Hello world'
          )
        )
      )
    );
  }
}

The same output from above using JSX, more succinctly reads as the following:

class HelloWorld extends React.Component {
  render() {
    return (
     <div className='container'>
        <span className='title'>
          <h3 className='large'>Hello world</h3>
        </span>
     </div>
    );
  }
}

Using JSX, the component is easier to understand because it looks like HTML (although is not, as we'll look at in a minute).

While JSX looks like HTML, it's actually a succinct method of calling 

 is, essentially, the function which will cause the HTML to be rendered in our browser.

As JSX is just JavaScript, we can execute JavaScript inside our JSX. We can execute arbitrary JavaScript inline with our code using the 

 curly-brace syntax. For instance, we can add two numbers together 

Although we won't often use a hardcoded math operation in our templates, we can do interesting things with the full-power to execute JavaScript in our templates.

Although we won't often use a simple math operation in our templates, having the full capabilities of JavaScript let's us write concise, powerful templates.

For example, if we have an array of users in an admin screen, we might want to list the number of users and 

// assume we have this `users` object:
let users = [
  {name: 'Ari', email: 'ari@fullstack.io'},
  {name: 'Nate', email: 'nate@fullstack.io'}
];

<div>
  <h4>{ users.length } users</h4>
  <table>
    <thead><tr><th>Name</th><th>Email</th></tr></thead>
    <tbody>
      {users.map(user => (
        <tr><td>{user.name}</td><td>{user.email}</td></tr>
      ))}
    </tbody>
  </table>
</div>

Displaying our users by iterating over an array

As JSX compiles to JavaScript we can use the 

 operator on an array and then render that list of users into our template.

 JSX, we pass our JavaScript code through a "pre-compiler" which translates it into "standard" JavaScript that can be read by all browsers.

Typically, compiling JSX is done by using a tool called 

 babel is setup for you automatically. We talk about using create-react-app at length 

The Virtual DOM is a tree of JavaScript objects that represents the actual DOM.

One of the interesting reasons to use the Virtual DOM is the API it gives us. When using the Virtual DOM we code as if we're 

recreating the entire DOM on every update

This idea of re-creating the entire DOM results in an easy-to-comprehend development model: instead keeping track of all DOM state changes in our head (and in our code), we simply return the DOM 

React takes care of the transformation (from the old DOM, to the desired DOM) behind the scenes!

This idea of re-creating the Virtual DOM every update might sound like a bad idea: isn't it going to be slow? But, in fact, React's Virtual DOM implementation comes with important performance optimizations that make it very fast.

All of this results in an easy-to-use and optimized way to build web apps.

The term "Virtual DOM" might seem a bit scary, but really what we're doing is 

 that look like a trimmed down version of the real DOM. (Essentially we're creating a tree of 

If you want to learn how to use JSX within the context of a project, grab a copy of the 

 - in there we teach you how to use not only JSX, but data architecture, routing and everything you need to build complete apps.
    

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">What is JSX?</h1><p>Chances are you, if you've ever looked at a React component, you've seen JavaScript that looks like this:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-KKbQ-S3K1oJi9jOtnEXnn" id="cm-KKbQ-S3K1oJi9jOtnEXnn">class HelloWorld extends React.Component {
  render() {
    return (
      &lt;h1 className='large'&gt;Hello World&lt;/h1&gt;
    );
  }
}</textarea><p>What is that stuff that looks like HTML or XML? That's called JSX and it stands for JavaScript eXtension. It might seem weird to have XML tags in your JavaScript, but it turns out to be super useful. By the end of this blog post, you'll have a solid understanding of what JSX is, and how we'll use it to build powerful React apps.</p><p>All of our React components have a <code>render</code> function that specifies what the HTML output of our React component will be. JSX is a "language extension" that allows us to write JavaScript that <em>looks like</em> HTML.</p><p>Let me be clear: when you write JSX, it's really just calling a JavaScript function under the hood.</p><p>To see what this means, imagine we had a React component that renders an <code>h1</code> HTML tag. JSX allows us to declare an element in a manner that closely resembles HTML.</p><p>For instance, let's see a <code>HelloWorld</code> component that shows a message to the user. Without using JSX, we could write this component like the following:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-jFODZeH_V1Xlwf8qbmGE9" id="cm-jFODZeH_V1Xlwf8qbmGE9">class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}</textarea><p>It can become cumbersome creating HTML using the function of <code>React.createElement()</code> everywhere, both specifying the attributes of a tag as well as defining child elements, especially when our component output grows in complexity. For example:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-pqJEH5Ocv-D5qS6fCWT7b" id="cm-pqJEH5Ocv-D5qS6fCWT7b">// Gross anti-example
// we don't actually write React code
// this way:
class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'div',
        {className: 'container'},
        React.createElement(
          'span', { className: 'title' },
          React.createElement(
            'H3', { className: 'large' }, 'Hello world'
          )
        )
      )
    );
  }
}</textarea><p>The same output from above using JSX, more succinctly reads as the following:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-ng44A6AQUthCyHnavQLoZ" id="cm-ng44A6AQUthCyHnavQLoZ">class HelloWorld extends React.Component {
  render() {
    return (
     &lt;div className='container'&gt;
        &lt;span className='title'&gt;
          &lt;h3 className='large'&gt;Hello world&lt;/h3&gt;
        &lt;/span&gt;
     &lt;/div&gt;
    );
  }
}</textarea><p>Using JSX, the component is easier to understand because it looks like HTML (although is not, as we'll look at in a minute).</p><p>While JSX looks like HTML, it's actually a succinct method of calling <code>React.createElement()</code>.</p><p><code>React.createElement()</code> is, essentially, the function which will cause the HTML to be rendered in our browser.</p><h2 class="heading-anchor-text" id="why-jsx?"><span>Why JSX?</span><a class="d-inline" href="#why-jsx?">#</a></h2><p>As JSX is just JavaScript, we can execute JavaScript inside our JSX. We can execute arbitrary JavaScript inline with our code using the <code>{}</code> curly-brace syntax. For instance, we can add two numbers together <em>inside</em> our component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-FRd3GExyHbhYX4i7spXcL" id="cm-FRd3GExyHbhYX4i7spXcL">&lt;h1&gt;{ 1 + 1 }&lt;/h1&gt;</textarea><p>Although we won't often use a hardcoded math operation in our templates, we can do interesting things with the full-power to execute JavaScript in our templates.</p><p>Although we won't often use a simple math operation in our templates, having the full capabilities of JavaScript let's us write concise, powerful templates.</p><p>For example, if we have an array of users in an admin screen, we might want to list the number of users and <code>map</code> over them in a table:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-vB4nGv6WasD8HPqUfBXqB" id="cm-vB4nGv6WasD8HPqUfBXqB">// assume we have this `users` object:
let users = [
  {name: 'Ari', email: 'ari@fullstack.io'},
  {name: 'Nate', email: 'nate@fullstack.io'}
];</textarea><p>And then this JSX template:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-WHphcNd4MBIjmXh0HPglm" id="cm-WHphcNd4MBIjmXh0HPglm">&lt;div&gt;
  &lt;h4&gt;{ users.length } users&lt;/h4&gt;
  &lt;table&gt;
    &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Email&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
    &lt;tbody&gt;
      {users.map(user =&gt; (
        &lt;tr&gt;&lt;td&gt;{user.name}&lt;/td&gt;&lt;td&gt;{user.email}&lt;/td&gt;&lt;/tr&gt;
      ))}
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;</textarea><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210221014425890_admin_app.jpg" attachmentid="8f9042b0-edae-453c-b508-c54c2e212dcc" contenteditable="false" data-width="550" data-height="373"><div></div></figure><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Displaying our users by iterating over an array</p></div></div><p>As JSX compiles to JavaScript we can use the <code>.map</code> operator on an array and then render that list of users into our template.</p><h2 class="heading-anchor-text" id="how-to-use-it"><span>How to use it</span><a class="d-inline" href="#how-to-use-it">#</a></h2><p>In order to <em>use</em> JSX, we pass our JavaScript code through a "pre-compiler" which translates it into "standard" JavaScript that can be read by all browsers.</p><p>Typically, compiling JSX is done by using a tool called <a href="https://babeljs.io/" rel="noopener noreferrer nofollow">babel</a>. When you use <a href="https://github.com/facebookincubator/create-react-app" rel="noopener noreferrer nofollow">create-react-app</a> babel is setup for you automatically. We talk about using create-react-app at length <a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">in the book</a>, so check it out.</p><p>Perhaps you've heard that </p><h1 class="heading-anchor-text" id="what-is-the-virtual-dom-anyway?"><span>What is the Virtual DOM anyway?</span><a class="d-inline" href="#what-is-the-virtual-dom-anyway?">#</a></h1><p>The Virtual DOM is a tree of JavaScript objects that represents the actual DOM.</p><p>One of the interesting reasons to use the Virtual DOM is the API it gives us. When using the Virtual DOM we code as if we're <strong>recreating the entire DOM on every update</strong>.</p><p>This idea of re-creating the entire DOM results in an easy-to-comprehend development model: instead keeping track of all DOM state changes in our head (and in our code), we simply return the DOM <em>we wish to see</em>.</p><p>React takes care of the transformation (from the old DOM, to the desired DOM) behind the scenes!</p><p>This idea of re-creating the Virtual DOM every update might sound like a bad idea: isn't it going to be slow? But, in fact, React's Virtual DOM implementation comes with important performance optimizations that make it very fast.</p><p>The Virtual DOM will:</p><ul><li><p>use <strong>efficient diffing algorithms</strong>, in order to know what changed</p></li><li><p><strong>update subtrees</strong> of the DOM simultaneously</p></li><li><p><strong>batch updates</strong> to the DOM</p></li></ul><p>All of this results in an easy-to-use and optimized way to build web apps.</p><p>The term "Virtual DOM" might seem a bit scary, but really what we're doing is <strong>building a tree of JavaScript objects</strong> that look like a trimmed down version of the real DOM. (Essentially we're creating a tree of <code>ReactElement</code> objects.)</p><p>If you want to learn how to use JSX within the context of a project, grab a copy of the <em><a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">Fullstack React</a></em><a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow"> book</a> - in there we teach you how to use not only JSX, but data architecture, routing and everything you need to build complete apps.
    </p><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

What is JSX?

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript