react learning project

1-2 pre-prepared

Development Environment:

　　Node.js(v8.2+)

　　NPM (v5.2 +)

　　Visual Studio Code(VS Code)

VS Code common plug-ins:

　　Prettier-Code formatter formatting code

　　Reactjs code snippets react quickly generate common modular code

　　When the Auto Rename Tag label related rename tag corresponding to the respective change

Mainly dependent library version (to be higher than the version):

　　React: ^16.4.1

　　Redux: ^4.0.0

　　React Redux: ^5.0.7

　　React Router: ^4.3.1

2-1 Creating the project structure

React scaffolding project: create-react-app

　　Zero Configuration Creating React application (no need to configure babel and webpac etc.)

　　Building: JS, CSS, images (resource package building)

　　Development Efficiency: automatically refresh, forwarding agents, such as color measurement unit　

Using the create-react-app

　　New Project: npx create-react-app [project name] ( npm> = 5.2 )

　　You can use the code in a terminal at the command panel installation code can quickly open the project in vs code

package.json

{
  "name": "dz-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "3.1.2"  //其他的相关依赖都封装到了react-script中，webpack。babel等
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
  },originally ejected package configuration, will emerge in the project wepack.cofig//
    "EJECT": "REACT-scripts EJECT"  Test//

 Use Mock Data

Way: the proxy server to mock (mock by turning on a server, the mock data onto the server, this request is forwarded to the front end server)

　　npm install -g serve installation services

　　In the configuration in package.json

　　“”proxy“: {

　　　　"/api": {

　　　　　　"target": "http://localhost:5000"

　　　　}

　　　}　　

Second way: the mock data directly into the project public folder (public folder in a new mock> data.json file) via localhost: 3000 / mock / data.json will be able to access

　The reason is: static resource public folders will not be built directly into the project used after packing