preface

So far, I have been developing projects using the Vue framework. Since I recently attended the Byte Youth Training camp, the framework I learned in the course was React. I just followed the teacher to learn React and wrote this note

Create the React project

NPX create-react-app my-app # create project NPM start # Start projectCopy the code

Now our React project is created

JSX

React JSX is a JS-BASED extension syntax that describes the structure of the UI.

JSXThere are two types of tags inHTMLTags, one isReactComponent label.

How do I render React elements into the DOM?

const element = <h1>hello,world</h1>;
ReactDOM.render(element,document.getElementById('root'))
Copy the code

React renderAPI is called to render ~

component

component = (props) = > element
Copy the code

The React component must behave like a pure function!

Ask! What is a pure function?

Pure functions:

  1. Returns the same result for the same input parameter
  2. No side effects (when a function is called, it has an additional effect on the caller in addition to returning the function value)

The React component is a function component and a class component

Function component

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
Copy the code

Class components

class Welcome extends React.Component {
    render() {
        return <h1>Hello,{this.props.name}</h1>; }}Copy the code

Component lifecycle functions:

state

State is present to dynamically render the UI structure within the component. State makes the React component dynamic.

Updates to state must be made using the setState API.

SetState Precautions

  1. Changing state is done through the setState method
// Wrong
this.state.comment = 'hello';
// Correct
this.setState({comment:'Hello'});
Copy the code
  1. Incoming parameter problem
// Wrong
this.state.setState({
    counter: this.state.counter + this.props.increment
});
// Correct
this.state.setState((state,props) = > ({
    counter: state.counter + props.increment
}));
Copy the code

Psops: Properties passed from a parent component to a child component that are read-only within the child component. State: indicates the internal maintenance State of the component. It can be modified.

Combinatorial usage of components

Hooks

After React 16.8, there are new ways to develop components

Custom hooks

A function that encapsulates general logic starting with “use” as the function name

import { useEffect } from 'react';

const useMounted = (fn:() => void) = > {
    useEffect(() = >{ fn(); } []); };Copy the code

Rules to follow using hooks

A hook can only be called from a function component, a custom hook.

A hook can only be called in the top-level control flow of a function

Why hooks?

Using Hooks allows us to reuse component state management and logic. Hooks are designed for the future of React.

React Router Indicates the routing layer

Classification of routes

Routes can be classified into server routes and client routes.

Server routing

The request is sent to the server, which decides to return the corresponding page content.

Client routing

The request is not sent to the server; the client code updates the page content.

The application scenarios of the two routes are multi-page application on the left and single-page application on the right.

Now in daily development, single-page applications are the way to organize applications for unusual scenarios.

BrowserRouter and HashRouter

  • BrowserRouter: Redirects routes based on the PATH in the URL
  • HashRouter: Redirects routes based on the hash part of the URL

Route

When the URL matches the path defined in Route, render the corresponding components, including props: Path and exact

Routing hop

  • Declarative component approach: Link
  • Imperative API calls: history.push

UseHistory: obtains the history object. UseParams: obtains the parameters of the route

The last

⚽ React Router and React Router. In the next article, I will introduce you to Redux~ ⚾. 😘 🏀GitHub blogs at github.com/Awu1227. 🏉 I have other columns, please read ~ 🏐 play the beauty of CSS 🎱Vue from giving up to getting started 🎳 simple JavaScript