今天我们来写第一个组件，通过node自带的package.json来进行模块管理(有不懂package.json的请看阮大大文章或则官网：http://www.ruanyifeng.com/blog/2015/05/require.html)。
1.新建test文件，通过npm init -y 生成package.json 文件,安装ex6转码依赖库以及react依赖库:
npm i babel-loader babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server babel-core react react-dom react-router-dom redux react-redux
2.配置webpack.config.js:
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool:"source-map",
entry:{
index:'./src/index.js'
},
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ["react",'env'] }
}
]
},
devServer:{
contentBase:'./dist'
}};
当然，你可以根据自己喜欢来配置。
3.配置package.json（主要是配置运行命令以及打包命令）
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev" :"webpack-dev-server --open", "build":"webpack" },
4.test下创建src根目录,创建index.js,在index.js中写自己的第一个组件
5.在test目录下建立dist文件 ，文件下建立index.html 文件进行测试代码 导入index.js 文件
6.cmd 下输入npm run dev 即可以看到效果了。
整个项目目录如下
7.好了 到这里第一个react组件就算完成了
