1.库安装包, npm install
{
"name": "react-es6-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
2. webpack.config.js
var webpack = require("webpack");
module.exports = {
entry : __dirname + "/main.js",
output : {
path : __dirname + "/out",
filename : "index.js"
},
module:{
loaders :[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:
{
presets:['react','es2015']
}
}
]
},
externals: {
'jquery': 'window.$',
'react': 'React',
'react-dom': 'ReactDOM'
},
}
externals的目的不想打react的库一起打到index.js.
presets可以方便的是用es6的各种特性
3.组件
import React from 'react';
import ReactDOM from 'react-dom';
class AppComponent extends React.Component {
render() {
var list = [];
for(var i = 0; i < 100000; i++){
var ele = <h1>{i+1}:{this.props.data}</h1>;
list.push(ele)
}
return <div>{list}</div>;
}
}
window.renderList = function(list){
ReactDOM.render(
<AppComponent data={list}/>,
document.getElementById('root')
);
};
4.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
</head>
<body>
<div id="root" style="width: 400px;min-height:200px;float: left;">
</div>
<div style="float: left;">
<button id="addBtn">添加</button>
<button id="updateBtn">更新</button>
</div>
<script src="out/index.js"></script>
<script>
document.getElementById("addBtn").onclick = function(){
renderList("hello react")
};
document.getElementById("updateBtn").onclick = function(){
renderList("hello world")
};
</script>
</body>
</html>
最后webpack编译即可