How babel and JSX related or differ?

Question

I am learning on React JS and I have got information on JSX and babel. But I am not getting clarity on how these are helping React and how these or differ from each other

Answer 1

React JS

while building an app using React, you can create the components/views in two ways

• using standard React object and methods

• using JSX

JSX

• JSX is a separate technology from React and completely optional while building React application, however it makes life much easier when you combine JSX with React.

Let's see how :

Approach 1 : standard React way

(function() {

    var element = React.DOM.div({}, "Hello World");

    ReactDOM.render(element, document.getElementById("app"));

})();

The above code can be found at this link.

Here, you just need to include the react and react-dom library to your page. Nothing else is required. No JSX, no Babel.

Approach 2 : JSX way

(function() {

    var HelloWorld = React.createClass({

        render : function() {
            return (
            <div> Hello World </div>
            );
        }
    });

    var element = React.createElement(HelloWorld, {});

    ReactDOM.render(element, document.getElementById("app"));

})();

The above code can be found at this link.

Note the difference here: <div> Hello World </div> is used inside JavaScript. This is called JSX syntax.

Now, compare the JSX approach with the vanilla JavaScript approach:

With JSX, You can add many more HTML like elements inline, just like standard HTML, to create the view layer.

Without JSX, the code can get messy because of the multiple layers of elements required to create HTML in JavaScript.

Babel

Now the question is, who understands JSX?. Here We need a transpiler that understands JSX and converts it to a format that can run on browser. Babel does just this job.

Transpiling

Transpiling can be done two ways

1. Browser based/client side transpiling (use only for development purpose)

   • include this file as a script tag
   • use type="text/babel" on your script tag which loads your JSX

Here's the sample code

2. Server based transpiling - e.g. Babel

You can use different tools like webpack etc.

Here's some sample code.

Hope this helps.

Answer 2

tl;dr;

JSX is an easy syntax to represent markup in your code, which Babel converts to pure JavaScript.

Long version:

JSX is a syntactical convention which aims to make element structure definition easier in a React Component's code. This XHTML-like syntax which you write inside your components gets converted into JavaScript (not very different from Hyperscript) by Babel.

A very simple Hello World component written in JSX:

class HelloWorld extends Component{
    render(){
        return <div><h1>Hello World!</h1></div>
    }
}

And the equivalent in pure JavaScript:

class HelloWorld extends Component{
    render(){
        return React.createElement(
            "div",
            null,
            React.createElement(
                "h1",
                null,
                "Hello World!"
            )
        );
    }
}

Do note that the above example is abbreviated to keep the focus on the JSX part.

You would soon learn that Babel actually lends a lot more power to the React world than mere JSX transpilation. It allows you to use a lot of cool new ES6/7 features right now.