React engineering practice: front end scaffold based on react, Redux and react router

Time:2021-9-2

Project address:https://github.com/YutHelloWo…

be based onReactRedux[email protected]webpackandreactstrapFront end scaffold.

catalogue

preface

If you are a real beginner, this project can be a good tutorial. If you are planning to create a large spa using react technology stack, this project is just right for you. If this project is helpful to you, please do not hesitate to give star or watch support.

characteristic

data stream

React engineering practice: front end scaffold based on react, Redux and react router

environment

  • node ^5.0.0
  • yarn ^0.23.0 or npm ^3.0.0

start

After confirming that your development environment is aboveEnvironment configuration, you can start creating your application based on this scaffold:

First, clone the project.

$ git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name>
$ cd <my-project-name>

Then, the installation project depends on. Recommended usecnpmorYarnThis can save you the time required to install dependencies and avoid some inexplicable errors.

$ yarn  # Install project dependencies (or `npm install` or `cnpm install`)

Finally, use the commandyarn startperhapsnpm startTo start the application.

$ yarn start  # Start the development server (or `npm start`)

React engineering practice: front end scaffold based on react, Redux and react router

Here are some other processing commands:

yarn <script>   describe
start           Start and hot updatehttp://localhost:3000
build           Build to directory. / dist
test             Unit testing via karma
test:watch       When the code changes, re execute the unit test through the monitoring mode
lint             Code check
lint:fix         Code check and repair

engineering structure

React engineering practice: front end scaffold based on react, Redux and react router

.
├── build                     #  Packaging configuration
├── public                    #  Public static resources
├── server                    #  Express Service
│     └── main.js               #  Service entry JS
├── src                       #  Application source file
│     ├── index.html            #  html template 
│     ├── main.js               #  Program startup and rendering
│     ├── normalize.js          #  Browser compatibility and gasket
│     ├── components            #  Global reusable component
│     ├── layouts               #  Home page layout
│     │     └── PageLayout        #  Navigation
│     ├── routes                #  Dynamic routing
│     │     ├── index.js          #  Main route
│     │     ├── Home              #  Sub route home
│     │     │     ├── index.js      #  Route definition and asynchronous loading
│     │     │     ├── assets        #  Static files for components
│     │     │     ├── components    #  Display components
│     │     │     └── routes **     #  Sub route
│     │     └── Counter           #  Sub route couner
│     │         ├── index.js      #  Route definition
│     │         ├── container     #  Container assembly
│   │       ├── modules      # module(reducers/constants/actions)
│     │         └── routes **     #  Sub route
│     ├── store                 #  Redux related modules
│     │     ├── createStore.js    #  Create and use Redux store
│     │     └── reducers.js       #  Registration and injection of reducer
│     └── styles                #  style sheet
└── tests                     #  unit testing 

Development and debugging

In the development environment, web dev middleware and web hot middleware are used. Code real-time hot update.

Redux DevTools

It is highly recommended to install the Google browser plug-inRedux DevTools Chrome ExtensionTo view the status of the entire application.
React engineering practice: front end scaffold based on react, Redux and react router

route

We useReact-routerofplainRouteTo define the logical unit of the application.

unit testing

Add a unit test, you just need to./testsCreate in.spec.jsFile.

Static deployment

If you passnginxWeb service to start the application, please ensure that the route points to~/dist/index.html, and then let the react router handle the rest, for more referenceThis document。 Express is used in scaffolding to extend service and agent APIs.

Related documents

Knowledge map

thank

Welcome to this projectPRperhapsissues