随着ES6的成熟，react也受到了大家的青睐，包括我们的老大。去年项目使用的Vue框架，年后让我准备用react重构，满满的心塞~~~
所以这段时间一直准备这react的一些知识和看阮一峰老师的react的博客。今天就分享下项目开始的第一步————项目搭建
项目搭建的前提：nodeJS和npm。
新建一个项目文件 ReactApp （这个随意）。进入这个目录之后终端执行下方命令：
npm init
接下来你可以全部 Enter，会自动填写默认值。
初始化的时候，你也可以执行 npm init -yes 。这样就会跳过那些填写环节。
执行完之后，你会发现在项目文件中自动生成了一个package.json文件
接下来就是第二步：配置package.json文件
{
"name": "thouse",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"author": "WQL",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"css-loader": "^0.25.0",
"react": "^15.3.2",
"react-css-modules": "^4.0.3",
"react-dom": "^15.4.0",
"react-router": "^3.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react-router-dom": "^4.2.2"
}
}
这些都是初期必须的。如果你后期需要，可以在安装和添加。
修改完package.json文件后，执行npm install ，然后在ReactApp项目文件中创建webpack.config.js文件
并将下方的代码复制进去，这样第三步就完成了。
var path = require('path');
var webpack = require('webpack');
module.exports = {
/*入口文件路径*/
entry: [
'webpack/hot/dev-server',
path.resolve(__dirname, './app/index.js')
],
/*配置编译成功后文件存放的位置，path:编译后文件所在文件夹；
filename:根据入口文件名命名编译后的文件名，编译后文件还是叫bundle.js*/
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
module: {
/*最关键的一步配置，告知 webpack 每一种文件都需要使用什么加载器来处理*/
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {presets: ['es2015', 'react'] }
}
]
},
resolve: {
/*自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名*/
extensions: ['','.js', '.jsx',"css"],
}
};
配置了那么多，接下来就该编写你的代码了~
在ReactApp项目的根目录下创建index.html文件，代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ReactApp</title> </head> <body> <div id="root"></div> <script src="bundle.js"></script> </body> </html>
在ReactApp文件里面新建一个app文件夹，app文件夹中新建一个index.js的文件，代码如下：
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
全部执行配置完毕之后，运行命令：npm run dev，打开浏览器输入http://localhost:8080/就可以运行你的代码了。
如果有什么问题，可以进行交流讨论~~