1、NodeJS安装javascript
我博客中有相关文章,此处再也不赘述。html
2、相关模块安装前端
在使用React的时候须要安装一些相关模块:java
一、babelnode
npm install babel -g --save-devreact
(其中,--save-dev表示将babel模块放入当前项目的package.json文件的devDependencies下,表示当前开发环境的依赖模块。webpack
--save表示将babel模块放入当前项目的package.json文件的Dependencies下,表示当前运行环境的依赖模块。)web
babel主要做用是将代码中相关ES6语法转换成目前大多数浏览器接受的ES5。npm
二、webpackjson
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)咨询.