obernardovieira/react_in_html_with_jsx.html

## react_in_html_with_jsx.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>Hello World</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

	<!-- Don't use this in production: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
	<div id="root"></div>
	<div id="like_button_container"></div>
	<script type="text/babel">

		ReactDOM.render(
			<h1>Hello, world!</h1>,
			document.getElementById('root')
		);

	</script>
	<script type="text/babel">
		class Hello extends React.Component {
			render() {
				return (
					<div>Hello</div>
				);
			}
		}

	</script>
	<script type="text/babel">
		class LikeButton extends React.Component {
			constructor(props) {
				super(props);
				this.state = { liked: false };
			}

			render() {
				if (this.state.liked) {
					return 'You liked this.';
				}

				return (
					<div>
						<Hello />
						<button onClick={() => this.setState({ liked: true })}>
							Like
						</button>
					</div>
				);
			}
		}
		ReactDOM.render(
			<LikeButton />,
			document.getElementById('like_button_container')
		);

	</script>
	<!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8" />
	<title>Hello World</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

	<!-- Don't use this in production: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	</head>

	<body>
	<div id="root"></div>
	<div id="like_button_container"></div>
	<script type="text/babel">

	ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('root')
	);

	</script>
	<script type="text/babel">
	class Hello extends React.Component {
	render() {
	return (
	<div>Hello</div>
	);
	}
	}

	</script>
	<script type="text/babel">
	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}

	render() {
	if (this.state.liked) {
	return 'You liked this.';
	}

	return (
	<div>
	<Hello />
	<button onClick={() => this.setState({ liked: true })}>
	Like
	</button>
	</div>
	);
	}
	}
	ReactDOM.render(
	<LikeButton />,
	document.getElementById('like_button_container')
	);

	</script>
	<!--
	Note: this page is a great way to try React but it's not suitable for production.
	It slowly compiles JSX with Babel in the browser and uses a large development build of React.

	Read this section for a production-ready setup with JSX:
	https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

	In a larger project, you can use an integrated toolchain that includes JSX instead:
	https://reactjs.org/docs/create-a-new-react-app.html

	You can also use React without JSX, in which case you can remove Babel:
	https://reactjs.org/docs/react-without-jsx.html
	-->
	</body>

	</html>