React Day 1 - React Review - Moment For Technology

This is the fifth day of my participation in the Gwen Challenge.More article challenges

Now, React. If you’re just starting React, follow along. If you have any questions, leave them in the comments. If you have learned React, we will review it step by step and learn it systematically.

React:

React;
What JSX is and how to use it.
What is the React component, how does the data flow (props, State, Context), the life cycle of the class component
The React of the form
The React to the route

1. what is React?

A JavaScript library for building user interfaces

React is a javaScript library for building user interfaces, which are only responsible for the view layer of your application

In the past, we used HTML + CSS + JavaScript to build the user interface, but with React, we can now build the user interface using JavaScript entirely. The structure, the style, the logic is all in javascript. React is the JS library that builds the user interface, which is the view layer of the user interface.
Helps developers quickly build and interact with complex Web applications. React has features such as virtual DOM, Diff algorithm, Fiber algorithm, and batch update, which make React web applications relatively fast
React uses components to build the user interface. React doesn’t separate the logic used to build the user interface from the logic used to build the interface, so it’s easy to build strongly interactive Web applications with React
If you develop a Web App, you also need to learn the React-Router front-end route manager, which is used to control the jump of front-end pages. You also need data state management tools like Redux to develop a complete Web app
React uses JSX syntax to describe the user interface

2. What is JSX?

React uses the JSX syntax, which is a JavaScript syntax extension, to describe the user interface

// This is JSX<h1> Hello, {formatName(user)}! <h1>Copy the code

The above code is a JSX syntax that cannot be used directly by browsers. Before the React code executes, you need to use Babel to convert the JSX syntax to a standard JavaScript API

Babel transforms the above code into javascript code that can be run directly by the browser

You can check it out on the official website

JSX syntax is a syntactic sugar designed to allow developers to build user interfaces with more comfortable code

2.1 Expressions can be used in JSX

You can use javascript expressions inside curly braces {}

<div>
    Hello {this.props.name}
</div>
Copy the code

JSX itself is an expression that can be assigned to a variable, passed in as an argument, or returned as a value

2.2 attributes

If the attribute value is a string, use quotation marks. If the attribute name consists of multiple words, camel name is recommended

const element = <div greeting="hello"></div>

Copy the code

If the property value is a JavaScript expression, parentheses surround the property value

const element = <img sec={user.avataUrl}/>
Copy the code

2.3 JSX single mark must be closed

If JSX is a single tag, it must be closed or an error is reported

// The value is a JS expression
const element = <img src={user.avararUrl}  />
// Value is a string
const element1 = <input type="text">
Copy the code

2.4 the className

To add a class name to the JSX tag, you need to use className, not class, because class is the JS keyword

const element = <img className="rounded">

Copy the code

2.5 JSX automatically expands arrays

JSX automatically expands the array

    const ary = [<p>Ha ha</p>.<p>Ha ha</P>.<p>Hey hey</p>]
    const element = {
        <div>{ary}</div>
    }
    
/ / resolved
/* 
       
        haha 
         
        haha 
         
       
      Copy the code

2.6 JSX can use ternary operations

If the js expression returns a Boolean value or null, nothing is displayed in the user interface

{boolean ? <div>Hello React</div>:null}
{boolean && <div>Hello React</div>}
Copy the code

2.7 cycle

If you can use v-for directives in Vue, React doesn’t have directives. How do you use loops in React? We can directly use JS methods in JSX

const persons = [{
    id: 1.name: 'Joe'}, {id: 2.name: '李强'}, {id: 3.name: 'the prince'
}]
<ul>
   {
       persons.map(person= > <li key={person.id}>{person.name})
   }
</ul>
Copy the code

2.8 event

<button onClick={this.eventhandler}> button </button> {/* Need to pass the event object */} <button OnClick ={e=> this.eventhandler ('arg',e)}> button </button> {/* The last argument is the event object does not need to pass */} <button OnClick ={this.eventhandler. bind(null, 'arg')}> </button>Copy the code

constructor () { this.eventHandler = this.eventHandler.bind(this) } eventHandler () {} <button Button onClick = {this. EventHandler} > < / button >Copy the code

2.9 style

In React, we use the component approach to develop the user interface. When we add styles to the component, we actually want to write styles that only serve the current component itself, and not leak styles outside of the component.

