React几种基本配置方案_html/css_WEB-ITnose

对于没有使用过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 文件。比如下面的示例:

    <meta charset="UTF-8">    React    <script src="./src/js/react.js"></script>    <script src="./src/js/react-dom.js"></script><body>

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

的React节点中,最后渲染到
的HTML元素内。

<body>    
<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>

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

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

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

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

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

代码的转换发生了,那是因为我们引入了 browser.js 的Babel文件,并且给 <script> 元素设置 type 属性的值为 type="text/babel" 。当 browser.js 加载后将找到有关于 type="text/babel" 的脚本,并且将JSX/ES2015转换成ES5 JavaScript。例如,下面代码就是转换后的代码:

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'));

注意,对于Babel项目,使用Babel6将不再需要提供 browser.js 就可以将JSX代码转换成ES5代码。因此,如果你使用的是老版本的Babel(比如5.8.23版本),需要提供 browser.js 文件转换JSX/ES*。

方法3:通过system.js/browser.js在浏览器中转找JSX/ES 2015(非生产设置)

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: