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

我的React开发之路1:React的环境搭建

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<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/react" title="React" target="_blank">React</a>更是一种模式,从2015年10月份开始接触<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>,我就认为这个框架以后一定会火。React是一个单向数据流的框架,不同于<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>和<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>的双向数据绑定 React的单向数据流可以数据模式更加单一,更利于前端的维护。 好了,废话不多说 如果想具体学习React,可以参考我以后的教程或者参考网上大量的资料 还有万能的github<br /><strong>React环境的搭建</strong><br />首先得明白React的开发是基于<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>去开发的,所以我们第一步做的就是编译<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a> 因为普通的浏览器并不懂的<a href="http://www.js-code.com/tag/jsx" title="浏览关于“JSX”的文章" target="_blank" class="tag_link">JSX</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="<script type=&quot;text/babel&quot;> //TODO your jsx </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">//TODO your jsx</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>个人十份不建议用以上的方式因为非常不利于代码的维护和开发而且也有各种的兼容性问题 当然 你想测试jsx就可以是用 编译JSX的方式非常多:webpack browserify+gulp+<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>ify 或者使用TypeScript用微软的编译器去编译<br />首先本人比较习惯第二种方式 也是介绍第二种方式<br /><strong>第一步</strong><br />安装必要的工具 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>.js gulp <br />安装<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>的最新版 下载根据提示安装即可<br />安装gulp 在node安装完之后 你需要用npm的命令去安装gulp :</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="npm install gulp -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> gulp -g</code></pre> <p>安装好gulp之后,就开始构建项目,可以新建一个目录名字,命令行指向该目录,也就是cd到此目录<br />输入以下的命令:</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="npm init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">init</span></code></pre> <p>根据提示做完以下的工作之后, 在目录中就会有一个名字叫做<code>package.json</code>的文件,然后就需要一些安装一些开发插件了<br />1、我们需要将gulp安装到项目目录里来;</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="npm install gulp --save// //或者 npm install --save gulp " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> gulp <span class="hljs-comment">--save//</span> //或者 npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save gulp </span></code></pre> <p>2、安装browserify ,browserify-shim,<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>ify vinyl-source-stream babel-preset-es2015 babel-preset-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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> browserify browserify-shim babelify vinyl-<span class="hljs-keyword">source</span>-stream babel-preset-es2015 babel-preset-react <span class="hljs-comment">--save-dev</span></code></pre> <p>这一步主要是安装一些编译器和一些必要的插件 具体怎么用后面会详细的说<br />3、安装react 和react-dom</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="npm install react react-dom --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> react react-dom <span class="hljs-comment">--save</span></code></pre> <p>既然是react的开发 就必须要有react<br />4、写好babel的配置:<br />创建一个叫做<code>.babelrc</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="{ &quot;presets&quot;: [&quot;react&quot;,&quot;es2015&quot;] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"react"</span>,<span class="hljs-string">"es2015"</span>] }</code></pre> <p>这个是babel编译器需要的插件用来编译<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>和react的jsx的语法<br />5、创建一个叫做gulpfile.js的文件 这个是gulp的执行文件 以下代码是一个简单的构建react项目的gulpfile.js的代码</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="//gulp需要的模块 var gulp = require(&quot;gulp&quot;); var connect = require(&quot;gulp-connect&quot;); var browserify = require(&quot;browserify&quot;); var source = require(&quot;vinyl-source-stream&quot;); var babel = require(&quot;babelify&quot;); //gulp 任务 用于创建本地服务器 gulp.task(&quot;connect&quot;,function(){ connect.server({ root:&quot;./&quot;, port:&quot;3000&quot;, livereload:true, host:'localhost' }) }); //编译任务 gulp.task(&quot;browserify&quot;,function(){ //entris:入口文件的js return browserify({entries: './domsrc/app/Main.js', extensions: ['.jsx']}) //用babel转换 .transform(babel) //需要browserify-shim转换 .transform(require('browserify-shim')) //bundle合并 .bundle() .pipe(source('bundle.js')) //编译文件目标目录 .pipe(gulp.dest('./bin-debug')); });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//gulp需要的模块</span> <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> connect = <span class="hljs-built_in">require</span>(<span class="hljs-string">"gulp-connect"</span>); <span class="hljs-keyword">var</span> browserify = <span class="hljs-built_in">require</span>(<span class="hljs-string">"browserify"</span>); <span class="hljs-keyword">var</span> source = <span class="hljs-built_in">require</span>(<span class="hljs-string">"vinyl-source-stream"</span>); <span class="hljs-keyword">var</span> babel = <span class="hljs-built_in">require</span>(<span class="hljs-string">"babelify"</span>); <span class="hljs-comment">//gulp 任务 用于创建本地服务器 </span> gulp.task(<span class="hljs-string">"connect"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ connect.server({ <span class="hljs-attr">root</span>:<span class="hljs-string">"./"</span>, <span class="hljs-attr">port</span>:<span class="hljs-string">"3000"</span>, <span class="hljs-attr">livereload</span>:<span class="hljs-literal">true</span>, <span class="hljs-attr">host</span>:<span class="hljs-string">'localhost'</span> }) }); <span class="hljs-comment">//编译任务 </span> gulp.task(<span class="hljs-string">"browserify"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">//entris:入口文件的js </span> <span class="hljs-keyword">return</span> browserify({<span class="hljs-attr">entries</span>: <span class="hljs-string">'./domsrc/app/Main.js'</span>, <span class="hljs-attr">extensions</span>: [<span class="hljs-string">'.jsx'</span>]}) <span class="hljs-comment">//用babel转换</span> .transform(babel) <span class="hljs-comment">//需要browserify-shim转换</span> .transform(<span class="hljs-built_in">require</span>(<span class="hljs-string">'browserify-shim'</span>)) <span class="hljs-comment">//bundle合并</span> .bundle() .pipe(source(<span class="hljs-string">'bundle.js'</span>)) <span class="hljs-comment">//编译文件目标目录</span> .pipe(gulp.dest(<span class="hljs-string">'./bin-debug'</span>)); });</code></pre> <p>6、package.json的配置文件修改:</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=" &quot;browserify-shim&quot;: { &quot;react&quot;: &quot;global:React&quot;, &quot;react-dom&quot;: &quot;global:ReactDOM&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code> <span class="hljs-string">"browserify-shim"</span>: { <span class="hljs-string">"react"</span>: <span class="hljs-string">"global:React"</span>, <span class="hljs-string">"react-dom"</span>: <span class="hljs-string">"global:React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>"</span> }</code></pre> <p>将这段代码加入到package.json里面 就可以了 现在环境基本已经搭建完成 </p> <p><strong>测试</strong><br />我们在工程目录下创建一个名为domsrc的目录 在这个目录下在创建一个app目录 里面创建一个<code>Main.js</code>的文件,<br />文件里的代码参考如下</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 React = require(&quot;react&quot;); var React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> = require(&quot;react-dom&quot;);<br /> class Main {<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(){<br /> React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(</p> <div>Hello World</div> <p>,document.getElementById(&quot;content&quot;));<br /> }<br /> }<br /> new Main();<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">"react"</span>); <span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">"react-dom"</span>); <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructor</span>(){ ReactDOM.render(<span class="xml"><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>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>,<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"content"</span>)); } } <span class="hljs-keyword">new</span> Main(); </code></pre> <p>然后在该目录下执行以下命令行</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="gulp browserify" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">gulp</span> browserify</code></pre> <p>可以看到在bin-debug生成了bundle.js的文件</p> <p></code></p>

总结

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

我的React开发之路1:React的环境搭建

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

我的React开发之路1:React的环境搭建

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

80%的人都看过