安装React开发环境（基于mac）

来源：互联网发布：新南威尔士预科知乎编辑：程序博客网时间：2024/06/01 22:51

第一步，安装node.js开发环境。

第一种，Node.js安装包及源码下载地址为：https://nodejs.org/en/download/ 下载后直接安装即可。

第二种，接着打开终端，输入以下命令安装Homebrew

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install);

再输入命令 brew install node

第二步，安装npm

如果你安装了最新版本的node，则默认已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。如下

如果不是最新的，建议升级了最新的，或者单独再安装npm，命令：brew install npm

第三步，安装jspm

第四步，为项目添加jspm依赖

选择你喜欢的目录，新建一个文件夹，可使用命令mkdir xxx, cd 到对应的文件夹下（这里假设新建文件夹名称为 ZXY_RN_Project）。
初始化npm, 创建package.json, 输入命令：npm init ，填写你的项目名称，接下来一路回车即可。
查看ZXY_RN_Project，会发现下面多了一个package.json文件.
重要步骤来了，输入
```
npm install jspm --save-dev
```
把jspm添加到项目开发依赖。完成后，命令ls, 会发现又多了node_modules文件，打开这个文件，会发现里面很多关于babel，ES6等等的东西。
最后执行命令 jspm init, 为jspm创建配置文件config.js, 一路回车即可。
到这里，项目添加jspm依赖就算完成了。

第五步，安装React

在ZXY_RN_Project下，通过jspm安装react, 命令jspm install react@0.14.0-rc1 （注：0.14.0-rc1为版本号）。一路回车即可。如果安装过程，出现error错误，则重新再执行一下命令即可，直到没出现error信息即为成功。
通过jspm安装rect-dom，命令jspm install react-dom@0.14.0-rc1 （注：0.14.0-rc1为版本号）。过程同上。
(非必需) 如果你项目想使用semantic-ui, 需安装semantic-ui，命令jspm install semantic-ui 导入semantic-ui样式需要安装jspm插件，命令jspm install css
上面步骤完成后，你会发现ZXY_RN_Project下面多了jspm_packages文件夹。

第六步，安装BrowserSync

通过npm安装browserSync，命令npm install -g browser-sync
使用BrowserSync启动项目，命令browser-sync start --server 。如果你想启动后，增加一些监听文件修改时，自动刷新页面，则启动命令为 browser-sync start --server --no-notify --files ‘xxxx' (xxx为具体的文件名，相对路径，有多个时，可用逗号分开，如 'index.html, app/main.js’);
到此，我们可以看到React项目正常启动后，出现页面。

第七步 IDE的选择

可选择Sublime Text（程序员Jon Skinner开发）, 或Atom ( github内部使用的，现在开源)等等，至于两者或其他的比较，谷歌一下。上面新建的项目，可以直接用IDE打开，如用Atom打开，目录结构如下：

第八步编写代码

经过上面七步，已经完成了一个React项目的构建，下面，我们可以使用IDE进行编程，这里以Atom为主。

编写完代码后，如果启动项目命令为 browser-sync start --server --no-notify --files 'xxxx'，则保存代码后自动刷新页面，无需手动刷新，如下。

Atom有非常多优秀的插件，可参考这里，http://blog.csdn.net/qq_30100043/article/details/53558381。

如果遇到安装失败的情况，请看这篇文章，万金油方法， http://www.cnblogs.com/strangerqt/p/5572435.html。

同样，Sublime Text也存在非常多的优秀插件，http://www.cnblogs.com/Rising/p/3741116.html

1 0