脚本宝典收集整理的这篇文章主要介绍了

React 、 ES6 – 介绍(第一部分)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>这是<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>和<a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a>6结合使用系列文章的第一篇。</p> <blockquote> <p>本文出自从零到壹全栈部落</p> </blockquote> <p>下面是所有系列文章章节的链接:</p> <ul> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/28/react-es6-%E4%BB%8B%E7%BB%8D-%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">React 、 ES6 - 介绍(第一部分)</a></p> </li> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/29/react%E7%B1%BB-es7%E5%B1%9E%E6%80%A7%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">React类、ES7属性初始化(第二部分)</a></p> </li> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/30/react%E7%B1%BB-%E6%96%B9%E6%B3%95%E7%BB%91%E5%AE%9A-%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">React类,方法绑定(第三部分)</a></p> </li> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/31/es6%E4%B8%ADreact-mixins%E7%9A%84%E4%BD%BF%E7%94%A8-%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">ES6中React Mixins的使用(第四部分)</a></p> </li> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/32/react-%E5%92%8Ces6-%E4%B9%8Bjspm%E7%9A%84%E4%BD%BF%E7%94%A8-%E7%AC%AC%E4%BA%94%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">React 和ES6 之JSPM的使用(第五部分)</a></p> </li> <li> <p><a href="http://bbs.kongyixueyuan.com/topic/33/react-%E5%92%8C-es6-%E5%B7%A5%E4%BD%9C%E6%B5%81%E4%B9%8B-webpack%E7%9A%84%E4%BD%BF%E7%94%A8-%E7%AC%AC%E5%85%AD%E9%83%A8%E5%88%86" rel="nofollow noreferrer" target="_blank">React 和 ES6 工作流之 Webpack的使用(第六部分)</a></p> </li> </ul> <blockquote> <p><a href="https://github.com/yiqizhongchuang/react-es6-es7-gulp-JSPM-Webpack/tree/master/react-es6-es7-gulp-JSPM-Webpack-part1" rel="nofollow noreferrer" target="_blank">本篇文章Github源码</a></p> </blockquote> <table> <thead> <tr> <th align="center"><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a></th> <th align="center">JS</th> </tr> </thead> <tbody> <tr> <td align="center"><span class="img-wrap"><img data-src="/img/remote/1460000010184991" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></td> <td align="center"><span class="img-wrap"><img data-src="/img/remote/1460000010184992" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></td> </tr> </tbody> </table> <p>自从<a href="http://www.js-code.com/tag/reactjs" title="ReactJS" target="_blank">ReactJS</a> v0.13.0 Beta 1宣布,<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> 组建可以使用<a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a> 6 后,它能给我们带来什么好处呢?</p> <p><a href="http://www.js-code.com/tag/ecmascript" title="浏览关于“ECMAScript”的文章" target="_blank" class="tag_link">ECMAScript</a>6 (或者 ECMAScript 2015)是一个新的标准(它从26.06.2015更新,在2015年定稿,它是现在官方的标准-<a href="https://esdiscuss.org/topic/ecmascript-2015-is-now-an-ecma-standard" rel="nofollow noreferrer" target="_blank">链接</a>),它为JavaScript带来了很多新的特性,例如:<a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>es,arrow <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>s, rest parameters, iterators, generators … 等更多的新特性。</p> <p>如果你不是特别熟悉ECMAScript 2015的新特性,我将重点推荐你看看这个<a href="https://babeljs.io/learn-es2015/" rel="nofollow noreferrer" target="_blank">链接</a>。</p> <p>看看ES6的<a href="http://kangax.github.io/compat-table/es6/" rel="nofollow noreferrer" target="_blank">兼容性表</a>,我们会发现不是所有的浏览器都支持ES2015的新特性。幸运的是,你不需要花时间等所有的浏览器都支持ES2015,现在已经有相关的解决方案。你可以使用<code>transpilers</code>将ES2015的代码转换成ES5。这很类似于在JavaScript中如何将CoffeeScript转换成Coffee code。</p> <p><a href="https://babeljs.io/" rel="nofollow noreferrer" target="_blank">Babel</a>是解决方案之一,它真的很神奇的工具。对于作者有太多的感谢。Babel有什么好处呢,Babel支持大量不同的框架,构建系统、测试框架、模板引擎,<a href="https://babeljs.io/docs/setup/" rel="nofollow noreferrer" target="_blank">看这里</a>。</p> <p>给你一个快速知道<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>如何工作的例子。下面就是我们用ECMAScript 6写的例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var evenNumbers = numbers.filter((num) => num % 2 === 0);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> even<a href="http://www.js-code.com/tag/Number" title="浏览关于“Number”的文章" target="_blank" class="tag_link">Number</a>s = numbers.filter(<span class="hljs-function">(<span class="hljs-params">num</span>) =&gt;</span> num % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>);</code></pre> <p>运行<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>以后得到下面的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var evenNumbers = numbers.filter(function (num) { return num % 2 === 0; });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">var</span> evenNumbers = numbers.filter(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params">num</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> num % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>; });</code></pre> <p>同样的方法适用于其它ES6代码到ES5代码的转换。</p> <h2 id="articleHeader0">开发环境配置</h2> <p>为了让<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>有连续的工作流,我们将使用<code>Gulp</code>。这是基于<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js的任务构建工具,可以自动改善繁琐的任务。</p> <ol> <li> <p>明显,你需要安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js,如果你没有安装,需要在你系统上安装<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>js。</p> </li> <li> <p>下一步,你将需要安装全局的<code>Gulp</code>:<code>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --g gulp</code>。</p> </li> <li> <p>创建一个空文件夹,切换到这个文件夹中,在终端输入<code>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>it</code>初始化你的<code><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</code>。</p> </li> <li> <p>运行<code>npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --save react react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m</code>,这将安装<code>react</code>和<code>react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m</code>到你的<code>node_modules</code>文件夹并且作为依赖库保存到<code><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</code>文件中。</p> </li> <li> <p>运行<code>npm inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> --save-dev gulp browser<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>y babel<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>y vinyl-source-stream babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-es2015 babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-react</code>,这将安装更多的依赖到你的<code>node_modules</code>文件夹。</p> </li> </ol> <p>如果想要了解更多关于<code>step 5</code>中的内容,请移步:<a href="http://egorsmirnov.me/2015/05/25/browserify-babelify-and-es6.html" rel="nofollow noreferrer" target="_blank">my article about Browserify, Babelify and ES6</a></p> <h2 id="articleHeader1">创建 gulpfile.js</h2> <p>在你的根目录下面创建<code>gulpfile.js</code>文件,并将下面的代码拷贝到里面。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var gulp = require('gulp'); var browserify = require('browserify'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); gulp.task('build', function () { return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true}) .transform('babelify', {presets: ['es2015', 'react']}) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('dist')); }); gulp.task('watch', ['build'], function () { gulp.watch('*.jsx', ['build']); }); gulp.task('default', ['watch']);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>); <span class="hljs-keyword">var</span> browser<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>y = <span class="hljs-built_in">require</span>(<span class="hljs-string">'browserify'</span>); <span class="hljs-keyword">var</span> babelify = <span class="hljs-built_in">require</span>(<span class="hljs-string">'babelify'</span>); <span class="hljs-keyword">var</span> source = <span class="hljs-built_in">require</span>(<span class="hljs-string">'vinyl-source-stream'</span>); gulp.task(<span class="hljs-string">'build'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> browserify({<span class="hljs-attr">entries</span>: <span class="hljs-string">'./app.jsx'</span>, <span class="hljs-attr">extensions</span>: [<span class="hljs-string">'.jsx'</span>], <span class="hljs-attr">debug</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>}) .trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>(<span class="hljs-string">'babelify'</span>, {<span class="hljs-attr">p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>s</span>: [<span class="hljs-string">'es2015'</span>, <span class="hljs-string">'react'</span>]}) .bundle() .pipe(source(<span class="hljs-string">'bundle.js'</span>)) .pipe(gulp.dest(<span class="hljs-string">'dist'</span>)); }); gulp.task(<span class="hljs-string">'watch'</span>, [<span class="hljs-string">'build'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ gulp.watch(<span class="hljs-string">'*.jsx'</span>, [<span class="hljs-string">'build'</span>]); }); gulp.task(<span class="hljs-string">'<a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a>'</span>, [<span class="hljs-string">'watch'</span>]);</code></pre> <p>我猜,相关的一些解释将对你有帮助:</p> <ul> <li> <p>Lines 1-4. 我们需要安装node.js modules并且将他们赋值给变量。</p> </li> <li> <p>Line 6. 我们定义gulp任务名为<code>build</code>以便我们可以使用<code>gulp build</code>来运行。</p> </li> <li> <p>Line 7. 我们开始描述我们的构建任务将做什么。我们告知Gulp来使用app.jsx。我们打开调试模式,这有利于我们开发调试。</p> </li> <li> <p>Lines 8-11. 我们应用<code>Babelify</code>来转换我们的代码。这允许我们将ECMAScript6转换成ECMAScript5。下一步我们将结果输出到dist/bundle.js文件。这几行代码现在使用了Babel 6 中叫做presets的新特性。</p> </li> <li> <p>Lines 14-16. 我们定义一个名字叫做<code>watch</code>的任务以便我们能够通过<code>gulp watch</code>来运行。无论什么时候jsx文件内容发生变化,这个任务都会重新进行编译。</p> </li> <li> <p>Line 18. 我们定义默认的gulp任务以便我们输入gulp时自动运行,此任务只执行监视任务。</p> </li> </ul> <p>典型的工作流将是在终端输入<code>gulp</code>然后按下<code>enter</code>键。它将连续的监听react组建中代码的变化。</p> <h2 id="articleHeader2"><a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a> and Babel</h2> <p>你可能已经注意到我们在使用<code>.jsx</code>代替<code>.js</code>语法。<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>是<a href="http://www.js-code.com/tag/reactjs" title="ReactJS" target="_blank">ReactJS</a>团队研发的JavaScript扩展语法。这个格式对于<a href="http://www.js-code.com/tag/reactjs" title="浏览关于“ReactJS”的文章" target="_blank" class="tag_link">ReactJS</a>的开发更加方便快捷。</p> <p>这是关于<a href="https://facebook.github.io/react/docs/jsx-in-depth.html" rel="nofollow noreferrer" target="_blank">JSX</a>更多的信息。</p> <h2 id="articleHeader3">使用ECMAScript 6编写第一个React 组建</h2> <p><em>这个时候希望你多一点耐心</em></p> <p>在项目的根目录下面,添加一个<code>hello-world.jsx</code>文件,并且在文件中code下面的代码。这是我们用ES6编写的第一个非常简单的React组建。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> React from 'react';</p> <p>class HelloWorld <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component {<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>Hello from {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.phrase}!</h1> <p>;<br /> }<br /> }</p> <p>export default HelloWorld;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorld</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ render() { <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello from {<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.phrase}!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>; } } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> HelloWorld;</code></pre> <p>代码解析:</p> <ul> <li> <p>Line 1. 导入React库并且将它存到变量React中。</p> </li> <li> <p>Lines 3-8. 使用ES6创建继承自<code>React.Component</code>的类.<br />我们添加非常简单的<code>render</code>方法并且<code><a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a></code>一个包含phrase属性的<code>&lt;h1&gt;</code>标签。</p> </li> <li> <p>Line 9. 使用<code><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> HelloWorld</code>将创建的组建导出以便在其它地方能够正常导入使用。</p> </li> </ul> <p>为了便于理解,你也可以将下面ES5代码将上面文件中的代码替换,你会发现下面的代码就是上面代码的变体,上面是ES6,下面是ES5.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> React from 'react';</p> <p><a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> HelloWorld = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <h1>Hello from {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.phrase}!</h1> <p> );<br /> }<br /> });</p> <p>export default HelloWorld;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">var</span> HelloWorld = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello from {this.props.phrase}!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> ); } }); <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorld;</code></pre> <h2 id="articleHeader4">结束了</h2> <p>让我们来结束我们简单的例子。</p> <p>创建名字为<code>app.jsx</code>的文件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="import HelloWorld from './hello-world';<br /> import React from 'react';<br /> import React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> from 'react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m';</p> <p>React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<br /> <HelloWorld phrase=&quot;ES6&quot;></span>,<br /> document.querySelector('.root')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'./hello-world'</span>; <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>; ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">HelloWorld</span> <span class="hljs-attr">phrase</span>=<span class="hljs-string">"ES6"</span>/&gt;</span>, <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.querySelector('.root') );</span></code></pre> <p>这里我们导入上面创建的组建<code>HelloWorld</code>并且将<code>HelloWorld</code>创建了对象并且设置<code>phrase</code>属性。请注意,这里我们使用特殊的库<code>ReactDOM</code>来渲染<code>HelloWorld</code>组建。</p> <p>下一步,我们来创建<code>index.html</code>.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head lang=&quot;en&quot;><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>ReactJS and ES6</title><br /> </head><br /> <body></p> <div class=&quot;root&quot;></div> <p><script src=&quot;dist/bundle.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;!DOCTYPE html&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>ReactJS and ES6<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"root"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"dist/bundle.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></code></pre> <p>现在在终端运行<code>gulp</code>命令(它将创建<code>dist/bundle.js</code>文件)并且在浏览器中打开index.html,运行效果如下:<br /><a href="http://okxh06i2t.bkt.clouddn.com/Snip20170208_24.png" rel="nofollow noreferrer" target="_blank"><span class="img-wrap"><img data-src="/img/remote/1460000010185037" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="cover" title="cover" style="cursor: pointer;"></span></a></p> <h2 id="articleHeader5">参考文档</h2> <ul> <li> <p><a href="http://www.2ality.com/2015/02/es6-classes-final.html" rel="nofollow noreferrer" target="_blank">Classes in ECMAScript 6</a></p> </li> <li> <p><a href="https://leanpub.com/exploring-es6/" rel="nofollow noreferrer" target="_blank">Exploring ES6, e-book</a></p> </li> <li> <p><a href="https://babeljs.io/" rel="nofollow noreferrer" target="_blank">BabelJS</a></p> </li> <li> <p><a href="https://www.sitepoint.com/introduction-gulp-js/" rel="nofollow noreferrer" target="_blank">An Introduction to Gulp.js</a></p> </li> <li> <p><a href="https://facebook.github.io/react/docs/jsx-in-depth.html" rel="nofollow noreferrer" target="_blank">JSX in Depth</a></p> </li> </ul> <table> <thead> <tr> <th align="center">扫码申请加入全栈部落</th> </tr> </thead> <tbody> <tr> <td align="center"><span class="img-wrap"><img data-src="/img/remote/1460000010080938" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></td> </tr> </tbody> </table> <p></code></p>

总结

以上是脚本宝典为你收集整理的

React 、 ES6 – 介绍(第一部分)

全部内容,希望文章能够帮你解决

React 、 ES6 – 介绍(第一部分)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过