React的元素、组件、事件、props传递
通过配置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') );