React案例上手

阅读数:1707 发布时间:2016-05-06 21:02:06

作者:zzl005 标签: React react-dom 朱忠来005 node npm gulp

项目地址

第一步 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. 安装过程很慢,并且出现了下面一大片的信息:npm-install
  3. control + c中断安装后,再次执行 npm install,问题仍然没有解决,又给出了下面这些提示: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-React-DOM,应该是 react-dom 和 react 版本不匹配,根据提示安装 react@^0.14.8 ,执行命令 npm install react@^0.14.8
  7. 执行结束,发现一切终于 OK 后,npm startnpm-start
  8. 自动在3000端口起了一个页面local:3000
  9. 之后,你对该页面的编辑和改动,都会被实时监控并且在http://localhost:3000/可以查看。
    实时监控页面改动

相关文章推荐: