基于creat-react-app项目

（本文为学习记录，如有错误感谢指出，高手勿喷）

首先附上目录结构

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

至此基本的架子就搭好了