TL;博士;

Question

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

Answer 1

React 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"));

})();

可以找到上面的代码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 like elements 内联，以创建视图层。

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

Babel

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

<强> Transpiling

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

基于浏览器/客户端的转换（仅用于开发目的）
- 将此文件包含为脚本标记
- 在加载JSX的脚本标记上使用type="text/babel"

这是sample code

基于服务器的转换 - 例如巴贝尔

您可以使用不同的工具，例如webpack等。

这里有一些sample code。

希望这有帮助。

Answer 2

TL;博士;

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功能。

babel和JSX如何相关或不同？

2 个答案:

TL;博士;

长版：