React JS

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

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

• 使用JSX

JSX

• JSX是与React分离的一项技术，在构建React应用程序时是完全可选的，但是当您将JSX与React结合使用时，它的工作变得更加轻松。

让我们看看如何：

方法1：标准React方式

(function() {

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

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

})();

上面的代码可以在此链接中找到。

在这里，您只需要在页面中包含reactand 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方法与普通JavaScript方法进行比较：

使用JSX，您可以像标准HTML 一样 内联添加许多 HTML之类的元素 ，以创建视图层。

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

巴别塔

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

转堆

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

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

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

这是示例代码

1. 基于服务器的转译-例如Babel

您可以使用其他工具，例如webpack等。

这是一些示例代码。

希望这可以帮助。