webpack2+React 实例demo
生活随笔
收集整理的這篇文章主要介紹了
webpack2+React 实例demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.目錄結構
源文件在src目錄下，打包后的文件在dist目錄下。
2.webpack.config.js
說明：
1.涉及到的插件需要npm install安裝；
2.html-webpack-plugin創建服務于 webpack bundle 的 HTML 文件；
3.clean-webpack-plugin清除dist目錄重復的文件；
4.extract-text-webpack-plugin分離css文件。
3.postcss.config.js(Autoprefixer)
module.exports = {plugins: {'autoprefixer': {browsers: 'last 5 version'}} }// 兼容最新的5個瀏覽器版本4.新建.babelrc
{"presets": ['es2015','react','stage-3'] }5.index.html
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>React Project</title></head><body><div id="content"></div><script src="app.bundle.js"></script></body> </html>6.package.json
npm install 或 yarn -> 安裝模塊，npm run build -> 打包，npm start -> 啟動localhost:8181
{"name": "reactproject","version": "1.0.0","description": "","main": "index.js","dependencies": {"jquery": "^3.1.1","react": "^15.3.2"},"devDependencies": {"autoprefixer": "^7.1.2","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-plugin-syntax-async-functions": "^6.13.0","babel-plugin-transform-async-to-generator": "^6.16.0","babel-preset-es2015": "^6.14.0","babel-preset-react": "^6.11.1","babel-preset-stage-3": "^6.17.0","bootstrap": "^4.0.0-alpha.2","clean-webpack-plugin": "^0.1.16","css-loader": "^0.25.0","extract-text-webpack-plugin": "^3.0.0-rc.2","file-loader": "^0.9.0","html-webpack-plugin": "^2.29.0", "jshint": "^2.9.3","jshint-loader": "^0.8.3","json-loader": "^0.5.4","less": "^2.7.1","less-loader": "^2.2.3","moment": "^2.15.1","node-sass": "^3.10.0","postcss-loader": "^2.0.6", "react-bootstrap": "^0.30.5","react-dom": "^15.3.2","sass-loader": "^4.0.2","style-loader": "^0.13.1","url-loader": "^0.5.7","webpack": "^3.3.0","webpack-dev-server": "^2.5.1"},"scripts": {"start": "webpack-dev-server --hot --inline --progress --colors --content-base .","build": "webpack --progress --colors"},"keywords": ["reactcode"],"author": "xhh","license": "ISC" }7.main.js:入口文件
import React from 'react' import { render } from 'react-dom'; import $ from 'jquery';import Demo1 from './js/demo1.js'; // import Demo2 from './js/demo2.js';render(<Demo1 title="這是提示" />, $('#content')[0]); // render(<Demo2 myName="園中橋" sex="female"/>, $('#content')[0]);8.templateIndex.html
打包后的模板index文件，插件html-webpack-plugin的template指定的目錄。
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Template Index html</title></head><body><div id="content"></div></body> </html>9.demo
demo1.js
import React from 'react'; import '../css/demo1.css';const arr = [{name:'name1',tel:'12343456783'},{name:'name2',tel:'12343456784'},{name:'name3',tel:'12343456785'} ];export default class Demo1 extends React.Component {constructor(props) {super(props);this.state = {content: true,value: 'inputText'}; }handleClick(){this.setState({content: !this.state.content})// this.refs.myInput.focus();}handleChange(event) {this.setState({value: event.target.value});}renderArr() {return arr.map((item,index)=>{return <li key={index}>name:{item.name},tel:{item.tel}</li>})}render(){let btnStyle = {border: '1px solid #ccc',background:'#fff',color: '#a106ce'}return (/* 注釋 */<div><button style={btnStyle} className="btn" type="button" onClick={()=>this.handleClick()}>change state</button><br/><p title={this.props.title} style={{ color:'#A349A4' }}>Hello { this.props.textCont}!</p><p>{this.state.content ? 'initial value' : 'later value'}</p>{ /* 標簽里面的注釋外面要用花括號 */ }<input type="text" value={this.state.value} ref="myInput" onChange={this.handleChange.bind(this)} /> <h4>{this.state.value}</h4><DemoChild><p>lalala</p></DemoChild><ul>{ this.renderArr() }</ul></div>)} }Demo1.propTypes = {title: React.PropTypes.string.isRequired } Demo1.defaultProps = {textCont: 'React' }class DemoChild extends React.Component {constructor(props) {super(props);}render(){return (<div>我是子組件{this.props.children}</div>)} }demo1.css
ul {list-style: none;padding: 0;margin:0;display: flex; } .btn:focus {outline: none; }demo2.js:父子組件生命周期
import React, { Component, PropTypes } from 'react'; import '../css/demo2.css';export default class Demo2 extends Component {constructor(props){super(props);this.state = {stateName: this.props.myName + ',你好',count: 0,}console.log('init-constructor');}static get defaultProps() {return {myName: "xhh",age: 25}}doUpdateCount(){this.setState({count: this.state.count+1})}componentWillMount() {console.log('componentWillMount');}componentDidMount() {console.log('componentDidMount')}componentWillReceiveProps(nextProps){console.log('componentWillReceiveProps')}shouldComponentUpdate(nextProps, nextState){console.log('shouldComponentUpdate');// return nextProps.id !== this.props.id;if(nextState.count > 10) return false;return true;}componentWillUpdate(nextProps,nextState){console.log('componentWillUpdate');}componentDidUpdate(prevProps, prevState){console.log('componentDidUpdate');}componentWillUnmount(){console.log('componentWillUnmount');}render(){console.log('render');return (<div><p className="colorStyle">姓名：{this.props.myName}</p><p>問候：{this.state.stateName}</p><p>年齡：{this.props.age}</p><p>性別：{this.props.sex}</p><p>父元素計數是:{this.state.count}</p><button onClick={ this.doUpdateCount.bind(this) } style={{ padding: 5,backgroundColor: '#ccc' }}>點我開始計數</button><SubMyPropType count1={this.state.count} /></div>)} }Demo2.propTypes = {myName: PropTypes.string,age: PropTypes.number,sex: PropTypes.string.isRequired }class SubMyPropType extends Component {componentWillMount() {console.log('subMyPropType-componentWillMount');}componentDidMount() {console.log('subMyPropType-componentDidMount')}componentWillReceiveProps(nextProps){console.log('subMyPropType-componentWillReceiveProps')}shouldComponentUpdate(nextProps, nextState){console.log('subMyPropType-shouldComponentUpdate');if(nextProps.count1 > 5) return false;return true;}componentWillUpdate(nextProps, nextState){console.log('subMyPropType-componentWillUpdate');}componentDidUpdate(prevProps, prevState){console.log('subMyPropType-componentDidUpdate');}componentWillUnmount(){console.log('subMyPropType-componentWillUnmount');}render(){console.log('subMyPropType-render');return(<p>子元素計數是:{this.props.count1}</p>) } }demo2.css
.colorStyle {color: #0f0; }總結
以上是生活随笔為你收集整理的webpack2+React 实例demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： REST技术第四步 多个參数注解问题
- 下一篇： sql like 多条件