Skip to content

Instantly share code, notes, and snippets.

@abelsan

abelsan/index.html

Created August 10, 2020 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abelsan/b512762672968c890c9a7aad54007246 to your computer and use it in GitHub Desktop.
Save abelsan/b512762672968c890c9a7aad54007246 to your computer and use it in GitHub Desktop.
Download ZIP
Standalone React Component
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Testing React</title>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Testing Page</h1>
<!-- We will put our React component inside this div. -->
<div id="root"></div>
<!-- Load React. -->
<script src="https://unpkg.com/react/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="myComponent.js" defer type="text/babel"></script>
</body>
</html>
Raw
myComponent.js
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment