How are Babel and JSX related or different?

Question

I am learning React JS and I have information about JSX and babel. But I do not understand how they help to react and how they or differ from each other.

Answer 1

Js reaction

when creating an application using React, you can create components / views in two ways.

• using standard object and React methods

• using jsx

Jsx

• JSX is a separate technology from React and fully optional when creating a React application, however it makes life much easier when combining JSX with React.

Let's see how:

Approach 1: Standard Response

(function() {

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

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

})();

.

react react-dom . . JSX, Babel.

2: JSX

(function() {

    var HelloWorld = React.createClass({

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

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

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

})();

.

: <div> Hello World </div> JavaScript. JSX.

JSX JavaScript-:

JSX HTML- , HTML, .

JSX - , HTML JavaScript.

, JSX?. , JSX , . .

Transpiling

.

• / ( )

  • script
  • type="text/babel" script, JSX

2. - ,

, webpack ..

.

, .

Answer 2

TL;DR;

JSX - , Babel Javascript.

:

JSX - , React Component. XHTML, , Javascript ( Hyperscript) Babel.

Hello World, JSX:

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

Javascript:

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

, , JSX.

, , JSX. ES6/7 .