react入门及配合webpack创建项目
1、选择合适的目录下创建一个项目文件夹,例：在桌面创建 "react_project"
cd desktop
mkdir react_project
2、进入了项目中
cd react_project
3、创建一个文件夹 html，然后在这个文件下创建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="../dist/demo01.js"></script>
</body>
</html>
4、然后再另外创建一个文件夹 src，再在这个文件夹下创建一个demo01的文件夹，在demo01这个文件夹下再创建demo01.js
import React, {Component} from 'react' //将React和Component从react这个文件中导出来
import {render} from 'react-dom' //将render这个函数从render-dom中导出来
render(
<h1>第一个react</h1>,
document.querySelector('#box')
)
5、使用命令安装所需模块
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 react react-dom webpack webpack-dev-server --save
6、再安装一下style-loader和css-loader
cnpm install style-loader css-loader
7、在根目录下创建一个webpack.config.js文件，再进行配置
'use strict';
const path = require('path')
module.exports = {
//进口文件
entry: {
demo01: './src/demo01/demo01.js'
},
//出口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test:/\.js$/,
exclude: /node_moduldes/,
loader: 'babel-loader',
options:{
presets: ['es2015','react','stage-2']
}
},
{
test:/\.css$/,
exclude:/node_modules/,
use:['style-loader','css-loader']
}
]
},
resolve: {
},
devtool: 'source-map',
plugins: []
}
8、使用终端进行编译
webpack
