This is the original: React Tutorial_Getting Started Video

Here is an excerpt from the above:

Summary of react content in Mucho

Base Style

class Hello extends React.Component{
    render(){
        return (
            <div>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

<div class='root'></div>

class Settings

class Hello extends React.Component{
    render(){
        return (
            <div className='className'>Hello World</div><br>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

• class is the key word in React, so use className instead
• The point here is to let you know that setting a class is not a direct form of writing class=', but a form of className='.
• Or you can pass the value of className directly out:

class Hello extends React.Component{
    render(){
        return (
            <div className={this.props.className}>Hello World</div><br>
        );
    }
}

ReactDOM.render(
    <Hello className='the_real_class_name'/>,
    document.getElementById("root")
);

style settings

Style design using css combined with class

It is to set the css style externally, then navigate through the class to the corresponding rendering result.

Inline style:style

class Hello extends React.Component{
    render(){
        return (
            <div style={{color:'red',fontSize:'24px'}}>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

Similar to class, style cannot directly set corresponding properties, but instead needs to be set as an object, which may be better understood by you in the following form:

class Hello extends React.Component{
    render(){
        const styleName={
            color:'red',
            fontSize:'24px'
        };
        return (
            <div style={styleName}>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

life cycle

1. mount
2. update
3. unmount

The functions contained in each of these sections are:

• componentWillMount
• componentDidMount

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

• componentWillUnmount

Event Binding

class Hello extends React.Component{
    handleClick(){
        alert("Button clicked");
    }
    render(){
        return (
            <button onClick={this.handleClick}>Hello World</button>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

Or you can pass in an event parameter that can operate like a native event for javascript, as in the following example:

class Hello extends React.Component{
    handleClick(event){
        alert("Clicked button name Yes:"+event.target.name);
    }
    render(){
        return (
      <div>
        <button name='I am name Attribute 1' onClick={this.handleClick}>Hello World</button>
        <button name='I am name Attribute 2' onClick={this.handleClick}>Hello World Again</button>
      </div>            
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

Evets are passed in as default parameters to handle event s and do not need to be called externally!

Inserted here is a point of knowledge about how to get the DOM node itself, where we are all manipulating the rendering templates, but we are not directly manipulating the DOM object after rendering is complete. Here's how:

class Hello extends React.Component{
    handleClick(event){
        var Real_DOM=React.findDOMNode(this.refs.anyName);
        if(Real_DOM.style.display==='none'){
            Real_DOM.style.display='inline';
        }else{
            Real_DOM.style.display='none';
        }
        alert("Clicked button name Yes:"+event.target.name);
    }
    render(){
        return (
      <div>
        <button name='I am name Attribute 1' onClick={this.handleClick}>Hello World</button>
        <span ref='anyName'>display|hide</span>
        <button name='I am name Attribute 2' onClick={this.handleClick}>Hello World Again</button>
      </div>            
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

I don't know why, the code syntax is not wrong, but the function is not implemented???