react+webpack+es6詳細配置教程
阿新 • • 發佈：2019-02-06
環境搭建
- 建立一個空資料夾, 進入當前資料夾下命令列視窗, git bush here也可以. 輸入命令
npm init, 通通按回車, 最後會輸出一個package.json, 現在開啟該檔案, 接著剛剛生成那些東西, 下面寫上這些devDependencies裡的那些依賴.
{
"name": "reacthome",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" - 將devDependencies新增進package.json之後, 繼續在當前目錄下輸入命令
npm install, 網速不好得等一會不要著急. (如果之前沒有用過webpack的同學, 要額外輸入兩個命令npm install webpack -g和npm install webpack-dev-server -g, 第一個是全域性webpack命令, 第二個是開啟伺服器命令) 在該資料夾下建立檔案
webpack.config.js以及專案結構如下圖
根目錄下的src, src下還有三個資料夾, 分別為img, js, 和less.
根目錄下的home.html(主頁), webpack.config.js(webpack配置檔案)在
webpack.config.js下寫入如下內容
const webpack = require('webpack');
const providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});
//引入jquery, 便於ajax請求
module.exports = {
entry : {
home: './src/js/home.js',//如果檔案, 如果有多個頁面在下面多寫幾項就是了
},
output : {//打包輸出檔案
filename: '[name].js',
publicPath: 'http://localhost:8080/out',
path: __dirname + '/out',
},
module : {
rules: [//打包規則
{test : /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
{
test : /\.js$/,
loader : 'babel-loader',
exclude : /node_modules/,
query : {
presets : [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-react'),
]
}
},
{test: /\.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']}
],
},
devServer: {//伺服器埠地址
port: 8080,
inline: true,//自動重新整理
},
plugins: [//jquery外掛
providePlugin
],
}這裡不對webpack配置做太多介紹, 有興趣的同學可以看看我的這篇部落格
- 在src資料夾下建立home.js檔案
至此環境搭建完畢!!!!!, 下面是react es6基本用法
react es6
home.html主頁上寫上基本框架
//home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>主頁</title>
</head>
<body>
<div id="demo"></div>
<script src="http://localhost:8080/out/home.js"></script>
</body>
</html>home.js上正式使用react
例子1: 基本用法
//home.js
import React from 'react';
import ReactDom from 'react-dom';
class HelloMessage extends React.Component{
render(){
return <h1>Hello {this.props.name}</h1>;
}
}
class Output extends React.Component{
render(){
return (
<div>
<HelloMessage name="John" />
</div>
);
}
}
ReactDOM.render(<Output />,
document.getElementById('demo'));例子2: this.props.children
import React from 'react';
import ReactDom from 'react-dom';
class NotesList extends React.Component {
render() {
return (
<ol>
{
React.Children.map(this.props.children, (child) => {return <li>{child}</li>})
}
</ol>
)
}
}
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('demo')
);例子3: PropTypes和defaultProps 定義元件的屬性型別和預設屬性，統一使用static成員來實現
import React from 'react';
import ReactDom from 'react-dom';
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}; // 注意這裡有分號
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意這裡有分號
render() {
return (
<View />
);
} // 注意這裡既沒有分號也沒有逗號
}例子4: ref屬性 從元件獲取真實 DOM節點
import React from 'react';
import ReactDom from 'react-dom';
class MyComponent extends React.Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.refs.myTextInput.focus()
}
render(){
return(
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('demo')
);注意上面的.bind(this), 如果不使用會出現獲取不到this, 用箭頭函式改寫也可以
例子5: 元件狀態機 this.state 將元件看成是一個狀態機，一開始有一個初始狀態，然後使用者互動，導致狀態變化，從而觸發重新渲染 UI
import React from 'react';
import ReactDom from 'react-dom';
class LikeButton extends React.Component {
constructor(props){
super(props);
this.state = {//state初始化不必使用getInitialState函式, 直接在constructor函式中即可
liked: false,
value: "crlin"
}
}
handleClick(){
this.setState({
liked: !this.state.liked
})
}
handleChange(event){
this.setState({
value: event.target.value
})
}
render(){
let text = this.state.liked ? 'like' : 'haven\'t liked',
value = this.state.value;
return (
<div>
<p onClick={this.handleClick.bind(this)}>You {text} this. Click to toggle.</p>
<input type="text" value={value} onChange={this.handleChange.bind(this)} />
<p>{value}</p>
</div>
);
}
}
ReactDOM.render(
<LikeButton />,
document.getElementById('demo')
);最後附上一張react生命週期便於大家理解
