Last active
April 20, 2021 15:48
-
-
Save RickWong/dd2a0aba86699ded4cc295d84601d540 to your computer and use it in GitHub Desktop.
Write React apps in 1 HTML file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
Can you add support for hot reloading?
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
Demo: https://htmlpreview.github.io/?https://gist.githubusercontent.com/RickWong/dd2a0aba86699ded4cc295d84601d540/raw/ba9aaaa96e93567cf4c6ca193b254eebb6e07efa/index.html