最近学习React，希望入个门，我的要求不高，能看得懂些简单的项目，装装逼就好。研究了两天，感觉技术更新太快，不保持对新技术的不断学习更新，真的跟不上的节奏。环境搭建都让我觉得有必要写篇文章记录下，算是备个份以后参考。初学者能力有限，理解也不一定对，免责下先。
React介绍
React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES，一个构建用户界面的JS库。参考官网的介绍：
https://facebook.github.io/react/
当然，阮一峰的教程中的介绍也可以参考：
http://www.52php.cn/article/p-rkowmlmt-bnx.html
Hello World示例
看了官网的安装介绍，点这里，简单的学学React其实依赖的环境并不复杂，可以使用官方推荐的在线环境CodePen，直接写代码看结果，不需要安装配置任何东西。不过，我还是想在本地搭建体验下，万一搞着搞着事情搞大了呢。
官网提供了一个Hello World的网页代码（html文件），直接打开浏览器就可以运行，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<
html
>
head
>
meta
charset
=
"UTF-8"
/>
title
>Hello World</
>
script
src
"https://unpkg.com/react@latest/dist/react.js"
></
script
>
"https://unpkg.com/react-dom@latest/dist/react-dom.js"
>
"https://unpkg.com/babel-standalone@6.15.0/babel.min.js"
>
</
>
body
>
div
id
"root"
div
>
type
"text/babel"
>
ReactDOM.render(
h1
>Hello,world!</
>,
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 ，所以我得先去Node.js官网下载安装：
https://nodejs.org/en/
我下载的是最新的v7.4.0 forWindows (x64)版本，安装就不多介绍了，网上很多。
其实装好了Node.js后，可以继续结合之前的Sublime Text开干，因为Node.js可以提供服务器支撑，这样之前的例子就没问题了，网易云课堂中这堂课程就是类似这样搭建环境的（只不过他用的github的Atom编辑器）：
http://study.163.com/course/courseMain.htm?courseId=1565012
这个课程中还介绍了Browsersync，一个省时的浏览器同步测试工具（原谅我一直没接触过这类，看了下还不错哦），不用每次改了代码，还得F5了。
当然，个人还是比较喜欢用IDE一些，所以我需要去体验下WebStorm（作为一个Java Web开发人员，很遗憾我一直只用Eclipse JEE，忽略了其他的风景）。官方地址：
http://www.jetbrains.com/webstorm/
收费，但是功能强大，号称The smartest JavaScript IDE，Web前端开发神器，希望不会失望。下载、安装、License后，激动的打开开始体验，转为图文教程模式。
React项目建立
新建项目：
选择空项目，右边指定好项目保存的路径：
左侧的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它的代码：
| 4 |
npm
install
-g create-react-app
create-react-app hello-world
cd
hello-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世界，不信改两行代码试试？
页面中的效果为：
环境是搭建完成了，然而并不了解个中情况，这个黑盒里有些什么东东，下来再慢慢研究吧，一切才刚刚开始呢。