Compilation of knowledge points for getting started with React

Anyone who works on the front end must know that now is the era of three major frameworks - Vue, React, and Angular. Vue is recognized as the easiest to get started because its file structure has the shadow of traditional HTML, making it very "friendly" for front-end personnel who are new to it. Although Angular also retains HTML, it is the most difficult to get started. The reason may be that it was developed by Google's back-end programmers, and it uses pure Typescript and uses Rxjs asynchronously. The threshold is too high for front-end newcomers. high. Getting started with React is moderately difficult. Various opinions on the Internet say that it is more difficult to get started with React than Vue. The difficulty may be due to the inability to understand JSX deeply, or the lack of deep understanding of some features of ES6, which makes it difficult to understand some points, and then they say that React is more difficult to get started with. . Today, let’s sort out some knowledge points you need to master to get started with React.

Why introduce React

When writing React, you may write code similar to this:

import React from 'react'

function A() {
  // ...other code
  return <h1 id="前端桃园">前端桃园</h1>
}

You must have wondered, the above code does not use React, why should React be introduced?

If you delete import React from 'react', the following error will be reported:

So where is it used? This React will cause an error when we introduce React. If we don't understand this reason, then it means that JSX is not very clear.

You can put the above code (ignoring the import statement) into online babel for conversion, and find that babel will convert the above code into:

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

Because essentially, JSX Just syntactic sugar provided for the React.createElement(component, props, ...children) function.

Why use className instead of class

1. The initial concept of React is to be consistent with the browser's DOM API instead of HTML, because JSX is JS An extension rather than a replacement for HTML, which is closer to the creation of the element. To set a class on an element, you need to use the className API:

const element = document.createElement("p")
element.className = "hello"

2. Browser problem, before ES5, reserved words cannot be used in objects. The following code will throw an error in IE8:

const element = {
  attributes: {
    class: "hello"
  }
}

3. Destructuring problem. When you are destructuring attributes, problems will occur if you assign a class variable:

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

Why do attributes use camelCase

Because JSX is syntactically closer to JavaScript than to HTML, React DOM uses camelCase (camelCase naming) to define the names of attributes instead of HTML attribute names. Agreement.

Why do we need to call super and pass props in the constructor?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <p>
        </p><h1 id="Hello-world">Hello, world!</h1>
        <h2 id="It-is-this-state-date-toLocaleTimeString">It is {this.state.date.toLocaleTimeString()}.</h2>
      
    );
  }
}

And there is a paragraph that not only allows us to call super but also passes props in, but it does not tell us Why do this.

Why should we call super?

Actually, this is not a limitation of React, but a limitation of JavaScript. If you want to call this in the constructor, you must call it in advance. super. In React, we often initialize state in the constructor, this.state = xxx, so we need to call super.

Why should props be passed?

You may think that props must be passed to super, otherwise React.Component will not be able to initialize this.props:

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

However, if you accidentally miss passing props and call super() directly, you can still access this.props in render and other methods (you can try it if you don’t believe it).

Why is this okay? Because React will assign props to the newly created instance object after the constructor is called:

const instance = new YourComponent(props);
instance.props = props;

But does this mean that you can use super() instead of super(props) when using React? ?

That still doesn’t work, otherwise the official website will not recommend you to call props. Although React will assign a value to this.props after the constructor runs, but after the super() call and before the constructor ends, this.props is still unusable.

// Inside React
class Component {
constructor(props) {
This.props = props;
// ...
}
}

// Inside your code
class Button extends React.Component {
constructor(props) {
Super(); //

The above is the detailed content of Compilation of knowledge points for getting started with React. For more information, please follow other related articles on the PHP Chinese website!