reactjs – babel和JSX如何相关或不同？

使用React构建应用程序时,您可以通过两种方式创建组件/视图

>使用标准的React对象和方法
>使用JSX

JSX

> JSX是一个独立于React的技术,在构建React应用程序时是完全可选的,但是当您将JSX与React结合使用时,它会让生活变得更加轻松.

我们来看看如何：

方法1：标准的反应方式

(function() {

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

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

})();

上面的代码可以找到at this link.

在这里,您只需要在您的页面中包含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"));

})();

上面的代码可以在at this link找到.

请注意这里的区别：< div> Hello World< / div>在JavaScript中使用.这称为JSX语法.

现在,将JSX方法与vanilla JavaScript方法进行比较：

使用JSX,您可以像标准HTML一样添加更多HTML内联元素,以创建视图层.

没有JSX,代码可能会变得混乱,因为在JavaScript中创建HTML需要多层元素.

巴别塔

现在的问题是,谁了解JSX？
在这里我们需要一个了解JSX并将其转换为可以在浏览器上运行的格式的转换器.巴贝尔就是这样做的.

Transpiling

透明可以通过两种方式完成

>基于浏览器/客户端转换(仅用于开发
目的)

>将此文件包含为脚本标记

>在脚本标记上使用type =“text / babel”来加载JSX

这是sample code

>基于服务器的转换 – 例如巴别塔

您可以使用不同的工具,如webpack等.

这是一些sample code.

希望这可以帮助.