React: Learn the basics of react grammar in three minutes

The following code executes under the React scaffolding environment

Style to deal with

import React from 'react'
import ReactDOM from 'react-dom'
import "./index.css"
//1. Set the style
const name = "Wang"
const styleObj = {width:200.height:200.backgroundColor:'pink'}
const element =(
    <div>
        <h1>Style handling {name}</h1>
        <div style={styleObj}>I am the style control box</div>
        <div className="box">I'm a className controlled box</div>
    </div>
)
ReactDOM.render(element, document.getElementById('root'))
Copy the code

//index.css
.box {
    width: 200px;
    height: 200px;
    background-color: blue;
}
Copy the code

Function component

import React from 'react'
import ReactDOM from 'react-dom'
function Hello() {
    return <button>Hello button</button>
}
// If the function does not return anything, please return null
const element = (
    <div>
        <h1>Function component</h1>
        <Hello></Hello>
        <Hello></Hello>
        <Hello></Hello>
        <Hello></Hello>
    </div>
)
ReactDOM.render(element, document.getElementById('root'))
Copy the code

Basic use of class

import React from 'react'
import ReactDOM from 'react-dom'
/**function Person(name,age) { this.name = name this.age = age } Person.prototype.sayHi = function () { Console. log(" hello, hello, this. Name ")} const p1 = new Person("老李",20) const p2 = new Person("老李", 18) console.log(p1,p2)*/
// Method call pattern,this refers to whoever calls this method
/**p1.sayHi()
p2.sayHi()*/
// If there are too many methods on the prototype, it is difficult to maintain
/** What is a class: a set of transactions from which concrete objects can be created */
class Person {
    // Class constructor => constructor
    constructor(name,age) {
        this.name = name
        this.age = age
        // console.log(111) 
    }
    // In a class, you can provide methods to all instances.
    sayHi() {
        console.log("Lady gaga")}run() {
        console.log("Run")}}const p1 = new Person("zs".18)
const p2 = new Person("ls".20)
console.log(p1,p2)
p1.run()
p2.sayHi()

const element = (
    <div>
        <h1>Class components</h1> 
    </div>
)
ReactDOM.render(element, document.getElementById('root'))
Copy the code

Extends the practice

class Animal {
    constructor(name,age) {
        this.name = name
        this.age = age
    }
    eat() {
        console.log("Can eat")}}/**const obj = new Animal("小 black ",2) console.log(obj) obj.eat()*/
/**class Dog { constructor(name,age,color) { this.name = this.name this.age = age this.color = color } eat() { The console. The log (" eat ")} lookHouse () {the console. The log (" housekeeping ")}} * /
class Dog extends Animal {
    constructor(name,age,color) {
        // When a subclass adds its own attribute, it first executes the function constructed by the parent class
        super(name,age)
        this.color = color
    }

    // Add methods to the prototype
    lookHouse() {
        console.log("Watch the house.")}eat() {
        console.log("Big bite.")}}const erHa = new Dog("Hello".2."White")
console.log(erHa)
erHa.eat()
erHa.lookHouse()

Copy the code

Class to inherit a little exercise

class Animal {
    constructor(name,age) {
        this.name = name
        this.age = age
    }
    eat() {
        console.log("Can eat")}}class Bird extends Animal{
    constructor(name,age,type) {
        super(name,age)
        this.type = type
       /**this.desc = "there are a lot of feathers" this.weigt = "Generally light" */ 
    }
    desc = "A lot of feathers."
    weigt = "Generally lighter."
    fly() {
        console.log("Flying")}}const xn = new Bird("Little Feifei".2."The eagle")
console.log(xn)
xn.fly()

Copy the code

Basic syntax for class components

