上篇提到了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{}
其他的基本是没啥区别的。