babel和JSX如何相关或不同？

Question

我正在学习React JS,我有关于JSX和babel的信息.但我并没有明白这些如何帮助React以及它们之间的区别或差异

Answer 1

反应JS

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

• 使用标准的React对象和方法

• 使用JSX

JSX

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

我们来看看如何:

方法1:标准的反应方式

(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方法与vanilla JavaScript方法进行比较:

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

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

巴别塔

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

Transpiling

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

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

   • 将此文件包含为脚本标记
   • 用于type="text/babel"加载JSX的脚本标记

这是示例代码

2. 基于服务器的转换 - 例如Babel

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

这是一些示例代码.

希望这可以帮助.

Answer 2

tl; dr;

JSX是一种简单的语法，用于表示代码中的标记，Babel会将其转换为纯JavaScript。

长版：

JSX是一种语法约定，旨在使React Component的代码中的元素结构定义更容易。您在组件内部编写的类似于XHTML的语法被Babel 转换为JavaScript（与Hyperscript并没有太大不同）。

用JSX编写的一个非常简单的Hello World组件：

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部分上。

您很快就会知道，Babel实际上为React世界提供了比单纯的JSX转换更多的功能。它使您现在可以使用许多很棒的ES6 / 7新功能。