React project creation and configuration template

Technology Stack and Library:

  • react
  • redux
  • react-redux
  • redux-thunk
  • styled-components
  • Immutable.JS
  • react-router
  • redux-immutable

React Common project template: React Common project template: React Common project template: React Common project template

Create a project

  1. Create the project using the following code
NPX create-react-app Project nameCopy the code
  1. The introduction ofstyled-components

    styled-componentsAllows us to write CSS code in JS files
npm install --save styled-components
Copy the code
  1. Restyling the browser

    在srcCreating a Directorystyle.jsFile, import in filestyled-components
import {createGlobalStyle} from 'styled-components'
Copy the code

And add the following reset browser style code

export const GlobalStyled = createGlobalStyle V2.0 ` / * http://meyerweb.com/eric/tools/css/reset/ | 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; } `
Copy the code

Introduce the style.js file in the app.js file and use it as a build tag inside the outermost div tag

  return (
      <div>
        <GlobalStyled/>/ / other code</div>
  );
Copy the code
  1. The introduction ofredux

    reduxIs a JavaScript state container that provides predictable state management.
npm install --save redux
Copy the code

The following additional packages are recommended

npm install --save react-redux// Can distribute store, props, dispatch, etc
npm install --save-dev redux-devtools// Debug tools
Copy the code
  1. The introduction ofredux-thunkThe middleware

    redux-thunkThe main feature is that it allows us to dispatch a function instead of just a plain Object.
npm install redux-thunk
Copy the code
  1. The introduction ofimmutable.js

    Immutable.JSDesigned to provide immutability in a high-performance way to overcome the limitations of JavaScript immutability
npm install immutable
Copy the code

  1. Redux-immutable Redux-immutable If immutable is used, this library needs to be imported if the reducer needs to be merged. Detailed reasons

  2. React-router React-router route management is introduced

npm install react-router-dom
Copy the code
  1. Recommend to introducereact-transition-group

    react-transition-groupAllows us to create some transition animations
npm install react-transition-group --save
Copy the code

Project configuration

  1. createstore
  • insrcCreate a folderstoreFolder, created within the folderindex.jsandreducer.jsfile
  • inindex.jsCreate in filestore, introduce the following code
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;
Copy the code
  • inreducer.jsFile importredux-immutableTo createreducer
import {combineReducers} from 'redux-immutable'

export default combineReducers({
    
})
Copy the code

  1. Create the following directory structure files under directory SRC

  2. Preparation of various documents

  • index.jsfile
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)
Copy the code
  • style.jsfile
import styled from 'styled-components'
export const DemoText = styled.div` text-align:center; `
export const StoreText = styled.div` color:red; font-weight:bold; `
Copy the code
  • demo/store/index.jsfile
import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'


export {
    reducer,
    actionCreators,
    constants
}
Copy the code
  • demo/store/reducer.jsfile
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
    }
}
Copy the code
  • demo/store/actionCreators.jsfile
import * as constants from './constants'

export const changeStoreWord = (value) = >({type: constants.CHANGE_WORD,
        word: value
    }
)
Copy the code
  • demo/store/constants.jsfile
export const CHANGE_WORD = 'demo/CHANGE_WORD';
Copy the code
  1. perfectstore/reducer.jsfile
import {combineReducers} from 'redux-immutable'
import {
    reducer as demoReducer
}
from '.. /pages/demo/store'

export default combineReducers({
    demo:demoReducer,
})
Copy the code
  1. App.jsConfiguration file
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;

Copy the code
  1. Project running
npm start
Copy the code

Effect:

conclusion

Using the above steps will be able to build a general large project, lazy step by step configuration can directly clone github repository template, the use of various libraries refer to the demo page code, you can also go to the official website to understand the role of each library and use. I will also write a summary of each library in the future. 😁