Configure the project environment using the scaffolding tool create-react-app

  • Ensure that the Node is installed before using it

The installation

npm install -g create-react-app

Creating the React application

create-react-app  app-name-demo

In this case, I have changed the default node environment variable on the computer, so using this command outside of a specific location may not present the problem. In this case, I can add NPX in front of the problem

NPX: is a wrapper run tool that comes with NPM

  • Main dependencies:React, react-dom, react-scripts
  • Generate directory structure

  • Public is an open folder. Files stored in this folder will not be processed by Webpack and will be copied directly. Files stored in SRC will be compiled by WebPack

  • .gitignore is a gitignore list file. If you write files that you do not want to be managed by Git, Git will ignore them

  • Package-lock. json is a file generated during NPM install to record the specific source and version number of each NPM package actually installed in the current state. In this file, all packages that are dependent on the current environment are saved

  • The package.json file can only lock the large version, that is, the first version number, and cannot lock the smaller version. The main library packages that the React project relies on are stored here

Command:

  • NPM start, run the project
  • NPM run build, package the project

React Project Construction

  • So let’s clear out public SRC
  • Create index.html in public with a div with an ID attribute
  • Create index.js in SRC,

App.jsx

So we can get Hello World via NPM start

  • The react component API is called setState, which is used to modify component states. Component state, which is essentially a property of the App class, setState receives an object

Component life cycle

When a component instance is created and inserted into the DOM, these methods are called in the following order:

  • Constructor requires super(). Due to the nature of the class class, constructor needs to perform the super function, pointing this back to the parent class
  • Static getDerivedStateFromProps, called before render
  • Render, the only method required in the class component, returns a DOM fragment
  • ComponentDidMount, called after the component is mounted, which is called after the render is successful, set the subscription here

Discarded methods: ComponentWillMount, If you want to use please use [UNSAFE_componentWillMount ()] (https://reactjs.org/docs/react-component.html#unsafe_componentwillmount)

When a component is rerendered, these methods are called in the following order:

  • static getDerivedStateFromProps
  • ShouldComponentUpdate, rarely used, and certainly never used. Called when receiving new props or state, returns a Boolean, defaults to true, returns false, Render and componentDidUpdate are not called
  • Render,
  • GetSnapshotBeforeUpdate, called before the recently rendered output is submitted to the DOM, returns the value passed as a parameter to componentDidUpdate,
  • ComponentDidUpdate, called immediately after an update occurs

Discarded methods: ComponentWillUpdate, If you want to use please use [UNSAFE_componentWillUpdate ()] (https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate)

ComponentWillReceiveProps, If you want to use please use [UNSAFE_componentWillReceiveProps ()] (HTTP: / / https://reactjs.org/docs/react-component.html#unsafe_componentwillreceivep rops)

To remove a component from the DOM, call the following methods:

  • ComponentWillUnmount, where you cancel network requests or clear all subscriptions created at mount time

These methods are called during rendering when an error occurs in the constructor of a lifecycle method or any child component.

  • Static getDerivedStateFromError, called when an error occurs in a descendant component, passes in the error as an argument and returns the value to update the status.
  • ComponentDidCatch, which receives two arguments, error- the error raised, and info- contains information about which component raised the error

React Indicates the react-router

Installation:npm install react-route-dom  --save

The react-router library implements the core functions of route management. The react-router-dom library relies on the React-Router, but it extends some of the functions that run in the browser environment. NPM I react-router-dom is not required to install the react-router separately

Functions of routes: Switch the display view

React-router API

  • BrowserRouter, essentially, is a container where all the route operations should be done, and it keeps the UI consistent with the URL, so when the URL changes it looks inside to see if there’s a component that renders it
  • Route: associates the component with the URL path. Path sets the path. Component sets the component

       

  • Link, which is essentially the A tag,
  • NavLink has the activeClassName property to set the class name and activeStyle to set the style

       

       

  • Switch is also a container that wraps multiple routes, so that only one of them can be loaded at the same time
  • Redirect B.<Redirect from='/to' to='/'/>Automatically jump to when you access from
  • WithRouter, which is a higher-level component, retrieves history

Render passes match, location, and history to props

import React,{Component} from 'react' import {withRouter} from 'react-router-dom' class App extends Component{ console.log(this.props); / / {match: {... }, location: {... }, history: {... }... } render(){ return (<div className='app'></div>) } } export default withRouter(App);Copy the code
  • Prompt, when the user is ready to leave the page, Prompt, return true or false, if true, leave the page, if false, stay on the page.

Where message is the contents of the Prompt box, when receives a code block that is triggered when true is returned, false is not triggered

redux

Redux is a standalone JS library dedicated to state management

The structure of the story

  • Redux puts all the state in a project that needs to be managed externally into a repository, so the first thing we need to do with Redux is create a repository store

    const store = createStore(reducer)
Copy the code

  • Reducer is a pure function that produces a new state function based on the old state and action

There can be many reducer functions that are independent of each other, and you just need to output them all together

  • CombineReducers, an API of Redux, which is used to output multiple reducer in a unified way

  • Actions are functions used to create new actions

    import {editname,editpict,editposting}from './actions-type'
const namea=(date)=>({type:editname,date})
const pict=(date)=>({type:editpict,date})
const postinga=(date)=>({type:editposting,date})
export {namea,pict,postinga}
Copy the code

In this case, the value of type should be a string. I’ll put it in another module to define it

Summary: You should create three modules using Redux, one that creates the store repository, one that provides the Reducer function, and one that provides the action creation function.

The use of the story

  • When a react component wants to use store, we need to import store into the component

The store object has three methods:

  • GetState, gets the data and returns the specified state value
  • Dispatch, the new actin generated is passed in and the Reducer function is triggered to generate a new state
  • Subscribe, a function that is automatically called when dispatch is called to generate a new action

react-redux

React – Redux is a state management library specially used for React projects. It is based on Redux, which makes react state management more concise and conforms to the principle of high cohesion and low coupling

React-redux has two apis

  • Enable connect() methods at the component level to obtain the Redux store. Normally, your root component should be nested within to use the connect() method.

  • Connect. Connect is a high-level component that can be used as follows

    export default connect(
    state=>({name:state.name,nameword:state.nameword,posting:state.posting})
,{postinga}
)(Posting)
Copy the code

After the component name is filled in parentheses, the resulting component replaces the original component, which is the container component, and the original component is the UI component

The preceding parentheses receive two arguments

  • The first argument is a function, mapStateToProps(), that maps the external state object to the props object inside the UI component.
  • MapDispatchToProps is the second parameter to the Connect function, which can be a function or an object. Its purpose is to determine in the UI component which operations should be actions, passed to the Store. You pass the function that creates the action to the component, which receives it with an argument. I’ve only ever used the object form. I don’t know anything about functions