一,环境与编译器
windows + webstorm
二,参考资源
1,react搭建步骤
https://segmentfault.com/a/1190000017945643
2,完整react后台管理项目(全家桶+ant)ps:新手入手较难,但是项目很完整,值得学习
https://github.com/duxianwei520/react.git
三,开始 webpack + react
1,创建文件夹react-demo
2,执行 npm init
按照步骤填写完毕后文件夹会出现package.json
3,npm install webpack webpack-cli webpack-dev-server --save-dev
创建webpack文件夹,在文件夹下创建webpack.config.js (ps: 创建文件夹的原因是因为可以还可以创建不同环境下的不通webpack文件,比如 生产环境,测试环境,打包环境等)
webpack-dev-server: 作为dev启动的依赖项
npm install html-webpack-plugin
html-webpack-plugin: 将js代码通过<script>标签注入到html中;
webpack.config.js 文件内容是:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app.js', // 入口文件
output: {
path: path.resolve('dist'), // 定义输出目录
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/, // 匹配.js文件
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './index.html',
filename: path.resolve( 'dist/index.html')
})
]
};
tips: 如果想具体学习,请移步到: https://www.webpackjs.com/guides/getting-started/#基本安装
要根据自己的具体的文件路径来适应文件中的文件名称与路径哦~
4,执行 npm intall react react-dom
5, 在目录下创建app.js和index.html
src下创建App目录,App下创建index.js
app.js里的文件内容:
import React from 'react';
import App from './src/views/App';
import ReactDom from 'react-dom';
ReactDom.render(<App />,
document.getElementById('root'));
index.html 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minim-scale=1, user-scalable=no">
<title>hello world</title>
</head>
<body>