webpack构建react项目----实战篇2

上篇提到了webpack搭建react项目的整个步骤，但是写法主要是react15版的写法，这篇主要是用react16版的写法来配置，主要是和低版的形成一个对比。

从目录上来看，配置文件什么的都基本上差不多，步骤见上篇。

最大的不同就是组件里面app.js的写法的差异，模块的接收和暴露，一个是es5写法，一个是es6的写法。另外就是react高低版本对组件的声明方式的不同。

//app.js高版
import React from 'react';
import imgs from '../img/a.jpg'
class App extends React.Component{
	constructor(props){
		super(props)
	}
	tap(){
		console.log('hello wolrd')
	}
	
	render(){
		return(
			<div>
				<h1 className="tit">hello</h1>
				<button onClick={this.tap}>事件</button>
				<img src={imgs} />
				<h1><span className="iconfont icon-home"></span></h1>
			</div>
		)
	}
}


export default App;

//app.js低版react
var React = require("react");
import imgs from "../img/a.jpg" 

var Demo = React.createClass({
	render(){
		return(
			<div>
				<h1>hello</h1>
				<i className="iconfont icon-home"></i>
				<img src={imgs}/>
			</div>
		)
	}
})	
module.exports = Demo

//es5
/* 模块的接收和暴露*/
var React = require('react');
module.exports = App
/* 组件的声明*/
var Demo = React.createClass({})


//es6
/* 模块的接收和暴露*/
import React from 'react';
export default App;
/* 组件的声明*/
class App extends React.Component{}

其他的基本是没啥区别的。