babel 和 JSX 有何关联或不同？

Question

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

Answer 1

React JS

在使用 React 构建应用程序时，您可以通过两种方式创建 components/views

使用标准 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。

方法二：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 一样，以创建视图层。

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

通天塔

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

转译

转译可以通过两种方式完成

浏览器 based/client 侧转译（仅用于开发目的）
- 将此文件包含为脚本标签
- 在加载 JSX 的脚本标签上使用 type="text/babel"

这是sample code

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

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

这是一些 sample code。

希望对您有所帮助。

Answer 2

tl；博士；

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

长版：

JSX 是一种语法约定，旨在使 React 组件代码中的元素结构定义更容易。您在组件中编写的这种 XHTML-like 语法会被 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 有何关联或不同？

How babel and JSX related or differ?

reactjs

react-jsx

babeljs

tl；博士；

长版：