1、React初体验之NodeJS环境搭建

1、NodeJS安装

　　我博客中有相关文章，此处再也不赘述。

2、相关模块安装

　　在使用React的时候须要安装一些相关模块：

一、babel

　　npm install babel -g --save-dev

　　（其中，--save-dev表示将babel模块放入当前项目的package.json文件的devDependencies下，表示当前开发环境的依赖模块。

　　　　--save表示将babel模块放入当前项目的package.json文件的Dependencies下，表示当前运行环境的依赖模块。）

　　babel主要做用是将代码中相关ES6语法转换成目前大多数浏览器接受的ES5。

二、webpack

　　npm install webpack -g --save-dev

　　webpack主要做用是将当前项目资源进行打包，生成一个JS文件，用于前端页面引入加载。

三、webpack-dev-server

　　npm install webpack-dev-server -g --save-dev

　　webpack-dev-server主要做用是建立服务器。

具体要了解模块安装相关方法请移步： http://javascript.ruanyifeng.com/nodejs/npm.html#toc8

3、建立项目根文件package.json

　　这个文件主要对当前项目的各类信息进行统计，如项目名称、版本、依赖、开发环境依赖等等。

　　建立这个文件用npm init，以后根据提示填写相关内容便可。（若是不想填，能够用npm init --yes或npm init --y），以后在package.json中继续添加修改。

{
  "name": "AppTest",　　//项目名称
  "version": "1.0.0",　　//项目当前版本
  "main": "main.js",　　//加载模块时的入口文件，全部的模块最终都汇聚在这儿
  "dependencies": {　　//项目运行时的依赖模块

  },
  "devDependencies": {　　//项目开发时依赖的模块

　},
  "scripts": {　　//编写执行npm run <命令> ，如运行npm [run] start至关于执行了webpack-dev-server --hot
　　　"start": "webpack-dev-server --hot" 
　},
　"keywords": [],
　"author": "", 
　"license": "ISC",
　"description": "" ,
}

package.json文件中各项的含义详情，请移步：http://javascript.ruanyifeng.com/nodejs/packagejson.html

 4、添加相关的插件

一、React相关的插件

①npm install react --save

react的核心模块。

②npm install react-dom --save

react中用于将建立的virtual组件渲染到dom上。

二、Babel相关插件

npm install babel-core 

npm install babel-loader

npm install babel-preset-react

npm install babel-preset-es2015

这些模块主要处理ES6兼容性的问题。

欲知后事如何，请点下一篇文章。

做者： GeoChen

出处： http://www.cnblogs.com/GeoChen>

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出, 原文连接 若有问题， 可邮件（giser_xiaochen@163.com）咨询.