创建一个项目名：全局安装webpack
cnpm install -g webpack-dev-server
1.cnpm init 初始化
2.cnpm i webpack webpack-dev-server -D
3.cnpm install babel-loader babel-core babel-preset-env -D
之后在项目下创建应有文件：
static文件夹下的index.html，
<div id="toor"></div>
src文件夹，
static静态文件夹，
dist输出文件夹，
webpack.config.js配置文件：
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.jsx', output: { path: __dirname+'/dist', filename: 'js/app.js' }, plugins: [ new HtmlWebpackPlugin({ template: './static/index.html', filename: 'index.html' }) ], module: { loaders: [ {test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/} ] } }创建.babelrc文件
{ "presets":[ "env" ]}package.json文件：
{ "name": "react-pro", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --open" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^3.12.0", "webpack-dev-server": "^2.11.2" }, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2" } } main.js文件 import React from 'react' import ReactDOM from 'react-dom' //引入组件，组件首字母必须大写 // 在react中，区分普通标签和组件标签，根据首字母大写进行判断 import App from './App.jsx' /* // 渲染dom结构 // 参数1：将要渲染在dom上的内容 // 参数2：渲染在哪个dom中 // 参数3：渲染完成的回调（可选） ReactDOM.render( //jsx语法 <p>test</p>, document.querySelector('#root'), function(){ console.log('渲染完成'); } ) */ let message = 'hello react'; let title = 'test'; ReactDOM.render( //jsx语法 // <p>test</p>, // <h1 title={title}>{message}</h1>, <App/>, document.querySelector('#root'), function(){ console.log('渲染完成'); } )React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。转载于:https://www.cnblogs.com/gujie-junlintianxia/p/9473819.html
相关资源：react-webpack4react多页面脚手架