The first way to style a component is to use inline styles
- When using inline styles, if the attribute key is explicitly multiple words, use the camel name
- If the attribute value is a numeric type, then you don’t have to add units. The default is PX

class App extent Component {
    render() {
        const style = {width: 200.height: 200.backgroundColor: 'red'};
        return <div style={style}></div>}}Copy the code

Second: external chain style

In addition to using JS styles, we can also use CSS, if we want to use only the corresponding component, there is a convention for the style file name. If the component name is Button, the style file name must be button.module.css, whatever the suffix

// Button.js
import styles from './Button.module.css'
class Button extends Component {
    render() {
        return <button className={styles.error}>Error Button</button>}}Copy the code

The third global style

Just introduce it as a module

import './styles.css'
Copy the code

2.10 attributes

1. CreateRef Gets the object of the element or component instance

This input is bound to this.inputRef, and this.inputRef’s current is the instance object of the input element tag when the button is clicked

class Input extends Component {
    constructor() {
        super(a)this.inputRef = React.createRef()
    }
    render() {
        return {
            <div>
                <input type="text" ref={this.inputRef)}>
                <button onClick={()= > console.log(this.inputRef.current)}>button</button>
            </div>}}}Copy the code

Function parameters

The ref value of the element can also be a function that takes the DOM instance object of the current component or tag

class Input extends Component {
  render() {
    return (
      <div>
        <input type="text" ref={input= > (this.input = input)} />
        <button onClick={()= > console.log(this.input)}>button</button>
      </div>)}}Copy the code

3. The component

3.1 What is a component

React uses components to develop the user interface. Components can be interpreted as encapsulating a certain area of the page according to certain rules

3.2 Creating Components

React has two types of components: class components and function components

3.2.1 Creating Class Components

Create a Component that inherits the React Component object. Use a render method in the Component class. Render returns the content to be rendered on the page. JSX generates a React. CreateElement method, which uses the React class

