Skip to content

Instantly share code, notes, and snippets.

@mikaello

mikaello/jsx-in-html.html

Last active May 22, 2019 07:51
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 mikaello/9308e83986a43b3a8bbc11c559b043c0 to your computer and use it in GitHub Desktop.
Save mikaello/9308e83986a43b3a8bbc11c559b043c0 to your computer and use it in GitHub Desktop.
Download ZIP
Write JSX in HTML file
Raw
jsx-in-html.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<!--
Credit: https://twitter.com/sophiebits/status/1129824393155080192
Also worth checking out: https://www.pikapkg.com/
-->
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
const PartyComponent = props => {
const [title, setTitle] = React.useState(props.title);
return <div onClick={() => setTitle(title.toUpperCase())}>{title}</div>;
};
ReactDOM.render(
<PartyComponent title="Join the party!" />,
document.getElementById('root'),
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment