React development setup with just a single file!

#react #javascript #webdev

Hi There!

Do you think that the title of this article is a click-bait and that this cannot be actually true? 🤷🏽‍♂️

Well, I used to think the same until a few days back. But then I got to know it is not the case at all. We can develop and code hacky, small-scale react applications without the need for create-react-app or even webpack for that matter.

All you need is a single html file!

Here are the contents of that file:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="kokaneka">
</head>

<body>
  <div id="place-app"> </div>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script type="text/babel">
    var App = (props) => {
            return (
                <div >
                    Hello Universe!
                </div>
            );
        };
        ReactDOM.render(
            App(),
            document.getElementById('place-app')
        );
  </script>
</body>
</html>

And that's it! Using the above file, you can play around with React however you like and open the html file in your browser to view the UI.

Here are the details about the magic happening in this setup

We are using CDN links to import react and react-DOM
We are doing the same for babel.
Write the React component inside of the tag and render in the place of a placeholder div by using getElementById!

And that's it. Let your react development Journey continue. If you liked that, check out some other stuff you might find interesting:

Article No Longer Available

Cheers!

Top comments (6)

Heiker • May 21 '20 • Edited

There's also another way. If you use htm you can skip babel. And with the es-react package you can reduce the boilerplate a little bit.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="your-name-here">
</head>

<body>
  <div id="place-app"> </div>
  <script type="module">
    import { React, ReactDOM } from "https://unpkg.com/es-react";
    import htm from 'https://unpkg.com/htm?module';

    const html = htm.bind(React.createElement); 

    var App = (props) => {
        return html`
            <div>
                Hello Universe!
            </div>
        `;
    };

    ReactDOM.render(App(), document.getElementById('place-app'));
  </script>
</body>
</html>

kapeel kokane • May 21 '20

Nice!

Conrad Sollitt • May 21 '20 • Edited

Nice job Kapeel, many developers are not aware that you can do this.

Another option for this is the DataFormsJS JSX Loader (I'm the author). It's a small (< 6 kb) JSX Compiler and intended for production sites. The JSX Complier falls back to Babel for IE and other old browsers.

The reason I created it was to allow for JSX to be used directly in production sites without the need for Babel Standalone (1.5 MB Download each page) for most users.

Docs:
github.com/dataformsjs/dataformsjs...

Hello World Demo (animated Sun, Moon, Earth):
dataformsjs.com/examples/hello-wor...

Many more React Online Examples:
awesome-web-react.js.org/

Example Code

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>DataFormsJS JSX Loader - Hello World Demo</title>
    </head>
    <body>
        <div id="root" dir="auto"></div>

        <script type="text/babel">
            function App() {
                return (
                    <h1>Hello World!</h1>
                )
            }

            ReactDOM.render(
                <App />,
                document.getElementById('root')
            );
        </script>

        <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.0.1/js/react/jsxLoader.min.js"></script>  
    </body>
</html>
~~~

kapeel kokane • May 22 '20

Wow! From 1.5 MB down to 6 kb sounds awesome! I'd love to check out the repo. Could you give a short summary of what optimizations you are doing to get such a stark size reduction?

Conrad Sollitt • May 23 '20

It's a single 1547 line JavaScript file (source link below) that is a small hand-written compiler for JSX only. It doesn't understand JavaScript at all and only knows how to convert JSX to JS for modern browsers only. For unsupported Browsers (mainly IE 11 and Old Safari/iOS as of 2020) the script then downloads the full 1.5 MB Babel Standalone and uses that instead.

The full file source is actually about 77 kb however when using the *.min.js file and gzipped it's down to about 5.7 kb.

I’ve been planning on sharing it on dev.to but haven’t been able to make the time for it yet. Hopefully soon or perhaps if other people see this they might want to try it out and write about it.

Source Code
github.com/dataformsjs/dataformsjs...