mike-pete/react.html

## react.html
<html>
    <head>
        <!-- https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4 -->
        <script src="https://unpkg.com/react@15/dist/react.min.js"> </script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- react components will go here -->
        </div>

        <script type="text/babel">
            const getById = x => document.getElementById(x)

            // this component uses a prop
            class PropExample extends React.Component {
                render = () => <h1>prop {this.props.message}!</h1>
            }


            // this component uses a state
            class StateExample extends React.Component {
                state = { message: 'state example' }
                onClick = () => this.setState({ message: 'tada' })

                render = () => (
                    <div>
                        <h1>{this.state.message}</h1>
                        <button onClick={this.onClick}>change state</button>
                    </div>
                )
            }


            // this wraps all the components for the page
            const Root = () => (
                <div>
                    <PropExample message="example" />
                    <StateExample />
                </div>
            )


            // render the components
            ReactDOM.render(
                <Root/>,
                getById('root')
            );

        </script>
    </body>
</html>
	<html>
	<head>
	<!-- https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4 -->
	<script src="https://unpkg.com/react@15/dist/react.min.js"> </script>
	<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
	<div id="root">
	<!-- react components will go here -->
	</div>

	<script type="text/babel">
	const getById = x => document.getElementById(x)

	// this component uses a prop
	class PropExample extends React.Component {
	render = () => <h1>prop {this.props.message}!</h1>
	}



	// this component uses a state
	class StateExample extends React.Component {
	state = { message: 'state example' }
	onClick = () => this.setState({ message: 'tada' })

	render = () => (
	<div>
	<h1>{this.state.message}</h1>
	<button onClick={this.onClick}>change state</button>
	</div>
	)
	}



	// this wraps all the components for the page
	const Root = () => (
	<div>
	<PropExample message="example" />
	<StateExample />
	</div>
	)


	// render the components
	ReactDOM.render(
	<Root/>,
	getById('root')
	);

	</script>
	</body>
	</html>