3. What is JSX and how to render React?

JSX stands for Javascript XML. 

JSX allows us to write HTML in React.

 

JSX makes it easier to write and add HTML in React.

JSX is a javascript syntax extension. This is not part of core javascript.

It is actually provided by React.

JSX makes working with your templates much easier than it was in the past.

That's why react js is so fantastic.

The normal way of variable declaration in javascript

var template = "Welcome to React Tutorial | Sleepycoder";

JSX version would be:

var template = <p>Welcome to React Tutorial | Sleepycoder</p>;

This will be rendered in the UI using ReactDOM.render(template, document.getElementById('root')); 

Example:

const template = <p>Welcome to React Tutorial | Sleepycoder</p>;
const root = document.getElementById('root');
ReactDOM.render(template, root); 

The above script will be throwing an error in the console as mentioned below.

Uncaught SyntaxError: Unexpected token '<' (at app.js:2:18) 

 Why this error is occurs in the sense this is actually not part of javascript. This is related to react extension.

In order to resolve this issue we need to use babel compiler.

We will learn how to setup babel compiler in the next tutorial.