（本文为学习记录，如有错误感谢指出，高手勿喷）
首先附上目录结构
image
安装脚手架
$ npm i creat-react-app yarn -g #全局安装creat-react-app和yarn
初始化项目
$ create-react-app project-name #初始化react项目，项目名为project-name
$ cd project-name #进入项目目录
$ yarn start #启动项目
项目初始化成功后，并不能完全满足项目级别的开发需求，需要我们手动添加个性化配置
暴露webpack配置
$ yarn run eject #执行该命令后，会暴露出creat-react-app项目的全部配置，从而进行自定义配置
执行完成后项目下会多出一个config和script文件夹（同时package.json中也会漏出全部的依赖和eslint以及babel的配置），webpack相关的配置都可以在这里修改
首先添加一些路径别名
在config/webpack.config.js中搜索alias,然后添加一些常用的别名配置，例如：
config/webpack.config.js
alias: {
'react-native': 'react-native-web',
'@pages':path.resolve(__dirname,'../src/pages'), //页面组件目录
'@assets':path.resolve(__dirname,'../src/assets'), //静态资源=目录
}
添加路由
$ yarn add react-router-dom #安装路由依赖
安装成功后在src目录下创建 router/index.js
src/router/index.js
import React, { Fragment } from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Home from '@pages/home'
import ArtList from '@pages/artList'
const Routes = () => (
<BrowserRouter>
<Fragment>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/artlist" component={ArtList}/>
{/* 匹配不到路由显示组件 */}
{/* <Route component={PageLoad}/> */}
{/* 匹配不到路由跳转路由 */}
<Redirect to='/'></Redirect>
</Switch>
</Fragment>
</BrowserRouter>
);
export default Routes
修改app.js文件
src/app.js
import React, { Component } from 'react'
import Route from '../routes'
import './App.scss'
class App extends Component {
render() {
return (
<div>
<Route/>
</div>
);
}
}
export default App
添加redux
首先安装redux相关依赖
$ yarn add redux react-redux redux-chunk
在src目录下新建一个store目录，在该目录下新建两个文件index.js、reducer.js,然后在每一个需要使用redux的page组件目录下新建一个store.js,以home为例
src/pages/home/store.js
const stateDefault = {
text: 'hello',
atext: 'hello a',
}
//reducer
export function home (state = stateDefault, action) {
switch (action.type) {
case 'ADD_TODO':
return {...state,text:action.text}
case 'ADD_TODO_ASYNC':
return {...state,atext:action.text}
default:
return state
}
}
//action
//同步action
export const action = {
todoapp (text) {
return {
type: 'ADD_TODO',
text
}
},
//异步action
asyncTodoApp (text) {
return (dispatch,getState) => {
console.log(getState())
setTimeout(()=>{
dispatch({
type: 'ADD_TODO_ASYNC',
text
})
},100)
}
}
}
src/pages/index.js
import React, { Component } from 'react'
import { action } from './store'
import './index.scss'
class Home extends Component {
constructor(props){
super(props)
this.state = {
msg:'hello world'
}
}
test(text){
this.props.todoapp(text)
}
render(){
return (
<div>
<div onClick={()=>this.test('222')} type="primary">Button</div>
{this.props.text}
</div>
)
}
}
const mapStateToProps = state => {
return state.home
}
const mapDispatchToProps = dispatch => {
return bindActionCreators(action,dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home)
src/store/reducer.js
import { combineReducers } from 'redux'
import { home } from '../pages/home/store'
export default combineReducers({home})
src/store/index.js
import { createStore, compose, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './reducer'
//搭配chrome 的react调试工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
const enhancer = composeEnhancers(
//应用react-chunk 中间件
applyMiddleware(thunkMiddleware)
)
//创建store
const store = createStore(reducer, enhancer)
export default store
至此基本的架子就搭好了
