Tutorials

/

JavaScript Tutorials

/

React JSX

Previous:

React

Next:

React Components

React JSX

• Babel
• JSX
• JSX vs JavaScript

You learned in the React library tutorial how to load two of the libraries that make up React:

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

The first line loads react.js, which provides code related to creating components (more on that below), and the second line loads react-dom.js, which provides code related to rendering those components to the DOM.

This tutorial introduces a third library, Babel, which lets you use a new syntax, JSX.

Babel

Babel is a JavaScript library that converts code from one syntax to another. For example, you can use new JavaScript features that haven’t been released yet, and Babel will convert them to JavaScript code that your browser can understand.

To use Babel, first load the Babel library:

<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

Next, provide a <script> tag with a type attribute with a value of "text/babel".

<script type="text/babel">
  // Your code goes here
</script>

This tells the browser to not read the code as JavaScript directly, but instead to let the Babel library process it.

JSX

JSX is a language that lets you write React code using syntax that looks more like HTML than JavaScript. Babel will convert JSX into the corresponding JavaScript.

For example, remember this code from the previous tutorial:

class App extends React.Component {
  render() {
    let h1Element = React.createElement('h1', {}, 'Hello world!');
    return h1Element;
  }
}

function load() {
  let appElement = React.createElement(App);
  let rootElement = document.getElementById('root');
  ReactDOM.render(appElement, rootElement);
}

Here’s the same code, using JSX instead of JavaScript:

class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

function load() {
  let rootElement = document.getElementById('root');
  ReactDOM.render(<App/>, rootElement);
}

Take a look at this line:

return <h1>Hello world!</h1>;

That’s not quite HTML, because it’s got a return statement and a ; semicolon, but it’s not quite JavaScript because the content isn’t wrapped in ' ' quotes. It’s JSX, which is a little bit like a mix of both HTML and JavaScript.

That JSX is functionally equivalent to this JavaScript:

return React.createElement('h1', {}, 'Hello world!');

Babel takes the JSX and transpiles (which is a fancy word for converts) it to the corresponding JavaScript, which your browser then runs.

Similarly, this line also uses JSX:

ReactDOM.render(<App/>, rootElement);

Putting it all together, it looks like this:

JSX vs JavaScript

JSX can be confusing at first, because it’s a new kind of syntax. But what helps me understand it is keeping in mind that JSX is JavaScript.

You can use the Babel browser translator to see the JavaScript code that’s generated from your JSX. If a line of JSX ever looks confusing, try pasting it into the translator to see the JavaScript that the browser ends up running!

You can use React without using JSX, by calling the React.createElement() function directly. But most “real” React codebases use JSX, so that’s what the rest of these tutorials will use as well.

Previous:

React

Next:

React Components