the relative basics of the React project have been explained in detail in 1BI 2 of this tutorial. In 3pr 4, continue to explain the advanced part of React. Build the whole family bucket of React project from scratch (1) Build the whole family bucket of React project from scratch (2) before we begin, review the content introduced in the previous article: 1 create React-APP 2 streamlined items 2.1 Delete files 2.2 simplify the code 2.3 use Fragment to remove the outer tag of the component 3 Project directory structure 3.1 introduce global common styles 3.2 support Sass/Less/Stylus 4 routes 4.1 Page build 4.2 use react-router-dom 4.3 Route Jump 5 components introduce 5.1 create header components 5.2 introduce Header components 5.3 components pass parameters 6 React Developer Tools browser plug-in in this second article, continue to share the following: take a peek at it 7 Redux and related plug-ins 7.1 install redux 7.2 install react-redux 7.3 install redux-thunk 7.4 install the browser Redux plug-in 7.5 create store 7.6complex project store decomposition 7.7 docking react-redux with store 7.8 start Redux DevTools 7.9 install using immutable 8 Mock.js installation and use 9 solve the cross-domain problem of local development 10 other commonly used tools 11 complimentary chapter: integrated Ant Design 11.1 install Ant Design 11.2 implement on-demand loading 11.3 Custom theme colors 7 Redux and related plug-ins students who have done vue development know that the corresponding tool for vuex,react is Redux, and of course there are some ancillary tools, such as react-redux, redux-thunk, and immutable. redux involves a lot of content…

this article is used to record some of the author's gains in the section strict mode in the official React18 documentation, concerning the role of strict mode, why React executes useEffect twice, and how to optimize it. strict mode (Strict Mode) what is strict mode strict mode is a tool to check for possible problems in your application. Strict mode only runs in a development environment, but it has no impact in a production environment. import React from 'react'; function ExampleApplication() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode> <Footer /> </div> ); } you can use React.StrictMode to wrap the apps you want to check. Apps without packages will not be affected. For example, the & lt;Header / & gt; component in the above code will not be affected by the strict mode, only the & lt;ComponentOne / & gt; and & lt;ComponentTwo> that we package will be affected by the strict mode. the role of strict mode strict mode makes the following checks identify unsafe lifecycles, such as componentWillMount. Later, it was upgraded to componentDidMount check on ref, a previous version of API, I hope you can replace it with a new version warning of findDOMNode being deprecated detect unexpected side effects found API with expired context ensure reusable state ReactThe official document of React provides an example, which should mean that if we jump from Route A to Route B and then return from Route B. ReactI hope to immediately display the original state, so that I can cache the state…

import { Switch, Route, Router } from 'react-router'; import { Swtich, Route, BrowserRouter, HashHistory, Link } from 'react-router-dom'; 1, api React-router： provides the core api of the route. Such as Router, Route, Switch, etc., but does not provide api; for routing redirection for dom operations React-router-dom： provides api such as BrowserRouter, Route, Link, etc., which can trigger events to control routing through dom actions. Link component, which renders an a tag; BrowserRouter, which uses pushState and popState events to build routes, and HashRouter components, which use hash and hashchange events to build routes. 2, dynamic route hopping React-router： this.props.history.push ('/ path') above router4.0 to jump; this.props.router.push ('/ path') above router3.0 to jump; React-router-dom： use this.props.history.push ('/ path') to jump directly 3, differences in use react-router-dom extends the api of operable dom on the basis of react-router. both Swtich and Route import the corresponding components from react-router and re-export them without any special treatment. there is a dependency on react-router in the package.json dependency in react-router-dom, so there is no need for npm to install react-router. you can install react-router-dom directly with npm and use its api.

redux-- getting started with instance TodoList Tip the front-end technology is really changing with each passing day. I'm embarrassed that I don't have a data stream when I finish React. looked through flux with anticipation, and was simply impressed by the official stream of consciousness documents. Is it really smelly and long, or is it my IQ problem? 😖 turned to redux. The more you read it, the more interesting it becomes. Follow the document to make a small example of how to get started with TodoList. Don't say much nonsense, first post the source code github.com/TongchengQi of the examples used in the article. Github warehouse github.com/rackt/redux of redux advantage with the development of spa (not SPA, but single-page applications), in the case of react, the idea of componentization and state machines really liberates the vexed dom operation, and everything is in a state. State to manipulate changes in views. however, because of the componentization of the page, each component must maintain its own set of states, which is fine for small applications. but for larger applications, too many states appear complex, and in the end, it is difficult to maintain, and it is difficult to organize all states clearly, and this is also true in multi-person development, resulting in some unknown changes, and the more troublesome it is to debug later. In many cases, the change of state is out of control. For inter-component traffic, server rendering, routing jump, update debugging, we need a mechanism to clearly organize the state of the entire application, redux should come into being,…

simple preparation quickly build react projects through create-react-app install dependent npm install redux react-redux redux-thunk-- save (redux-thunk is middleware for handling asynchronous data streams) change, create a new project directory effect diagram Demo start write redux related content action export const Increment = 'increment' export const Decrement = 'decrement' /*Action creator action constructor*/ export const increment = (counterIndex) => { type:Increment, counterIndex } export const decrement = (counterIndex) => ({ type: Decrement, counterIndex }) Action is essentially a JavaScript normal object. A type field of string type must be used in action to represent the action to be performed, but you need to write as many action as you need to write action, so you need action creator. This action constructor returns a js object. Of course, you need to return a function when dealing with asynchronous data. In this case, middleware is needed to rewrite dispatch. reducer import { Increment, Decrement } from '../Action' export default (state,action) => { const {counterIndex} = action switch (action.type) { case Increment: return {...state, [counterIndex]:state[counterIndex]+1} case Decrement: return {...state, [counterIndex]:state[counterIndex]-1} default: return state } } the specific definition of reducer can be found in the redux README. Since demotion is too simple, let's split and merge reducer. Here we mainly introduce the workflow of redux in react. Note here that reducer is a pure function and cannot change state. The new state returned here can use Object.assign and the object extender of es6. store import {applyMiddleware, createStore} from 'redux' import thunk from 'redux-thunk' import reducer from '../Reducer' const initValue={ 'First':1, 'Second':5, 'Third':6 }…

