通过配置webpack-dev-server启动一个webserver，自动编译，自动刷新浏览器的功能，我们开启React基础速过
接上一篇：构建React开发环境
使用webpack-dev-server
按照上篇文章构建好React开发环境后，我们发现每次写完代码还需要手动编译，并且需要自己启动一个webserver才可以在浏览器预览效果。
如果你不想这样每次改完代码都要手动编译，而且自己启动webserver，那么就要用到webpack-dev-server这个玩意。
注意，这玩意就是开发时用用的，不要用于生产环境！
这玩意还有一个好处，是在改完代码后，自动刷新浏览器，下面动手加上这货吧
使用yarn安装webpack-dev-server 到开发依赖中
yarn add -D webpack-dev-server添加webpack配置，配置devServer
vi webpack.config.js
'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
mode: 'development',
entry: {
app: './src/js/index'
},
output: {
filename: "[name].js",
path: path.join(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index.html'
})
],
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
// 过滤
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
module.exports = config;在package.json中添加一个scripts
"dev": "webpack-dev-server"启动webpack-dev-server
yarn run dev之后就可以自动编译并启动一个webserver，用浏览器访问http://localhost:9000
React的元素
React的元素必须要有一个根元素包裹起来，如：
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
let me = <h1>编程故事</h1>
ReactDOM.render(
me, // 使用元素
document.getElementById('root')
);元素里面可以包含js的表达式，表达式使用大括号{}包起来
let me = <h1>编程故事{alert('编程故事')}</h1>React的组件
React的组件使用ES2015中的Class方式定义
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
// 组件可以外部定义然后在使用的地方在引入
class Me extends React.Component {
render() {
return <h1>dongjun{(function(){alert('编程故事')})()}</h1>
}
}
ReactDOM.render(
<Me />,
document.getElementById('root')
);React组件的props传递
父组件给子组件传递数据，是通过给子组件上定义属性，在子组件中通过this.props获取
传递多个属性：
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
render() {
return <h1>{this.props.site} - {this.props.sologen} - {this.props.url}</h1>
}
}
ReactDOM.render(
<Me site="编程故事" sologen="我的故事,也许也是你的故事" url="https://www.mi360.cn" />,
document.getElementById('root')
);也可以传递一个对象给子组件的属性，在子组件也要通过对象的方式去获取
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
render() {
return <h1>{this.props.site.name} - {this.props.site.sologen} - {this.props.site.url}</h1>
}
}
const map = {
name: '编程故事',
sologen: '我的故事,也许也是你的故事',
url: 'https://www.mi360.cn'
};
ReactDOM.render(
<Me site={ map }/>,
document.getElementById('root')
);还可以使用ES2015中的解构赋值
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
render() {
return <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
}
}
const map = {
name: '编程故事',
sologen: '我的故事,也许也是你的故事',
url: 'https://www.mi360.cn'
};
ReactDOM.render(
<Me { ...map }/>,
document.getElementById('root')
);React的事件
在组件中定义事件处理方法，在组件的render()方法中定义事件监听
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
showMe() {
alert('编程故事');
}
render() {
return <div>
<h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
<input onClick={this.showMe} type="button" value="按钮"/>
</div>
}
}
const map = {
name: '编程故事',
sologen: '我的故事,也许也是你的故事',
url: 'https://www.mi360.cn'
};
ReactDOM.render(
<Me { ...map }/>,
document.getElementById('root')
);还可以使用箭头函数直接在事件监听中处理
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
showMe() {
alert('编程故事');
}
render() {
return <div>
<h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
<input onClick={() => {
alert('编程故事')
}} type="button" value="按钮"/>
</div>
}
}
const map = {
name: '编程故事',
sologen: '我的故事,也许也是你的故事',
url: 'https://www.mi360.cn'
};
ReactDOM.render(
<Me { ...map }/>,
document.getElementById('root')
);父组件传递数组给子组件遍历
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
class Me extends React.Component {
render() {
return <div>
{this.props.data.map((item) => {
return <h1 onClick={() => {
alert(item.name)
}
}>{item.name} - {item.sologen} - {item.url}</h1>
})}
</div>
}
}
const map = [{
name: '编程故事',
sologen: '我的故事,也许也是你的故事',
url: 'https://www.mi360.cn'
},{
name: '246哈',
sologen: '开心很简单',
url: 'https://www.246ha.com'
}];
ReactDOM.render(
<Me data={ map } />,
document.getElementById('root')
);