React, Babel and JSX

Using Babel for JSX

Like any other JavaScript library, React is fully usable through plain, ordinary JavaScript code. But hardly anyone uses it that way. Instead, they compile a language called JSX down to ordinary JavaScript.

JSX allows HTML-like markup to be embedded within JavaScript code. Every tag in JSX is converted to a call to React.createElement(). For example, consider the following code:

const helloJSX = <h1 className="super-big">Hello, JSX!</h1>;

This code would be compiled to:

const helloJSX = React.createElement(
  'h1',
  { className: 'super-big' },
  'Hello, JSX!'
);

If you’re new to JSX, this new syntax will take some getting used to. But it makes code much easier to read and write than the equivalent series of React.createElement() calls would be. For more details on JSX syntax, take a look at the React docs.

The compiler that translates JSX into ordinary JavaScript is known as Babel. And it does so much more than just JSX: with Babel, you can write code that uses JavaScript features that are only implemented in leading-edge browsers and run that code everywhere. More precisely, you can run that code in any ...