Write react when their own look

Write react when a small sense of enlightenment

Interface is to write a first time to sort out ideas, reasonable slowly on the right

So the question becomes how the idea first it clear rationale for example, such as to write such an interface

For that it is something so simple, click on the switch

So how come the idea of ​​it?

First, look at the overall

Not that the top line of the display text

A button below it

The first step was to show two things, one is a line of text, a button is

class MainDiv extends React.Component {
        render() {
            return (
                <div>
                    <Message  />
                    <button>
                    </button>
                </div>
            );
        }
    }

  
    ReactDOM.render(
        <MainDiv/>,
        document.getElementById('example')
    );

Overall build out, then the following is to show specific things

First think about things will move, then click or on the move, is not that and onClick about it?

Then you can bind directly to the onClick

If you can think of direct and dynamic then you must have a logo flag that can be placed directly in the state assembly

Button and the contents may be directly determined by the flag

class MainDiv extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                flag: true
            };
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.setState({
                flag: !this.state.flag
            });
        }

        render() {
            return (
                <div>
                    <Message flag={this.state.flag} />
                    <button onClick={this.handleClick}>
                        {this.state.flag ? '登录': '退出'}
                    </button>
                </div>
            );
        }
    }

    function Message(props) {
        if(props.flag) {
            return (
                <h1>Register</h1>
            );
        }
        return (
            <h1>Hello Welcome</h1>
        );
    }
    ReactDOM.render(
        <MainDiv/>,
        document.getElementById('example')
    );

So in the end came out the code