react第一个组件

今天我们来写第一个组件，通过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组件就算完成了