The JSX syntax

The JSX syntax extension (https://facebook.github.io/jsx/) adds XML tags to JS, and can be used by tools like ReactJS when the rendering of the page happens. It is promoted by the ReactJS community as the best way to write React apps.

In the following example, a <script> section contains a div variable whose value is an XML tree representing a div. This syntax is valid JSX. From there, the ReactDOM.render() function can render the div variable in the DOM.

    <!DOCTYPE html> 
    <html> 
      <head lang="en"> 
        <meta charset="UTF-8"> 
      </head> 
      <body> 
        <div id="content"></div> 
        <script src="/static/react/react.min.js"></script> 
        <script src="/static/react-dom.min.js"></script> 
        <script src="/static/babel/browser.min.js"></script> 
 
        <script type="text/babel"> 
          var div = 
              <div> 
                  Hello World 
              </div> 
         ReactDOM.render(div, document.getElementById('content')); 
        </script> 
      </body> 
    </html>

The two ReactJS scripts are part of the React distribution. The browser.min.js file is part of the Babel distribution, and needs to be loaded before the browser encounters any JSX syntax. Babel converts JSX syntax into JS. This conversion is called transpilation.

Babel (https://babeljs.io/) is a transpiler, which can convert JSX to JS on-the-fly, among other available conversions. To use it, you simply need to mark a script as being of type text/babel.

The JSX syntax is the only very specific thing to know about React, as everything else is done with common JavaScript language. From there, building a ReactJS app consists of creating JS classes--with or without JSX--which is used to render web pages.

Let's now look at the heart of ReactJS, ;components.

Table of Contents for The JSX syntax

Create new playlist

Sign In

Sign Up

Table of Contents for
The JSX syntax