Skip to content

Instantly share code, notes, and snippets.

@RickWong

RickWong/react.html

Last active April 20, 2021 15:48
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save RickWong/dd2a0aba86699ded4cc295d84601d540 to your computer and use it in GitHub Desktop.
Save RickWong/dd2a0aba86699ded4cc295d84601d540 to your computer and use it in GitHub Desktop.
Download ZIP
Write React apps in 1 HTML file.
Raw
react.html
<html>
<body>
<div id="react-root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script id="react-app" type="text/template">
const App = ({name}) => {
return <h1>Welcome to Redux, {name}</h1>;
};
ReactDOM.render(<App name="World" />, document.getElementById("react-root"));
</script>
<script>
eval(Babel.transform(document.getElementById("react-app").innerHTML, {presets: ['es2015', 'react']}).code);
</script>
</body>
</html>
@RickWong
Copy link
Author

RickWong commented May 3, 2016

Demo: https://htmlpreview.github.io/?https://gist.githubusercontent.com/RickWong/dd2a0aba86699ded4cc295d84601d540/raw/ba9aaaa96e93567cf4c6ca193b254eebb6e07efa/index.html

@BDiehr
Copy link

BDiehr commented May 8, 2016

Can you add support for hot reloading?

@RickWong
Copy link
Author

RickWong commented May 9, 2016

Hot reloading is not possible with this setup. You could use Redux + localStorage to persist some of your data. I use this setup only for small demos and quick React prototypes, where state management and performance aren't part of the main focus.

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