in the past year, more and more projects continue or begin to use React and Redux development, which is a common front-end project solution in the front-end industry, but as there are more and more development projects, individuals have different feelings and ideas. Is it because we already have a relatively common and familiar technology stack of the project that we have been using it completely? is there a more suitable solution than it? Just as the team recently had a new project, bloggers began to wonder if it was possible to develop using alternative technologies. It can not only improve the development efficiency, but also expand the technology reserves and horizons. After research, we chose Mobx, and finally built a new project using React+Mobx. This article summarizes and shares the more complete process from technology selection to project implementation, hoping to make common progress. Preface when we use React to develop web applications, within React components, we can use this.setState () and this.state to process or access intra-component states, but as the project grows larger and the states become more complex, we usually need to consider the problem of communication between components, which mainly includes the following two points: A state needs to be shared (accessed, updated) among multiple components; interaction within one component needs to trigger status updates for other components; with regard to these issues, React component development practices recommend improving the state of common components: Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common…

functional programming from Immutable.js to Redux basic concepts functional programming (English: functional programming), or functional programming or functional programming, is a programming paradigm. It treats computer operations as functional operations and avoids the use of program states and mutable objects. Among them, λ calculus is the most important foundation of the language. Moreover, the function of the λ calculus can accept the function as the input parameter and the output return value. the above is Wikipedia's definition of functional programming, which can be summed up in simple words as " emphasizes the function-based software development style ". in addition to the abstract definition, JS's functional programming has the following characteristics: function is a first-class citizen embrace Pure function , reject side effects use immutable values functional programming elements The function is a first-class citizen We often hear the saying, "in JS, a function is a first-class citizen". Its specific meaning is that the function has the following characteristics: can be passed to other functions as arguments can be used as the return value of another function can be assigned to a variable functional first-class citizenship is a must for all functional programming languages, while another must-have feature is support for closures (the second point above actually uses closures a lot of times) Pure function have and only display data streams: input: parameter output: return value if a function is pure, it should conform to the following points: there can be no side effects inside the function for the same input (parameter), you must get the same output. this means that…

I. what is redux Redux is a JavaScript container for state management. Redux supports other interface libraries besides being used with React, and its volume is only about 2kb . three cores of Redux single data source the state of the entire application is stored in an object tree, and this object tree exists only in the only store . State is read-only the only way to change state is to trigger & nbsp; action , which is a normal object used to describe events that have occurred. use pure functions to perform modifications to describe how action changes state tree, you need to write & nbsp; reducers . Redux composition State status state, ui state, global state returned by the server action event is essentially a js object needs to include the type attribute describes what is going to happen, but does not describe how to update state reducer is essentially a function response to the action sent The function takes two parameters, the first initializing state and the second sending action must have a return return value Store maintain the state (status) of the application (state, ui state, global state returned by the server) provide getstate method to read state used to associate action with reducer build store through createStore register to listen through subscribe dispatch method to send action

Why should we use React-Redux Redux itself is a separate state library, and it can be used in any UI framework, such as React , Angular , Vue , Ember , and vanilla JS , although Redux is usually used with React, they are actually independent of each other. if we are using Redux in any UI framework, we usually need a UI binding library to bind Redux to the UI framework we use, rather than manipulating the store state directly from our UI code. React-Redux is actually the official Redux UI binding library. So, when we are in React and Redux, we also need to use React-Redux to bind the two libraries together. While it is possible to write Redux store subscription logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic. although you can manually write the logic of Redux's status subscription, doing so is a repetitive task. In addition, optimizing the performance of UI requires complex logic. The process of subscription status, checking for data updates, and triggering re-render can become more generic and reusable. UI binding libraries such as React Redux can handle the logic of state interaction, so we don't need to write the relevant code ourselves. Why is my component not re-rendered, or why is my mapStateToProps not running? accidentally changing or modifying the state directly is the most common reason why components do not re-render after a scheduled operation. Redux wants our reducers to be "immune" to update its status, which in effect means always…

on March 17, one year after the launch of the Beta version of the new React document, React finally officially released the new React official document! The new document enables a new domain name: react.dev/ . However, at present, the new document has only been released in English at present When accessing Beta documents ( beta.reactjs.org/ ) and English documents ( reactjs.org/ ) Will be redirected to the new domain name ( react.dev/ ). The new document does not currently provide access to documents in other languages. to access the old Chinese version of the document, you can visit zh-hans.reactjs.org/ . to access the old English version, you can visit legacy.reactjs.org/ . the new document mainly contains the following sections: tutorials and guides : a large number of tutorials and guides are available to help developers learn React from scratch or delve into specific topics. Code samples and demos : provides a series of code examples and demos that demonstrate the power and flexibility of React. Best practices and techniques : learn the latest React best practices and techniques and learn how to optimize your code for better performance. Community Forum : contact other React developers to get help on the project or share expertise in the community. News and updates : get the latest versions, updates, and news from the React development team for the first time. Let's take a look at the features of the new React document! full hug Hooks when Hooks was released in 2018, the Hooks document assumed that the reader was already familiar with…