Learn how to react

React is harder to learn than Vue. It may be that you don’t understand JSX well enough, or some of ES6’s features well enough, so you find it hard to understand. React is hard to learn and anti-human. So I’m going to write two articles about the confusing points of learning React for beginners. If you still feel confused about learning React, please leave me a comment in the comments section.

Why was React introduced

When writing React, you might write code like this:

import React from 'react'

function A() {
  / /... other code
  return <h1>The front-end taoyuan</h1>
}
Copy the code

React isn’t even used in the code above, so why introduce React?

If you delete import React from ‘React’, you will get the following error:

How did React get used? JSX didn’t understand React very well.

You can convert the above code (ignore the import statement) into Babel.

function A() {
  / /... other code
  return React.createElement("h1".null."Front End Peach Garden");
}
Copy the code

Because essentially JSX is just for react. createElement(Component, props,… The children) function provides syntactic sugar.

Why use className instead of class

1. React’s initial concept was to stick with the browser’s DOM API rather than HTML, since JSX is an extension of JS, not a replacement for HTML, which would be closer to element creation. To set a class on an element, use the className API:

   const element = document.createElement("div")
   element.className = "hello" 
   Copy the code

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

   const element = {
     attributes: {
       class: "hello"}}Copy the code

3. If you assign a class variable, you will have a problem:

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

Interesting topic, why does JSX use className instead of class

Why do attributes use small humps

Because JSX is syntactically closer to JavaScript than HTML, the React DOM uses camelCase (small camel name) to define attribute names rather than the naming convention for HTML attribute names.

From JSX Introduction

Why call super and pass props from constructor

This is the code from the official website, see: State and life cycle

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date(a)}; } render() {return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>); }}Copy the code

And there’s a paragraph that tells us not only to call super but also to pass props in, but it doesn’t tell us why we’re doing it.

If you’ve ever wondered why you want to call super and pass props, let’s solve the puzzle.

Why call super

In the React constructor, if we want to call this, we need to call super beforehand. In the React constructor, we usually initialize state, this.state = XXX, So you need to call super.

Why pass props

You might think you have to pass in props to super, or else react.componentcan’t initialize this.props:

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

However, if you accidentally pass props and call super(), you can still access this.props in render and other methods.

Why is that okay? React assigns props to the instance object it just created after the constructor is called:

const instance = new YourComponent(props);
instance.props = props;
Copy the code

There’s a reason why props can work without passing.

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

React assigns this. Props after the constructor is run, but this. Props is still unusable after the super() call and before the constructor is finished.

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...}}// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(a);// 😬 forgot to pass props
    console.log(props); / / ✅ {}
    console.log(this.props); / / 😬 undefined
  }
  // ...
}

Copy the code

If the constructor calls a method that accesses props, the bug is more difficult to locate. So I strongly recommend always using super(props), even if it’s not necessary:

class Button extends React.Component {
  constructor(props) {
    super(props); // ✅ We passed props
    console.log(props); / / ✅ {}
    console.log(this.props); / / ✅ {}
  }
  // ...
}

Copy the code

The above code ensures that this.props is always valid.

If you want to avoid the above problems, you can simplify the code by using the class attribute proposal:

class Clock extends React.Component {
  state = {date: new Date(a)}; render() {return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>); }}Copy the code

More details can be found on Dan’s blog

Why do components start with a capital letter

JSX is react. createElement(Component, props,… / / Children /ReactClass type (); / / Children /ReactClass type (); / /ReactClass type ()

• React feels like a native DOM node
• ReactClass Type User-defined component

For example (string) : in JSX we write one

<div></div>

Copy the code

When converted to JS, it becomes

React.createElement("div".null)

Copy the code

For example (ReactClass type) : in JSX we write one

function MyDiv() {
    return (<div><div>)
}
<MyDiv></MyDiv>

Copy the code

When converted to JS, it becomes

function MyDiv() {
  return React.createElement("div".null);
}

React.createElement(MyDiv, null);

Copy the code

In the example above, if you lowercase the first letter in MyDiv, it looks like this

function myDiv() {
    return (<div><div>)
}
<myDiv></myDiv>

Copy the code

When converted to JS, it becomes

function myDiv() {
  return React.createElement("div".null);
}

React.createElement("myDiv".null);

Copy the code

The dom myDiv cannot be found, so an error is reported.

Afterword.

This is the first in a series of React chat groups. Some of these questions were raised by people who were confused when they first learned React. The next post will answer the following questions. If you have any other questions, feel free to leave them in the comments.

• Why bind this when calling a method

• Why setState instead of this.state.xx = oo

• Why is setState not synchronous

• Why render wrapped with a parent tag (not Fragment before)

I am taoweng, a thinking front-end ER, want to know about more front-end related, please pay attention to my public number: “front-end Taoyuan”, if you want to join the exchange group to follow the public number of “wechat” to pull you into the group