babeljs - babel 和 JSX 有什么相关或不同？

Question

我正在学习 React JS，并且我已经获得了有关 JSX 和 babel 的信息。但我不清楚它们如何帮助 React 以及它们之间有何不同

Answer 1

React JS

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

• 使用标准 React 对象和方法

• 使用 JSX

JSX

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

让我们看看如何:

方法1:标准React方式

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

使用 JSX，您可以像标准 HTML 一样内联添加更多类似 HTML 的元素来创建 View 层。

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

巴别塔

现在的问题是，谁理解 JSX？。这里我们需要一个能够理解 JSX 并将其转换为可以在浏览器上运行的格式的转译器。 Babel 就是做这个工作的。

转译

可以通过两种方式进行转译

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

   • 将此文件作为脚本标记包含
   • 使用type="text/babel"在加载 JSX 的脚本标签上

这是sample code

基于服务器的转译 - 例如通天塔

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

这里有一些 sample code 。

希望这有帮助。