Skip to content

Instantly share code, notes, and snippets.

@voronianski

voronianski/simple-react-playground.html

Last active April 6, 2024 16:59
Show Gist options
  • Save voronianski/f67f4973687434f474b4 to your computer and use it in GitHub Desktop.
Save voronianski/f67f4973687434f474b4 to your computer and use it in GitHub Desktop.
Download ZIP
Quick React prototyping in browser on the fly with ES2015. Use this as boilerplate for your playground and upload html file on some server. Created as a solution for this challenge - http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html with the help of https://github.com/voronianski/babel-transform-in-…
Raw
simple-react-playground.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>React Quick Prototyping</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-transform-in-browser/0.1.0/btib.min.js"></script>
<script type="text/es2015">
// YOUR PLAYGROUND CODE GOES HERE
// EXAMPLE:
function App ({ title }) {
return (
<div>{title}</div>
);
}
ReactDOM.render(
<App title="Hello World" />,
document.getElementById('root')
);
</script>
</body>
</html>
@curran
Copy link

curran commented Nov 24, 2021

Sharable: I want to be able to share it with a url without any extra step. No git push heroku master or git push gh-pages.

How is this running now? The Gist lets you see the source code, sure, but where to view the running program?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment