Skip to content

Instantly share code, notes, and snippets.

@ramybenaroya

ramybenaroya/index.html

Created November 7, 2022 13:57
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 ramybenaroya/026be53030b220e4e39dd1099d220048 to your computer and use it in GitHub Desktop.
Save ramybenaroya/026be53030b220e4e39dd1099d220048 to your computer and use it in GitHub Desktop.
Download ZIP
React with Babel Standalone
Raw
index.html
<html lang="en" version="1.0.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>React with Babel Standalone</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div id="root"></div>
<script description="App Component" type="text/babel">
const { useState } = React;
const App = () => {
const [count, setCount] = useState(0);
return (
<div>
<h3>{count}</h3>
<button onClick={() => setCount(c => ++c)}>Increment</button>
<button onClick={() => setCount(c => --c)}>Decrement</button>
</div>
);
};
</script>
<script description="Rendering" type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment