React几种基本配置方案_html/css_WEB-ITnose-HTML Tutorial-php.cn

对于没有使用过React的同学总觉得它复杂，但在现实中，使用React并不困难。就我个人而言，学习React应该基于创建项目特定类型的设置细节之上(比如Webpack、Redux、ES6、JSX、Babel等)，而不是一下子就去忙于理解所有的设置项。

在这篇文章中列出了有关于React方面的七种设置。大部分的设置我都将会向大家展示，但总的来说，这并不困难。接下来的内容从简单到复杂，介绍React的设置。

方法1：只使用React，不使用JSX

如果在React项目中决定不使用JSX，又想渲染HTML DOM。那么在准备写React代码之前，在你的HTML页面需要引入一个 react.js 和 react-dom.js 文件。

react.js 文件是创建React节点和组件所需要的核心文件。当你打算在一个HTML中渲染一个组件（比如DOM）还需要 react-dom.js 文件。 react-dom.js 文件依赖于 react.js 文件，所以在引入 react-dom.js 文件之前要先引入 react.js 文件。比如下面的示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>React</title>    <script src="./src/js/react.js"></script>    <script src="./src/js/react-dom.js"></script></head><body></body></html>

Copy after login

在HTML页面中使用 react.js 和 react-dom.js 文件，就可以创建React节点或组件，然后渲染成DOM。接下来创建一个名叫 HelloMessage 的React组件，并且放到

的React节点中，最后渲染到

的HTML元素内。

<body>    <div id="app"></div>    <script>        var HelloMessage = React.createClass ({            displayName: "HelloMessage",            render: function render () {                return React.createElement("div", null, "Hello ", this.props.name);            }        });        ReactDOM.render(React.createElement(HelloMessage, {name: "John"}), document.getElementById("app"));    </script></body>

Copy after login

这样使用不需利用JSX或ES 2015。

方法2：通过browser.js转换JSX/ES 2015(非生产设置)

可以按前面的方式，在HTML页面中添加一个额外的脚本，允许使用JSX/ES2015。然后在客户端使用Babel来转换JSX并不是一个适于生产。在客户端运行时处理JSX/ES2015时负担很重，但对于非生产环境下在HTML中添加 browser.js 文件，可以在客户端中运行时转换JSX。

在HTML页面中使用JSX来实现前面示例中 HelloMessage 组件:

<body>    <div id="app"></div>    <script type="text/babel">        const HelloMessage = React.createClass({            render: function (){                return <div>Hello {this.props.name}</div>;            }        });        ReactDOM.render(<HelloMessage name="Jhon" />, document.getElementById("app"));    </script></body>

Copy after login

代码的转换发生了，那是因为我们引入了 browser.js 的Babel文件，并且给