-
npm install -g create-react-app
-
create-react-app '项目名'
-
npm install
-
npm start
- npm run eject
-
不生成map文件,prod文件57行注释掉
-
打包生成打包报告
-
npm install webpack-bundle-analyzer --save-dev
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins:[
...
new BundleAnalyzerPlugin()
]
"analyze": "source-map-explorer dist/static/js/main.*"
-
npm install --save react-router-dom
-
新建router.js,也是一个react组件
import React from 'react'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import Home from '../page/home/Home.js'
import Login from '../page/login/Login.js'
import Register from '../page/register/Register.js'
export default ()=>(
<Router>
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/register" component={Register}></Route>
</Switch>
</Router>
)
-
1.安装babel-plugin-syntax-dynamic-import
在.babelrc文件的plungins中加上"syntax-dynamic-import"
-
2.安装 react-loadable
import Loadable from 'react-loadable';
const MyLoadingComponent = ({ isLoading, error }) => {
// Handle the loading state
if (isLoading) {
return <div>Loading...</div>;
}
// Handle the error state
else if (error) {
return <div>Sorry, there was a problem loading the page.</div>;
}
else {
return null;
}
};
const Home = Loadable({
loader: () => import('../page/home/Home.js'),
loading: MyLoadingComponent
});
6.redux + react-redux使用redux中文文档
解决react组件间传值,并且要状态动态更新麻烦的问题。redux就是个中央仓库,将数据存在了一个地方,而且只能通过定义了的方法来更改,保证了数据的唯一性和稳定性
npm install redux --save
- 如果只用redux的话,那么状态更改了,只能通过subscribe的回调中得到新的状态,那么还是一样繁琐,所以一般与react-redux一起使用
npm install react-redux --save
- react-redux中的Provider组件,redux生成的store传入就能传递到每个组件中,react-redux的Provider就是如下实现的
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}
// /store/counter.js
const counter = (state, action) => {
if (typeof state === 'undefined') {
return 0
}
switch (action.type) {
case 'add':
return state + 1
case 'reduce':
return state - 1
case 'set':
return action.value
default:
return state
}
}
export default counter;
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counter from './store/counter.js'
const store = createStore(counter)
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker();
- 使用react-redux的connect,将Provider的store中的state和需要的dispatch连接到现在的组件,那么在组件中就能直接使用this.prop访问到属性和方法
import React, { Component } from 'react'
import './Detail.css'
import { connect } from 'react-redux'
class Detail extends Component{
constructor(props){
super(props)
this.state = {
styleObj: { background: '#00bcd4' }
}
}
render(){
return(
<div className="detail" style={this.state.styleObj}>
<h4>{this.props.myInfo.name}</h4>
<p onClick={() => this.props.add()}>设置名字</p>
</div>
)
}
componentWillMount(){
console.log(this.props.counter)
}
}
const mapStateToProps = state => {
return {
counter: state
}
}
const mapDispatchToProps = dispatch => {
return{
add() {
dispatch({ type: 'add' })
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)