React and JSX

What is JSX and how to use it

JSX is the language used in React. It's similar to HTML or XML, which is a superset of HTML.

We write our React components in JSX but the browser doesn't understand JSX natively, so we need to have a way to translate JSX into Javascript.
When we translate one language into another one, we say that we transpile, the language.

JSX gets transpiled into Javascript by a program (in our case written in Javascript) that is called a transpiler.
A transpiler is a program that takes code in one language and translates it into another language. The transpiler that is used often with React is Babel.
You can find detailed information about Babel at its home page.

So, to quickly summarize what we have learned so far:

• we write our React components in a HTML-like language called JSX
• the JSX is transpiled down to Javascript
• the browser executes the transpiled Javascript.

In order to write JSX we need support for it into our files, that's why we import React at the top of all our component files.
Without this import, the browser would have trouble understanding the JSX syntax in our Javascript files.
The way we import React is to add this import statement at the top of each component file:

import React from 'react';

This works, as long as we install the necessary Node modules to work with React.
One way to work with React and create and manage React application is through
the create-react-app module.
Tomorrow we will learn more about create-react-app and how to use it to jumpstart a React application.