react项目创建与配置模版

技术栈与库：

闲来无事，在家使用以上技术栈与库搭建了一个react通用项目模版，第一次写文章，请大家多多点评！

创建项目

使用以下代码创建项目

npx create-react-app 项目名

引入styled-components
styled-components能够让我们在js文件里编写css代码

npm install --save styled-components

重置浏览器样式
在src目录下新建style.js文件,在文件中引入styled-components

import {createGlobalStyle} from 'styled-components'

并添加以下重置浏览器样式代码

export const GlobalStyled = createGlobalStyle `
    /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`

在App.js文件中引入style.js文件，并作为组建标签在最外层div标签内使用

  return (
      <div>
        <GlobalStyled/>
         //其它code
      </div>
  );

引入redux
redux是 JavaScript 状态容器，提供可预测化的状态管理。

npm install --save redux

推荐引入以下附加包

npm install --save react-redux//能够派发store、props、dispatch等
npm install --save-dev redux-devtools//调试工具

引入redux-thunk中间件
redux-thunk主要的功能就是可以让我们dispatch一个函数，而不只是普通的 Object。

npm install redux-thunk

引入immutable.js
Immutable.JS 旨在以一种高性能的方式提供不可变，以克服 JavaScript 不可变的局限性

npm install immutable

引入redux-immutable
redux-immutable在使用了immutable.js的情况下，如果需要合并reducer，则需引入此库。详细理由
引入react-router
react-router路由管理

npm install react-router-dom

推荐引入react-transition-group
react-transition-group能够使我们创建一些过渡动画

npm install react-transition-group --save

项目配置

创建store

在src文件夹下创建store文件夹，在文件夹内创建index.js和reducer.js文件
在index.js文件中创建store，引入下列代码

import {
    createStore,
    compose,
    applyMiddleware, 
} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer,composeEnhancers(applyMiddleware(thunk)));

export default store;

在reducer.js文件中引入redux-immutable,创建reducer

import {combineReducers} from 'redux-immutable'

export default combineReducers({
    
})

在目录src下创建以下目录结构文件
各文件编写

index.js文件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { DemoText, StoreText } from './style'
import {actionCreators} from './store'

class Demo extends Component {
    render() {
        const { storeHello } = this.props;
        return (
            <DemoText>
                hello,this is a demo page!<br />
                <StoreText>this is from {storeHello}</StoreText>
                <input ref={(input)=>{this.word=input}}></input>
                <button onClick={()=>this.props.changeWord(this.word)}>changeWord</button>
            </DemoText>
        )
    }
}

const mapState = (state) => ({
    storeHello: state.getIn(['demo', 'storeHello'])
})

const mapDispatch = (dispatch) => ({
    changeWord(word){
        if(!word.value) return 
        dispatch(actionCreators.changeStoreWord(word.value))
    }
})
export default connect(mapState, mapDispatch)(Demo)

style.js文件

import styled from 'styled-components'
export const DemoText = styled.div`
    text-align:center;
`
export const StoreText = styled.div`
    color:red;
    font-weight:bold;
`

demo/store/index.js文件

import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'


export {
    reducer,
    actionCreators,
    constants
}

demo/store/reducer.js文件

import {fromJS} from 'immutable'
import * as constants from './constants'
const defaultState=fromJS({
    storeHello:'store Hello'
})

export default (state = defaultState, action) => {
    switch (action.type) {
        case constants.CHANGE_WORD:
            return state.set('storeHello', action.word)
        default:
            return state
    }
}

demo/store/actionCreators.js文件

import * as constants from './constants'

export const changeStoreWord = (value) => (
    {
        type: constants.CHANGE_WORD,
        word: value
    }
)

demo/store/constants.js文件

export const CHANGE_WORD = 'demo/CHANGE_WORD';

完善store/reducer.js文件

import {combineReducers} from 'redux-immutable'
import {
    reducer as demoReducer
}
from '../pages/demo/store'

export default combineReducers({
    demo:demoReducer,
})

App.js文件配置

import React from 'react';
import {GlobalStyled} from './style'
import store from './store'
import {BrowserRouter,Route} from 'react-router-dom'
import {Provider} from 'react-redux'
import Demo from './pages/demo'


function App() {
  return (
    <Provider store={store}>
      <div>
        <GlobalStyled/>
        <BrowserRouter>
          <div>
            <Route path='/' exact component={Demo}></Route>
          </div>
        </BrowserRouter>
      </div>
    </Provider>
  );
}

export default App;

项目运行

npm start

效果：

总结

使用上面的步骤就能够搭建一个通用的大型项目，懒得一步步配置的可以直接克隆github仓库模版，各种库的使用参考demo页面的代码，也可以去各官网了解每个库的作用以及使用。我也将会在后续针对各个库写一些总结。😁

基于react+redux+redux-thunk+immutable等技术的react项目模版搭建

react项目创建与配置模版

技术栈与库：

创建项目

项目配置

总结