Environment set up

01 Project environment construction

Creat-react -app creat-react-app react_demo01 CD./reacr_demo01 YARN start By default, yarn is used to start the projectCopy the code

JSX basic syntax

02 begins writing the first JSX code

As long as we're using React, we have to use react and Component components in our files. By building classes, we can inherit component to create a component internallyreturnBecause it's using JSX syntax, it's actually converting the HTML to the dorm tree structure. Note that there can only be one parent node. In JSX, you can only write any JS code with {} curly braces including variables, ## Only one root node can be used ## You can edit js code with curly braces ## JSX becauseclass 和 forAre all keywords that cannot be directly written need to be usedclassName 和htmlForIn place of ## any other attribute can be set injsxWrite the ## element variable in the templatelet doma  = <div>ceshi</div>
        let dom2 = <h2>ss</h2>You can directly assign dom nodes to variables as function parameters and return values ## use to batch insert nodes need to use the map function to handle, because the map function is to return a new arrayCopy the code

Component 03 can be used directly in another component’s JSX

event

04 Event Binding

React uses onClick, onChange, and addEventListener to bind events directly instead of using addEventListener to bind events directly. Note that the names of these events are named according to their hump -- unlike the native event binding namesCopy the code

Use constructor to create a constructor

constructorFunctions are the default basis for existencees6The inheritance rule is in usenewThe internal constructor is called by default when the keyword is usedconstructorIt's ok to have a function and not declare it but once you declare itconstructorThe function has to be called inside the functionsuper() methodCopy the code

Bind this to

When calling a function directly without retrieving the object itself, you need to explicitly bind the reference to this.

Ex. :this.change.bind(this)
Copy the code

Code sample

class StateChange extends Component {
  constructor(props) {
    super(props)
    // Perform initialization assignment
    this.state = { 
      idLinked: false.count: 12 
    }
    this.name = 'zhgl'
    this.count = 12
  }
  clickBtn () {
    this.setState({
      idLinked:!this.state.idLinked
    })
  }
  addCount(){
   // this.state.count = this.state.count+1
      this.setState({
        count: this.state.count = this.state.count+1
      })
  }
  render () {
    return (
      <div>
        <div>
            <button onClick={this.clickBtn.bind(this)}>change</button>  
            {this.state.idLinked===true?<span>determine</span>:<span>cancel</span>}
        </div>
        <div> 
            <button onClick={this.addCount.bind(this)}>add</button>
            {<span>{this.state.count}</span>}
        </div>
        
      </div>)}}Copy the code

Component parameters

07 Component parameter transmission Parent component parameter transmission, you can directly define the parameters to be passed on the component. Or the method child can use this.props. PropertyName or this.props. FunctionName directly. When passing a method, we can bind some triggered events internally to trigger the method passed by the parent indirectly

Component lifecycle functions

ComponentWillMount componentDidMount componentWillUnmount is triggered when a component is about to be unmounted ShouldComponentUpdate (nextProps, nextState) : You can use this method to control whether or not the component is rerendered. The component will not be rerendered if false is returned. This lifecycle is useful for react.js performance optimization. ComponentWillReceiveProps (nextProps) : component from the parent component receives the call before the new props. ComponentWillUpdate () : Called before the component begins rerendering. ComponentDidUpdate () : Called after the component is rerendered and changes are made to the real DOM. If you are interested in the lifecycle of this update phase you can check out the documentation on the official website.

 import React,{Component} from 'react'

class Header extends Component {
  // when the component is about to be rendered
  componentWillMount(){
    console.log('Component triggered before mounting')}componentDidMount(){
    console.log('Component triggered after mount')}render(){
    return(<div>header</div>)}componentWillUnmount(){
    console.log('Triggered when component is about to be uninstalled')}}Copy the code

Dom operations in components

In React. Js, the ref attribute is provided to obtain the mounted DOM node. For example, the input box is required to automatically obtain the focus when entering the page

class AutoFous extends Component{
  // Triggered when the component is mounted
  componentDidMount(){
    // The input box automatically focuses
    this.input.focus()
  }
  constructor(props){
    super(props)
  }
  render(){
    return(<input ref={(input)= >this.input=input}/>)}}// Use on components to get instance objects of components
<Clock ref={(clock) = > this.clock = clock} />
Copy the code

10 Passing dom to a component Recall that we learned how to pass parameters to a parent component (e.g. There is also a way to pass parameters to the component without binding parameters to the component tag, and to write the associated embedded structure in the component tag using this.props. Children, A DOM node is inserted into the component in a vue like slot

/ / the parent component
<Card><div>The parent component</div></Card>
/ / child component
import React,{Component} from 'react'
  
class Card extends Component{
  render(){
    /** * Get nodes inside components */ like slots
    return(
      <div className="card">Card component {this. Props. Children}</div>)}}export default Card
Copy the code