DiscoverReact-Examples/Eg2-State.html

<html>
    <head>
    <!-- Modules to run React -->
        <!-- module to get React elements, mostly components -->
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <!-- module to render react elements into the web page -->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- module to use RJX and ES6 -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--just to add some nice looking :) -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <!-- where react elements will be rendered -->
        <div id="root"></div>

        <script type="text/babel">
            /* React component with a "State" **********************************************/
            /* State change will trigger the refresh of the component */
            class MyComponent extends React.Component {              
                constructor(){
                    super();
                    this.state = {
                        message: "Hello (from state)"
                    };
                    this.updateMessage = this.updateMessage.bind(this);
            }

            /* function to change the state */
            updateMessage() {
                this.setState({
                    message: "Hello (from changed state)"
                });
            }    

            /* every react component must have a render method to define the UI */
            render() {
                    return (
                        <div>
                            <h1>{this.state.message}!</h1>
                            <button onClick={this.updateMessage}>Click me!</button>
                        </div>   
                    )
                }
            }

            /* Rendering the React component into the DOM ****************************/
            ReactDOM.render(
                <MyComponent />, 
                document.getElementById("root")
            );
        </script>
    </body>
</html>