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编译即可 原文链接：https://www.f2er.com/react/303888.html