Recently, I have nothing to do to learn the React framework by myself. In the process of self-study, all the problems and experiences will be recorded here. I hope that they can help the students who learn the React framework. I don't talk much about the code.
First, father to son:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "I come from the parent component"  //This is also the parent-child method. Maybe beginners are a little confused. At the beginning, I also used it to distinguish with arr = {this.state.arr}
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />                    
        </header>
        <Com1 age="David" arr={this.state.arr} fn={this.foo}/>
      </div>
    );
  }
}
export default App;

Sub components:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           <div>
               <h1>Hello, {this.props.age}</h1>
               <p>{this.props.fn}</p>
               <ul>
                    {
                        this.props.arr.map(item => { //This place receives the ARR from the parent component through this.props.arr, and then runs the js loop in {}
                            return (
                                <li key={item.userName}>
                                    {item.userName} Commentary is:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
           </div>
        );
    };
}

export default Ele;

The results show that:

The above is the method of passing from parent to child, mainly using props to pass values. Let's see the method of passing from child to parent

Son Chuan father:
First, the sub components:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "I'm from subcomponent"
       })  
    };
    clickFun(text) {  //Define how to trigger
        this.props.pfn(text)//This place passes the value to the props event
    }
    render(){
        return (
           <div>               
                {/* Pass values through events. If you want to get an event, you can add an event at the end of the parameter,
                This, this, this */}
                <button onClick={this.clickFun.bind(this, this.state.childText)}>
                    //Pass value
                </button>
           </div>
        );
    };
}

export default Ele;

Parent component:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "Now the parent component",     
  };
  fn(data) {
    this.setState({
        parentText: data //Replace parentText in the parent component with the value passed by the child component
    },() =>{
       console.log(this.state.parentText);//setState is an asynchronous operation, but we can operate in its callback function
    });
  };
  render() {
    return (
      <div className="App">
        <Com1 pfn={this.fn.bind(this)}/> {/*You must remember. bind(this) when you perform value operation by binding events. Otherwise, an error will be reported. Remember that the direction of this has changed when you pass events */}
        <p>text is {this.state.parentText}</p>
      </div>
    );
  }
}
export default App;

The above is the method of parent-child component value transfer. If there is something wrong, please correct it
There are also brother components whose values have not been learned, and brother components whose values have been learned will be updated
Source address:
https://github.com/Nick091608... Welcome star