Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<meta charset="UTF-8" />
<script src=""></script>
<script src=""></script>
<!-- Don't use this in production: -->
<script src=""></script>
body {
font-family: sans-serif;
background-color: #282c33;
color: #6cdaf7;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 1.5em; text-align: center;
margin: 0 auto;
a {
color: #b1b3b5;
text-decoration: none;
<!-- Global site tag (gtag.js) - Google Analytics -->
window.dataLayer = window.dataLayer || [];
function gtag() {
gtag("js", new Date());
gtag("config", "UA-78587148-2");
<h1>Are React Hooks Ready?</h1>
<div id="root">Loading ......</div>
<script type="text/babel">
setTimeout(() => {
const message = React.useState ? "HOOKS ARE READY!" : "NOT READY YET!";
const version = React.version;
const App = (
<p>Current stable version: {version}</p>
<a href="">@chrislaughlin</a>
<a href="">
ReactDOM.render(App, document.getElementById("root"));
}, 2000);
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:
In a larger project, you can use an integrated toolchain that includes JSX instead:
You can also use React without JSX, in which case you can remove Babel: