本篇文章主要讲述的是关于react环境搭建的一些解释，现在就让我们一起来看看这篇文章吧

React环境搭建

最近学习React，希望入个门，我的要求不高，能看得懂些简单的项目，装装逼就好。研究了两天，感觉技术更新太快，不保持对新技术的不断学习更新，真的跟不上的节奏。环境搭建都让我觉得有必要写篇文章记录下，算是备个份以后参考。初学者能力有限，理解也不一定对。

React介绍

React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES，一个构建用户界面的JS库。

Hello World示例

看了官网的安装介绍，点这里，简单的学学React其实依赖的环境并不复杂，可以使用官方推荐的在线环境CodePen，直接写代码看结果，不需要安装配置任何东西。不过，我还是想在本地搭建体验下，万一搞着搞着事情搞大了呢。

官网提供了一个Hello World的网页代码（html文件），直接打开浏览器就可以运行，代码如下：

<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>Hello World<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 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;">scriptsrc="https://unpkg.com/react@latest/dist/react.js"><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 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;">scriptsrc="https://unpkg.com/react-dom@latest/dist/react-dom.js"><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 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;">scriptsrc="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"><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 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 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;">pid="root"><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>

ReactDOM.render(

<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>Hello, world!<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>,

document.getElementById('root')

);

可以看到，代码中引用了CDN上现成的React相关库文件，所以React的代码可以直接写，其实这样就挺好了，本地随便找个编辑器（Sublime Text、Notepad++什么的），直接就可以开干，学React基础知识了吧。

一开始我也是这样的，用Sublime Text编辑代码，简单粗暴的开始了（我还找了Sublime Text上的React相关插件）。但是当我把React的script部分放到外部的js文件中引入时，例子就运行不了了（用的Chrome浏览器），然后大家告诉我需要服务器支持，赶紧找Gavin同学支援一把。

Node.js和WebStorm安装

Gavin同学的项目大致是React做前端，Java做后端，推荐给我的工具也是JetBrains家族的霸气IDE，WebStorm和Intellij IDEA，WebStorm里倒腾React应该是so easy的，于是我准备下载WebStorm和Node.js（好吧，都没用过，正好一波带走）。

npm是一个Node.js的包管理和分发工具，我们可以通过npm来引入React，搭建React的环境。新版的 Node.js 已经集成了npm

我下载的是最新的v7.4.0 for Windows (x64)版本，安装就不多介绍了，网上很多。

其实装好了Node.js后，可以继续结合之前的Sublime Text开干，因为Node.js可以提供服务器支撑，这样之前的例子就没问题了，网易云课堂中这堂课程就是类似这样搭建环境的（只不过他用的github的Atom编辑器）：

这个课程中还介绍了Browsersync，一个省时的浏览器同步测试工具（原谅我一直没接触过这类，看了下还不错哦），不用每次改了代码，还得F5了。（想看更多就到PHP中文网React参考手册栏目中学习）

当然，个人还是比较喜欢用IDE一些，所以我需要去体验下WebStorm（作为一个Java Web开发人员，很遗憾我一直只用Eclipse JEE，忽略了其他的风景）。

收费，但是功能强大，号称The smartest JavaScript IDE，Web前端开发神器，希望不会失望。下载、安装、License后，激动的打开开始体验。

左侧的React Starter Kit是什么鬼，貌似是React入门包呢，感觉是为我量身定制的，好奇选了这个，并重新指定了项目名和路径。有兴趣的小伙伴可以试试，反正最终项目建好后可以用，只是里面的东西有点复杂，没太搞得懂，所以决定还是回到新建空项目一步步来。

空项目建好之后，是的，什么都没有，回到官网教程吧，上面有一个Creating a Single Page Application的内容：

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.

感觉有现成的方式可以用，于是follow它的代码：

npm install-g create-react-app

create-react-app hello-world

cdhello-world

npm start

wait，上面的npm相关命令在哪儿输入是个问题？安装了Node.js后，如果设置ok，命令行是可以运行上面代码的。而在WebStorm中，貌似它已经识别到我的Node.js环境，所以在WebStorm左下角的Terminal窗口中已经可以直接使用npm，相当于命令行，就在这里面输吧，一条一条的来：

需要花几分钟时间执行前两条命令，尤其第二条，完成之后，我们的项目中应该创建好React相关的内容了：

看起来，它在我的hello-react目录中，新建了一个hello-world目录，并在里面安装好了React的内容，接下来参考它的建议，输入后两条命令，即进入该目录，启动，成功后自动打开浏览器访问了项目首页：

一切似乎已经ok了，页面提示我编辑src下的App.js，即可进入React世界，不信改两行代码试试？

环境是搭建完成了，然而并不了解个中情况，这个黑盒里有些什么东东，下来再慢慢研究吧，一切才刚刚开始呢。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上就是React环境如何搭建？react环境搭建详情介绍（附实例）的详细内容，更多请关注php中文网其它相关文章！