React案例上手

项目地址

• React-GoogleMap

第一步 clone 项目到本地

1. 选择一个本地目录，我的目录是：/Users/abc/project/React/src/
2. git clone https://github.com/TommyHili/React-GoogleMap.git

第二步 查看项目文件

1. clone 完了之后，切换到该目录下：cd React-GoogleMap
2. ls -1查看该目录下的文件列表，发现有以下几个：README.md , build , gulp , gulpfile.js , node_modules , package.json , src

第三步 安装依赖模块

1. npm install，根据 项目文件列表中的 package.json 文件，安装依赖的模块
2. 安装过程很慢，并且出现了下面一大片的信息：
3. control + c中断安装后，再次执行 npm install，问题仍然没有解决，又给出了下面这些提示：
4. 看起来是 React 和 React-dom 版本的问题，这时候查看一下 npm 和 node 版本，发现有新的版本，就先升级下 node 和 npm ,先安装一个node 的模块，名字就叫 n ，这是用来管理 node.js 版本的，通过命令sudo npm install -g n，再通过下面一行命令n stable 升级 node.js 到最新稳定版。可以查看堂主的这篇文章了解更多。
5. 升级完后， node 版本为 6.0.0, npm 版本为 3.8.6。
6. 之后，回到刚才那边，重新执行 npm install,发现不报错误信息了，但是发现安装过程特别慢，这时候换到 npm 的淘宝镜像 npm --registry=https://registry.npm.taobao.org,再次执行 npm install,发现下面这个问题，，应该是 react-dom 和 react 版本不匹配，根据提示安装 react@^0.14.8 ,执行命令 npm install react@^0.14.8
7. 执行结束，发现一切终于 OK 后，npm start，
8. 自动在3000端口起了一个页面
9. 之后，你对该页面的编辑和改动，都会被实时监控并且在http://localhost:3000/可以查看。