DEV Community

Discussion on: React development setup with just a single file!

View post
Collapse
 
conradsollitt profile image
Conrad Sollitt • • 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>
Collapse
 
kokaneka profile image
kapeel kokane •

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?

Collapse
 
conradsollitt profile image
Conrad Sollitt •

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...