create-react-app

The React technology relies on a number of technology stacks. For example, Babel is used to translate JavaScript code, Webpack is used for module packaging, and grunt or gulp is used for custom build processes. The create-react-app command automatically generates a basic React-app template project, which allows developers to quickly start react application development. To install create-react-app:

npm install --global create-react-app
Copy the code

Then you can create:

create-react-app <app-name>
Copy the code

component

React’s primary idea is to develop applications using components. A component, simply put, is a separate, reusable piece of code that performs a specific function. This is a big departure from traditional Web development, where HTML represents content, CSS represents style, and JavaScript defines interaction. These three languages are separated into three different files, effectively managing the different technologies separately, rather than logically “divide and conquer”. Components are organized logically (functionally).

Component, as the base class for all components, provides many functions common to components

JSX

JSX is a JavaScript syntax eXtension that allows you to write HTML-like code in JavaScript. In JSX, the element is not limited to HTML elements, but can be any React component. React determines whether an element is an HTML element or a React component by capitalizing the first letter.

The concept of the React

The React philosophy boils down to a simple formula:

UI = render(data)
Copy the code

The render function, together with the data it receives, determines the result of the UI rendering. Render is a pure function whose output depends entirely on the input. It’s important for developers to distinguish between what belongs to Data and what belongs to Render. If you want to update the user interface, all you have to do is update the data and the user interface will respond. React practices ReactiveProgramming. That’s why it’s called React.

React, however, does not re-render the entire page when data changes. It uses the Virtual DOM to render only different DOM, which is very efficient.

Virtual DOM

To understand Virtual DOM, we must first understand DOM. DOM is an abstract expression form of structured text. The so-called structured text here is HTML text.

When rendering HTML, the browser first parses the HTML text to build a DOM tree, and then renders the UI based on the DOM tree. When changing the content of the interface, you can operate on the DOM to achieve this.

Web front-end development has a rule about performance optimization: minimize DOM manipulation. Because DOM manipulation causes the browser to redraw the web page, this is a relatively time-consuming process.

The Virtual DOM is then a higher level of abstraction of the DOM. When the React component changes, the real DOM is manipulated based on the differences between the React and the old Virtual DOM.

React uses the idea of functional programming and data-driven mode to develop Web pages. Data changes only trigger changes in the Virtual DOM. React does the rest, and developers don’t need to care about it.

When developing React, developers use a declarative syntax that focuses on describing the results of actions rather than the details of actions.

Easy to maintain component design elements

When designing components, try to keep each component doing only one thing.

If you find that a component has too much functionality and too much code, you can consider breaking it up. When splitting components, however, it is important to note that too much granularity or too much granularity is not a good thing, just as “one component does one thing” depends on the specific scenario.

When splitting components, the most important and difficult part is to determine the boundaries of the components. Each component should be able to exist independently. If the logic of two components is too close to clearly define their responsibilities, then perhaps the two components should not be separated themselves.

Common software design principles also apply to component design: components should follow the principle of high cohesion and low coupling.

Prop and the state

React component data is divided into prop and state. Any change in prop or state may cause component re-rendering. Prop is the external interface of the component, and state is used to store the internal state of the component.

prop

A React component defines its own public interface by defining a prop that it can accept. The type of props can be any data type supported by the JavaScript language, including functions. When a prop is of a type other than string, the value of the prop must be wrapped in curly braces {} in JSX. The React component cannot modify the value of a prop passed in.

PropTypes is used for the interface specification of the component: the propTypes are poured first

import PropTypes from 'prop-types';
Copy the code

Add restrictions to props in [className].propTypes, such as the code below that limits the Caption field to string and isRequired to pass a value.

Counter.propTypes = {
  caption: PropTypes.string.isRequired
}
Copy the code

These added restrictions are used for runtime and static code checks to determine whether the component is being used correctly. However, this restriction is not mandatory, and even if it is violated, the component will still work, but will throw a warning message in the browser’s console.

PropTypes can help find problems in the code early in the development phase, but it’s best not to carry them into production. Babel-react-optimize can automatically remove defined propTypes when releasing production code.

DefaultProps can be used to define default values for the fields in props:

Counter.defaultProps = {
  initValue: 3
};
Copy the code

state

State is used to record changes to the component’s own data. State is initialized in the component’s constructor, which is done by assigning this. State:

this.state = {
  count: props.initValue
};
Copy the code

The state of the component must be a JS object, and it must be a field of state even if all the component needs is a numeric field.

This. State can be used to read values, such as this.state.count.

Changing the value of state must be done with the this.setstate () method:

this.setState({ count: this.state.count + 1 });
Copy the code

Direct changes don’t work because setState, in addition to changing the value of state, also triggers a rerendering of the page.

Component life cycle

In the life cycle of a React component, there are three processes:

  • The Mount process, which renders the component in the DOM tree for the first time;
  • Update, the process by which components are re-rendered;
  • Unmount, the process by which components are removed from the DOM.

The loading process

When a component is rendered for the first time, the following functions are called:

  • constructor
  • render
  • componentDidMount
constructor

Not every component needs to define its own constructor. Components need to define constructors in the following cases:

  • Initialize state, if the component contains state, in the constructor;
  • Bind the this environment of member functions
render

A React component can ignore all other functions but must implement the render function because the parent react.componentclass has a default implementation for all lifecycle functions except render. The Render function doesn’t do the actual render action, it just returns a structure described by JSX, and React does the render. The render function should be a pure function, depending entirely on this.state and this.props, without any side effects.

componentDidMount

React componentDidMount is triggered when render a page based on the result of Render, but not immediately after render is executed until the React library executes render on all components.

The update process

The update process mainly calls the following functions:

  • shouldComponentUpdate
  • render
  • componentDidUpdate
shouldComponentUpdate

ShouldComponentUpdate is also a very important function that returns a bool to determine whether the component should be rerendered. ShouldComponentUpdate can be customized when you need to optimize performance. The default implementation in the parent class react.componentalways returns true. During customization, you can compare the state and props and update them only when they change.

Uninstall process

The uninstall process involves only one componentWillUnmount function, which is called before the React component is removed from the DOM tree, so this function is good for some cleanup work. For example, some DOM elements are created in componentDidMount in a non-React way. If leaving them out would cause a memory leak, you would need to clean them up in componentWillUnmount.

Components pass out data

Prop can be used to pass data from the parent to the child, and there are many times when data needs to be returned from the child to the parent. Prop supports any type of JavaScript object, including functions that can be passed from parent to child components as prop values like any other object, and can be called from quilt components as functions, so that data can be returned from child components to parent components using functions.

However, this transfer mode is more complicated when it involves data transfer between multiple and multi-layer components. Data of multi-layer components needs to be transferred layer by layer, while data between horizontal components needs to be transferred by the parent component, which may lead to data redundancy and data flow chaos. Let’s take a look at how Redux solves this problem.

Reference books

React and Redux by Mo Cheng