import React, { Component } from 'react'
class App extends Component {
    render () {
        return () {
            return <div>Hello, I'm a class component</div>}}}Copy the code

3.2.2 Creating function components

Component names must be capitalized to distinguish components from common labels
The JSX syntax outer layer must have a root element

const Person = () = > {
    return <div>Hello, I'm a functional component</div>
}
Copy the code

3.3 components props

3.31 Pass Data using props

When calling a component, you can pass data inside the component, where you can get data passed in from outside through the Props object

<Person name="George," age="20"/>
<Person name="Mary" age="10"/>
Copy the code

When we call a class component, we use the component tag call, pass in props with the tag attribute, and the class component receives the value passed in with this.props

/ / class components
class Person extends Component {
  render() {
    return (
      <div>
        <h3>Name: {this. Props. The name}</h3>
        <h4>Age: {this. Props. Age}</h4>
      </div>); }}Copy the code

We call the function component the same way, using the component tag, but the function component receives an argument as props, and the props receives the value passed in

// Function components
const Person = props= > {
  return (
    <div>
      <h3>Name: {props. The name}</h3>
      <h4>Age: {props. Age}</h4>
    </div>
  );
}
Copy the code

Note:

The data stored in the props object is read-only and cannot be modified inside the component.
After the data in the props data source is modified, the data received in the component is updated synchronously. (Data-driven DOM)

3.3.2 Setting the default value of props

Class component using the static property defaultProps

class App extends Component {
    static defaultProps = {}
}
Copy the code

The defaultProps function uses this function to add an attribute to set

function ThemedButton(props) {
}
ThemedButton.defaultProps = {
  theme: "secondary",
  label: "Button Text"
};
Copy the code

3.3.3 component children

The props. Children property is used to get the content to populate the inside of the component tag when the component is called

Contents inside the <Person> component </Person>Copy the code

Use props. Children to get the contents of the component

const Person = (props) => {
    return (
    	<div>{props.children}</div>
    );
}
Copy the code

3.3.4 Unidirectional Data Flow

In React, there is a principle of one-way data flow, from top to bottom, from parent to child. Data is not allowed to pass from child to parent
The singleton data flow feature requires that our shared data be placed in upper-layer components
- If both child components need the same data, we define that data on the parent component and pass it down layer by layer
The child component changes the data by calling methods passed by the parent component
- If you want to change props by clicking a button on a sub-component, define a method on the top component that changes the props, pass it to the corresponding sub-component at a time, and call this method when the sub-component clicks to make the changes
React rerenders the component tree when the data changes
One-way data flow uses the data flow between components to become predictable, making it easy for locators because the data flow becomes traceable

3.4 Class Component Status State

3.4.1 Defining component states

In addition to receiving state data from external props, a class component can have its own state, which can be updated within the component. The DOM is updated when the state is updated.

Component internal state data is stored in the state property of the component class. The value of the state property is the object type, and the property name is fixed and unchangeable.

class App extends Component {
  constructor () {
    super(a)this.state = {
      person: { name: 'Joe'.age: 20 },
    }
  }
  render () {
    return (
      <div>
        {this.state.person.name}
        {this.state.person.age}
      </div>); }}Copy the code

3.4.2 Changing component Status

The data in the state object cannot be changed directly. If you change the DOM directly, the DOM will not be updated. To change the state data, use the setState method.

class App extends Component {
  constructor () {
    this.state = {
      person: { name: 'Joe'.age: 20}},this.changePerson = this.changePerson.bind(this)
  }
	changePerson () {
    this.setState({
      person: {
        name: 'bill'.age: 15}})}render() {
    return (
      <div>
        {this.state.person.name}
        {this.state.person.age}
        <button onClick={this.changePerson}>button</button>
      </div>); }}Copy the code

3.4.3 Bidirectional data binding

Two-way data binding means that the component class updates the state, the DOM state updates synchronously, the DOM changes the state, and the component class updates synchronously. Component <=> view

To implement two-way data binding, you need form elements and state objects.

class App extends Component { constructor () { this.state = { name: } this.namechanged = this.namechanged. Bind (this)} nameChanged (event) {this.setState({name: event.target.value}); } render() { return ( <div> <div>{this.state.name}</div> <Person name={this.state.name} changed={this.nameChanged}/> </div> ) } }Copy the code

Bind the Person. name attribute with value in the form and bind the changed method with the form Input component onChange so that the form value can change and the Person. name is updated with setState, causing the view to update

const Person = props => {
	return <input type="text" value={props.name} onChange={props.changed}/>;
}
Copy the code

Class 3.5 Component lifecycle functions

What is a life cycle function? A function that is automatically called when a framework program runs to a certain point is a lifecycle function. Framework users can use lifecycle functions to do what they want to do at a given point in time.

Lifecycle functions are divided into three phases:

Component mount phase
- When a component is created, the constructor function is executed, which initializes the State object to change the this pointer
- When constructor is done, the getDerivedStateFromProps lifecycle function is invoked. If the state of the current child component depends on the state of the parent component, the getDerivedStateFromProps lifecycle function is invoked. This periodic function takes two arguments, the first taking the state of the parent component and the second taking the state of the current component. We can use these two parameters to decide whether to update the current component state or not. If we do not need to update the current component state, then let the periodic function return null. If we want to update the current component state, then return a new state object
- After getDerivedStateFromProps is done, the render method is then executed, which mounts the component instance object
- The componentDidMount cycle function is executed when Render is finished, indicating that the current component object has been mounted
Caution: the mount phase should not cause side effects from constructor, such as requesting data from the server. Something like this is best done in componentDidMount
Component data update phase
- When data in the component is updated, the getDerivedStateFromProps function is executed to see if the component’s state needs to be updated
- ShouldComponentUpdate is then called, which returns either true or false, if true it continues, if false it stops updating the component
- Assuming that shouldComponentUpdate returns true, the next step is to execute the Render function to re-render the update component
- The getSnapshotBeforeUpdate function is used less frequently after the Render method is finished. This function is used to perform some logic or calculation. The return value can be obtained in the third parameter of the componentDidUpdate method. This means that you can use this value to do other things after the component is updated
A snapshot is needed to perform some kind of logic or calculation before a component completes an update
```
    componentDidUpdate(preProps, preState, snapshot) {}
    getSnapshotBeforeUpdate(preProps, prevState) {
    return 'snapshot'
    }
Copy the code
```
ComponentDidUpdate and getSnapshotBeforeUpdate are used together
Component uninstallation phase
- This phase is simple and executes the componentWillUnmount periodic function. This periodic function is used to clean up the component, clean up the events of the component, clean up some refs bound DOM objects, etc

3.6 the Context

What does this Context do? The props attribute can only be passed layer by layer from parent to parent components. If the component hierarchy is too deep, it is difficult to maintain and pass data at one time, so we can use Context to pass data across layers.

If the root component has A username that needs to be used by component A, component D, and component F, what should we do? If we use the traditional method of props, we pass it to component A, props to B, and props to D. Pass to E through the props of layer 1 C, and to F……. through the props of layer 1 E You can also feel that this process is too complicated, and B, C and D also don’t need this props, but they participate in the transmission of this data, which is not good. We can use Context to pass A,D, and F directly to the root component username

// Create a useContext file

// userContext.js
import React from "react"

const userContext = React.createContext()
const UserProvider = userContext.Provider
const UserConsumer = userContext.Comsumer

export {UserProvider, UserConsumer}

Copy the code

The createContext function can also pass a default value, which is used if the UserProvider value does not pass a value

// App.js
import { UserProvider } from "./userContext"
class App extends Component {
  render() {
    return (
      <UserProvider value="Hello React Context">
        <A />
      </UserProvider>)}}Copy the code

// C.js
import { UserConsumer } from "./userContext"

export class C extends Component {
  render() {
    return (
      <div>
        <UserConsumer>
          {username => {
            return <div>{username}</div>
          }}
        </UserConsumer>
      </div>)}}Copy the code

The form

In React, there are two types of forms, controlled forms and uncontrolled forms

4.1 Controlled Forms

The so-called controlled form means that the bound values in the form control are managed by state, and the values stored in the state object and the values in the form control belong to the synchronization state.

Consider: How does this synchronization work?

In fact, through the data binding mechanism we talked about above. The component’s data must be bound to the value property of the control. The form component displays the value of the component’s state state.name. The setState method is called to update the component’s state synchronization data when a form event changes. This synchronizes the data in the form control with the data in the component state. So when the form does a submit, use this.state to retrieve the data stored in the form

class App extends Component {
    constructor () {
         this.state = {username: ""}
         this.nameChanged = this.nameChanged.bind(this)}nameChanged(e) {
        this.setState({usename: e.target.value})
    }
    
    render() {
        return {
            <form>
                <p>{this.state.username}</p>
                <input type="text" value={this.state.username} onChange={this.nameChanged}/>
            </form>}}}Copy the code

4.2 Uncontrolled forms

Uncontrolled forms are normal forms, and the values of the form elements are managed by the DOM elements themselves. Get the form component object instance from ref, and get the form control value from the form control instance

class App extends Component {
  constructor () {
    this.onSubmit = this.onSubmit.bind(this)
  }
  onSubmit(e) {
    console.log(this.username.value)
    e.preventDefault();
  }
  render(
    <form onSubmit={this.onSubmit}>
      <input type="text" ref={username => this.username = username}/>
    </form>
  )
}
Copy the code

5. The routing

You can specify the mapping between components and urls through routes. Different urls display different components

NPM install react-router-dom

5.1.1 Basic Use of Routes

BrowserRouter component: Represents the browser routing component and should be placed in the outermost component of our application as specified
Route Is used to set routing rules and match routing rules
The Link component is used to set links

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Index() {
	return <div>Home page</div>;
}
function News() {
	return <div>news</div>;
}
function App() {
  return (
    <Router>
      <div>
        <Link to="/index">Home page</Link>
        <Link to="/news">news</Link>
      </div>
      <div>// Use the Route component to bind the relationship between the path and component<Route path="/index" component={Index}/>
        <Route path="/news" component={News}/>
      </div>
    </Router>
  );
}
Copy the code

5.1.2 Route nesting If required in the application and secondary link tertiary link quaternary link….

We need to use route nesting, add from the news route under the company news and industry news, at this time need to set the secondary nesting method, then how to set? Look at the code:

function News(props) {
  return (
    <div>
      <div>
        <Link to={` ${props.match.url} /company`} >Company news</Link>
        <Link to={` ${props.match.url} /industry`} >Industry news</Link>
      </div>
      <div>
        <Route path={` ${props.match.path} /company`} component={CompanyNews} />
        <Route path={` ${props.match.path} /industry`} component={IndustryNews}/>  
      </div>	
    </div>
  );
}

function CompanyNews() {
	return <div>Company news</div>
}
function IndustryNews() {
	return <div>Industry news</div>
}
Copy the code

Configuration and the previous level is similar, the key is how to specify the corresponding address? Url to obtain the value of the Link component’s to property, and then add the route’s own address to complete the address of the specified component. In the route component, use props. Mate. path to obtain the path of the route of the upper-layer component

5.1.3 Route Parameter Transmission

Requirements: There is a list page and a detail page for news. There is a link in the list page. When we click the link, we can enter the corresponding detail page. When the user clicks the list, we need to pass the ID of the detail to the detail page component.

The status list is an array containing two objects, each with id and title

this.state = {
    list: [{
        id: 1.title: 'news'
    }, {
        id: 2.title: 'news'}}]Copy the code

Loop the list through the Map method in the Render method and create the link /detail? Through the link component in the loop. Id =${item.id}

render() {
    return (
      <div>
        <div>News List component</div>
        <ul>
          this.state.list.map((item, index) => {
            return (
              <li key={index}>
                <Link to={` /detail?id=${item.id}`} >{item.title}</Link>
              </li>
            );
          })
        </ul>
      </div>); }}Copy the code

So how do we get, how do we get the news ID on the details page? We can use this. Props. Location. The search for the parameters passed, but get is with? = string, it’s a bit cumbersome, we can format the value using the URL

class Detail extends Component {
  constructor(props) {
    super(props);
  }
	const { query } = url.parse(this.props.location.search, true);
	console.log(query); // {id: 1}
  render() {
    return <div>News details</div>}}Copy the code

5.1.4 Route Redirection

import {Redirect} from 'react-router-dom'

class Login extends Component {
    render() {
        if(this.state.isLogin) {
            return <Redirect to="/">}}}Copy the code

6. Summary

React 1. How do you react?

Data-driven DOMUI = Render(Data).
Use JSX to better write React components in JS
The React component has function components and class components. The component relies on props to transfer data layer by layer from top to bottom. Context can also be used to transfer data layer by layer, and ref can obtain component instances. The class component also has its own state; The life cycle of a class component is divided into three phases: mount, update, and unload. Each phase executes a different hook function.
The React framework has controlled and uncontrolled forms
Use react routing to learn about path and component matching, nested routing configuration, and route redirection

Next time learn React data flow solution, stay tuned!!

Reference tutorial: hook education

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

React Day 1 — React Review

1. what is React?

2. What is JSX?

2.1 Expressions can be used in JSX

2.2 attributes

2.3 JSX single mark must be closed

2.4 the className

2.5 JSX automatically expands arrays

2.6 JSX can use ternary operations

2.7 cycle

2.8 event

2.9 style

2.10 attributes

3. The component

3.1 What is a component

3.2 Creating Components

3.2.1 Creating Class Components

3.2.2 Creating function components

3.3 components props

3.31 Pass Data using props

3.3.2 Setting the default value of props

3.3.3 component children

3.3.4 Unidirectional Data Flow

3.4 Class Component Status State

3.4.1 Defining component states

3.4.2 Changing component Status

3.4.3 Bidirectional data binding

Class 3.5 Component lifecycle functions

3.6 the Context

The form

4.1 Controlled Forms

4.2 Uncontrolled forms

5. The routing

5.1.3 Route Parameter Transmission

5.1.4 Route Redirection

6. Summary

React Day 1 — React Review

1. what is React?

2. What is JSX?

2.1 Expressions can be used in JSX

2.2 attributes

2.3 JSX single mark must be closed

2.4 the className

2.5 JSX automatically expands arrays

2.6 JSX can use ternary operations

2.7 cycle

2.8 event

2.9 style

2.10 attributes

3. The component

3.1 What is a component

3.2 Creating Components

3.2.1 Creating Class Components

3.2.2 Creating function components

3.3 components props

3.31 Pass Data using props

3.3.2 Setting the default value of props

3.3.3 component children

3.3.4 Unidirectional Data Flow

3.4 Class Component Status State

3.4.1 Defining component states

3.4.2 Changing component Status

3.4.3 Bidirectional data binding

Class 3.5 Component lifecycle functions

3.6 the Context

The form

4.1 Controlled Forms

4.2 Uncontrolled forms

5. The routing

5.1.3 Route Parameter Transmission

5.1.4 Route Redirection

6. Summary

Related Posts

React Router Hooks Full Guide to Getting started with Router Hooks 🛵

Deduplicates the JS array

Vue – the router at the beginning of learning