Skip to content

Instantly share code, notes, and snippets.

@EteimZ

EteimZ/index-jsx.html

Created December 16, 2022 10:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EteimZ/dfee72fd3d2b4ea4f0dde5d5c91fb063 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EteimZ/dfee72fd3d2b4ea4f0dde5d5c91fb063 to your computer and use it in GitHub Desktop.
Download ZIP
Setting up react for use via CDN
Raw
index-jsx.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React-cdn</title>
</head>
<body>
<div id="like-button-root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="./like-button-jsx.js" type="text/babel"></script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React-cdn</title>
</head>
<body>
<div id="like-button-root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="like-button.js"></script>
</body>
</html>
Raw
like-button-jsx.js
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return (
<button onClick={ () => setLiked(true) }>Like</button>
);
};
const rootNode = document.getElementById("like-button-root");
const root = ReactDOM.createRoot(rootNode);
root.render(<LikeButton/>);
Raw
like-button.js
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById("like-button-root");
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment