Skip to content

Instantly share code, notes, and snippets.

@adrienjoly

adrienjoly/react-and-jsx-without-build-chain.html

Created March 29, 2024 14:22
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 adrienjoly/5e2d71ac8b1797c3c413bacf3c0615b6 to your computer and use it in GitHub Desktop.
Save adrienjoly/5e2d71ac8b1797c3c413bacf3c0615b6 to your computer and use it in GitHub Desktop.
Download ZIP
Pure/static HTML page that renders a React app (with JSX) and imports components without build chain nor transpilation.
Raw
react-and-jsx-without-build-chain.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.5/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mui/material@5.15.6/umd/material-ui.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-presets="env,react">
function Home() {
return (
<div>
<h1>Hello, world!</h1>
<MaterialUI.Button variant="contained" onClick={() => alert('clicked on button')}>
Click me
</MaterialUI.Button>
</div>
);
}
ReactDOM.render(<Home />, document.getElementById('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment