（本文為學(xué)習(xí)記錄，如有錯(cuò)誤感謝指出，高手勿噴）

首先附上目錄結(jié)構(gòu)

image

安裝腳手架

$ npm i creat-react-app yarn -g  #全局安裝creat-react-app和yarn

初始化項(xiàng)目

$ create-react-app project-name    #初始化react項(xiàng)目，項(xiàng)目名為project-name

$ cd project-name  #進(jìn)入項(xiàng)目目錄

$ yarn start   #啟動(dòng)項(xiàng)目

項(xiàng)目初始化成功后，并不能完全滿足項(xiàng)目級(jí)別的開(kāi)發(fā)需求，需要我們手動(dòng)添加個(gè)性化配置

暴露webpack配置

$ yarn run eject  #執(zhí)行該命令后，會(huì)暴露出creat-react-app項(xiàng)目的全部配置，從而進(jìn)行自定義配置

執(zhí)行完成后項(xiàng)目下會(huì)多出一個(gè)config和script文件夾（同時(shí)package.json中也會(huì)漏出全部的依賴和eslint以及babel的配置），webpack相關(guān)的配置都可以在這里修改

首先添加一些路徑別名

在config/webpack.config.js中搜索alias,然后添加一些常用的別名配置，例如：

config/webpack.config.js

alias: {
    'react-native': 'react-native-web',
    '@pages':path.resolve(__dirname,'../src/pages'),   //頁(yè)面組件目錄
    '@assets':path.resolve(__dirname,'../src/assets'),    //靜態(tài)資源=目錄
}

添加路由

路由使用方法

$ yarn add react-router-dom  #安裝路由依賴

安裝成功后在src目錄下創(chuàng)建 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}/> */}
                {/* 匹配不到路由跳轉(zhuǎn)路由 */}
                <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

詳細(xì)用法

首先安裝redux相關(guān)依賴

$ yarn add redux react-redux redux-chunk

在src目錄下新建一個(gè)store目錄，在該目錄下新建兩個(gè)文件index.js、reducer.js,然后在每一個(gè)需要使用redux的page組件目錄下新建一個(gè)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調(diào)試工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose

const enhancer = composeEnhancers(
    //應(yīng)用react-chunk 中間件
    applyMiddleware(thunkMiddleware)
)
//創(chuàng)建store
const store = createStore(reducer, enhancer)

export default store

至此基本的架子就搭好了