import React from 'react'
import ReactDOM from 'react-dom'
// Function components
function Hello() {
    return <div>I'm the Hello component</div>
}
/ / class components
class Demo extends React.Component{
   render() {
       return <div>I'm a Demo class component</div>}}const element = (
    <div>
        <h1>component</h1>
        <Hello></Hello>
        <Demo></Demo>
    </div>
)
ReactDOM.render(element, document.getElementById('root'))
Copy the code

Split components into separate files

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './components/hello'
import Demo from './components/demo'
const element = (
    <div>
        <h1>component</h1>
        <Hello></Hello>
        <Demo></Demo>
    </div>
)
ReactDOM.render(element, document.getElementById('root'))
Copy the code

/ / Hello components
import React from 'react'

class Hello extends React.Component{
    render() {
        return <div>I'm the Hello component</div>}}export default Hello
Copy the code

/ / the Demo components
import React from 'react'
// Function components
const Demo = () = >{
   return <div>I'm a function component</div>
}
export default Demo
Copy the code

The state of the class component

import React from 'react'
import ReactDOM from 'react-dom'
const name = "Hey hey"
class App extends React.Component{
    constructor() {
        super(a)// The data in the state has changed and can be tried to update automatically. The data should be added to the state
        this.state = {
           msg:"Lady gaga"
        }
        this.money = 100
    }
    render() {
        // In the render function, this points to the current instance by default
        return <div>{this.state. MSG}-{this.money}-{name}</div>
    }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Short for class component state

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        msg:"Lady gaga"
    }
    money = 100
    render() {
        return <div>-{this.state. MSG}-{this.money}</div>
    }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Install and test the React plugin

// I downloaded the react plugin in the minimalist plugin
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        msg:"Lady gaga".money:100.count:200
    }
    desc = "Good"
    money = 100
    render() {
        return <div>-{this.state. MSG}-{this.money}-{this.state. Count}</div>
    }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Register click events

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
         msg:"I am MSG"
    }
   render() {
       return  (
       <div>
           <h1>Event registration</h1>
           <button onClick={this.handleClick} onMouseEnter={this.handleEnter}>Change the value</button>
           <p>{this.state.msg}</p>
       </div>)}handleClick() {
    // console.log(" hey hey hey ")
    /**this.state.msg = "heihei"*/
    console.log(this)}handleEnter() {
    // console.log(" You entered the button ")
   }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

The event handles the problem of this

import React from 'react'
import ReactDOM from 'react-dom'
const obj = {
    name:"I am obj".fn() {
        console.log(this)}}// obj.fn()
const temp = obj.fn
// The modular environment will not let you point to the window
temp()
class App extends React.Component{
    state = {
         msg:"I am MSG"
    }
   render() {
       console.log(this)
       return  (
       <div>
           <h1>The event processing</h1>
           <button onClick={this.handleClick} onMouseEnter={this.handleEnter}>Change the value</button>
           <p>{this.state.msg}</p>
       </div>)}handleClick() {
    console.log(this)}handleEnter() {
    // console.log(" You entered the button ")
   }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Change this by using the arrow function

import React from 'react'
import ReactDOM from 'react-dom'
/ * * const obj = {name: "I am the obj", fn () {the console. The log (this)}} * /
/** // obj.fn() const temp = obj.fn // The modular environment will not let you point to window Temp ()*/
class App extends React.Component{
    state = {
         msg:"I am MSG"
    }
   render() {
    // console.log(this)
       return  (
       <div>
           <h1>The event processing</h1>
           <button 
        //    onClick={()= >{// console.log(this) // console.log(123) //}} onClick={() => this.handleclick ()} onMouseEnter={this.handleEnter}> Change value</button>
           <p>{this.state.msg}</p>
       </div>)}handleClick() {
    console.log(this)}handleEnter() {
    // console.log(" You entered the button ")
   }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Bind solves the this pointing problem

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    // constructor() {
    // super()
    // this.handleClick = this.handleClick.bind(this)
    // }
    state = {
         msg:"I am MSG"
    }
   render() {
       return  (
       <div>
           <h1>The event processing</h1>
           <button 
           onClick={this.handleClick.bind(this)}
           onMouseEnter={this.handleEnter()}>Change the value</button>
           <p>{this.state.msg}</p>
       </div>)}handleClick() {
    console.log(123)
    console.log(this)}handleEnter() {
       console.log("You entered the button.")
   }
}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Modify the this pointer through the class instance method

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    state = {
         msg:"I am MSG"
    }
    handleClick = () = > {
        console.log(123)
        console.log(this)}render() {
       return  (
       <div>
           <h1>The event processing</h1>
           <button 
           onClick={this.handleClick.bind(this)}
          >Change the value</button>
           <p>{this.state.msg}</p>
       </div>
    )
   }
  

}

ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code