使用webpack搭建React JS簡單的demo
webpack:http://webpack.github.io/
1.安裝react和react-dom:
npm install react react-dom
2.安裝babel,babel-loader
npm install babel-core@5 babel-loader3.安裝webpack
npm install webpack4.配置package.json
使用命令npm init 設置參數。
如圖所示：
得到package.json
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"babel-core": "^5.8.38",
"react-dom": "^15.5.4",
"react": "^15.5.4"
},
"devDependencies": {},
"scripts": {
"test": "test",
"build": "webpack",
"dev": "webpack-dev-server --port 8080 --inline --content-base ./build"
},
"author": "Martin.Wu",
"license": "ISC"
}
5.配置webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/index.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['babel-loader'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'} ,
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}
]
}
};6.編寫app
index.js
var React = require('react');
var ReactDOM = require("react-dom");
var MartinTag = require('./martin.jsx');
martin.jsx
import ReactDOM from "react-dom" ;
import React from "react" ;
class MartinTag extends React.Component{
render() {
console.log("render ---- run") ;
return <h1>This is <span onClick={this.handleClick} style={this.state}>React</span> Component!!!</h1>
}
handleClick (){
this.setState({color:"green"}) ;
}
constructor(){
super();
this.state = {color:"red"};
this.handleClick = this.handleClick.bind(this);
}
}
ReactDOM.render(
<MartinTag name="Martin"/>,
document.getElementById('example')
);
module.exports = MartinTag;7.構建或運行：
構建：npm run bulid
運行：npm run dev
以上兩個命令在package.json文件夾已經配置了script的選項
運行完了之後，會在build文件夾下看到bundle.js文件
8.構建html項目，
新增index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>npm run dev運行整個項目，在瀏覽器看到：
點擊紅色文字後：
