React环境如何搭建？react环境搭建详情介绍（附实例）

<p class="htmledit_views">本篇文章主要讲述的是关于<a href="http://www.php.cn/course/list/21.html" target="_blank">react</a>环境搭建的一些解释，现在就让我们一起来看看这篇文章吧</p> <h1 class="entry-title" style="font-family:inherit;font-weight:normal;line-height:1.2;color:rgb(34,34,34);border:0px;">React环境搭建</h1> <p style="border:0px;">最近学习React，希望入个门，我的要求不高，能看得懂些简单的项目，装装逼就好。研究了两天，感觉技术更新太快，不保持对新技术的不断学习更新，真的跟不上的节奏。环境搭建都让我觉得有必要写篇文章记录下，算是备个份以后参考。初学者能力有限，理解也不一定对。</p> <p style="border:0px;"><span style="border:0px;">React介绍</span></p> <p style="border:0px;">React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES，一个构建用户界面的JS库。</p> <p style="border:0px;"><span style="border:0px;">Hello World示例</span></p> <p style="border:0px;">看了官网的安装介绍，点这里，简单的学学React其实依赖的环境并不复杂，可以使用官方推荐的在线环境CodePen，直接写代码看结果，不需要安装配置任何东西。不过，我还是想在本地搭建体验下，万一搞着搞着事情搞大了呢。</p> <p style="border:0px;">官网提供了一个Hello World的网页代码（html文件），直接打开浏览器就可以运行，代码如下：</p> <table border="0" style="border-collapse:collapse;border-spacing:0px;width:700px;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:14px !important;min-height:auto !important;background:none !important;"><tbody style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><tr style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;" class="firstRow"> <td class="gutter" style="border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;color:rgb(175,175,175) !important;background:none !important;"> <p class="line number1 index0 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">1</p> <p class="line number2 index1 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">2</p> <p class="line number3 index2 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">3</p> <p class="line number4 index3 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">4</p> <p class="line number5 index4 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">5</p> <p class="line number6 index5 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">6</p> <p class="line number7 index6 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">7</p> <p class="line number8 index7 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">8</p> <p class="line number9 index8 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">9</p> <p class="line number10 index9 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">10</p> <p class="line number11 index10 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">11</p> <p class="line number12 index11 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">12</p> <p class="line number13 index12 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">13</p> <p class="line number14 index13 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">14</p> <p class="line number15 index14 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">15</p> <p class="line number16 index15 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">16</p> <p class="line number17 index16 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">17</p> <p class="line number18 index17 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">18</p> <p class="line number19 index18 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">19</p> </td> <td class="code" style="width:660px;border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;background:none !important;"> <p style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><br></p> <p class="line number1 index0 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><!DOCTYPE html></code></p> <p class="line number2 index1 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">html</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number3 index2 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">head</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number4 index3 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">meta</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">charset</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"UTF-8"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">/></code></p> <p class="line number5 index4 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">title</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>Hello World</</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">title</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number6 index5 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/react@latest/dist/react.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number7 index6 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/react-dom@latest/dist/react-dom.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number8 index7 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/babel-standalone@6.15.0/babel.min.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number9 index8 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">head</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number10 index9 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">body</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number11 index10 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">p</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">id</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"root"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">p</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number12 index11 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">type</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"text/babel"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number13 index12 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">      </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">ReactDOM.render(</code></p> <p class="line number14 index13 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">        </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">h1</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>Hello, world!</</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">h1</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>,</code></p> <p class="line number15 index14 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">        </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">document.getElementById('root')</code></p> <p class="line number16 index15 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">      </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">);</code></p> <p class="line number17 index16 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number18 index17 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">body</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number19 index18 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">html</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> </td> </tr></tbody></table> <p><br></p> <p style="border:0px;">可以看到，代码中引用了CDN上现成的React相关库文件，所以React的代码可以直接写，其实这样就挺好了，本地随便找个编辑器（Sublime Text、Notepad++什么的），直接就可以开干，学React基础知识了吧。</p> <p style="border:0px;">一开始我也是这样的，用Sublime Text编辑代码，简单粗暴的开始了（我还找了Sublime Text上的React相关插件）。但是当我把React的script部分放到外部的js文件中引入时，例子就运行不了了（用的Chrome浏览器），然后大家告诉我需要服务器支持，赶紧找Gavin同学支援一把。</p> <p style="border:0px;"><span style="border:0px;">Node.js和WebStorm安装</span></p> <p style="border:0px;">Gavin同学的项目大致是React做前端，Java做后端，推荐给我的工具也是JetBrains家族的霸气IDE，WebStorm和Intellij IDEA，WebStorm里倒腾React应该是so easy的，于是我准备下载WebStorm和Node.js（好吧，都没用过，正好一波带走）。</p> <p style="border:0px;">npm是一个Node.js的包管理和分发工具，我们可以通过npm来引入React，搭建React的环境。新版的 Node.js 已经集成了npm</p> <p style="border:0px;">我下载的是最新的v7.4.0 for Windows (x64)版本，安装就不多介绍了，网上很多。</p> <p style="border:0px;">其实装好了Node.js后，可以继续结合之前的Sublime Text开干，因为Node.js可以提供服务器支撑，这样之前的例子就没问题了，网易云课堂中这堂课程就是类似这样搭建环境的（只不过他用的github的Atom编辑器）：</p> <p style="border:0px;">这个课程中还介绍了Browsersync，一个省时的浏览器同步测试工具（原谅我一直没接触过这类，看了下还不错哦），不用每次改了代码，还得F5了。（想看更多就到PHP中文网<a href="http://www.php.cn/course/65.html" target="_blank">React参考手册</a>栏目中学习）</p> <p style="border:0px;">当然，个人还是比较喜欢用IDE一些，所以我需要去体验下WebStorm（作为一个Java Web开发人员，很遗憾我一直只用Eclipse JEE，忽略了其他的风景）。</p> <p style="border:0px;">收费，但是功能强大，号称The smartest JavaScript IDE，Web前端开发神器，希望不会失望。下载、安装、License后，激动的打开开始体验。</p> <p style="border:0px;">左侧的React Starter Kit是什么鬼，貌似是React入门包呢，感觉是为我量身定制的，好奇选了这个，并重新指定了项目名和路径。有兴趣的小伙伴可以试试，反正最终项目建好后可以用，只是里面的东西有点复杂，没太搞得懂，所以决定还是回到新建空项目一步步来。</p> <p style="border:0px;">空项目建好之后，是的，什么都没有，回到官网教程吧，上面有一个Creating a Single Page Application的内容：</p> <blockquote style="border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(51,190,229);background:rgb(250,250,250);"><p style="border:0px;font-size:14px;line-height:1.6;">Create React App is the best way to starting building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.</p></blockquote> <p style="border:0px;">感觉有现成的方式可以用，于是follow它的代码：</p> <table border="0" style="border-collapse:collapse;border-spacing:0px;width:640px;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:14px !important;min-height:auto !important;background:none !important;"><tbody style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><tr style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;" class="firstRow"> <td class="gutter" style="border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;color:rgb(175,175,175) !important;background:none !important;"> <p class="line number1 index0 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">1</p> <p class="line number2 index1 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">2</p> <p class="line number3 index2 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">3</p> <p class="line number4 index3 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">4</p> </td> <td class="code" style="width:608px;border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;background:none !important;"> <p style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><br></p> <p class="line number1 index0 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">npm </code><code class="shell functions" style="border:0px !important;color:rgb(255,20,147) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">install</code><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">-g create-react-app</code></p> <p class="line number2 index1 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">create-react-app hello-world</code></p> <p class="line number3 index2 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell functions" style="border:0px !important;color:rgb(255,20,147) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">cd</code><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">hello-world</code></p> <p class="line number4 index3 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">npm start</code></p> </td> </tr></tbody></table> <p><br></p> <p style="border:0px;">wait，上面的npm相关命令在哪儿输入是个问题？安装了Node.js后，如果设置ok，命令行是可以运行上面代码的。而在WebStorm中，貌似它已经识别到我的Node.js环境，所以在WebStorm左下角的Terminal窗口中已经可以直接使用npm，相当于命令行，就在这里面输吧，一条一条的来：</p> <p style="border:0px;">需要花几分钟时间执行前两条命令，尤其第二条，完成之后，我们的项目中应该创建好React相关的内容了：</p> <p style="border:0px;">看起来，它在我的hello-react目录中，新建了一个hello-world目录，并在里面安装好了React的内容，接下来参考它的建议，输入后两条命令，即进入该目录，启动，成功后自动打开浏览器访问了项目首页：</p> <p style="border:0px;">一切似乎已经ok了，页面提示我编辑src下的App.js，即可进入React世界，不信改两行代码试试？</p> <p style="border: 0px;">环境是搭建完成了，然而并不了解个中情况，这个黑盒里有些什么东东，下来再慢慢研究吧，一切才刚刚开始呢。</p> <p style="border: 0px;">本篇文章到这就结束了（想看更多就到PHP中文网<a href="http://www.php.cn/course/65.html" target="_blank">React使用手册</a>栏目中学习），有问题的可以在下方留言提问。</p>

Atas ialah kandungan terperinci React环境如何搭建？react环境搭建详情介绍（附实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!