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
  • Star 15 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • 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>
@voronianski
Copy link
Author

  • No setup: I'm happy to have to setup something initially (dedicated server, apache, php...) but nothing should be required to create a new project. No npm install, react-native init, creating a github project, yo webapp...
  • DONE You can use any server you want to serve static html file.
  • One file: I want to write a single js file to start with. No package.json, no .babelrc, no Procfile...
  • DONE But let's do this in html file instead.
  • 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.
  • DONE
  • Keeps working: Once online, it should stay there and keep working 6 months later. No npm start to run it, no special port that's going to conflict with my 10 other prototypes...
  • DONE
  • Not generic: I don't care about it being generic, I will use whatever transforms you decided. Happy to write js without semi-colons and using SASS for my CSS if you checked all the boxes above.
  • DONE Though SASS/LESS is not included it's a question about next "transform-in-browser" script.
  • Not prod-ready: This setup doesn't have to be prod-ready, support unit testing or anything that involves it being a real product. This is meant for hacking on stuff. When the project becomes good, I'll spend the time to add all the proper boilerplate.
  • DONE

@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