React and JSX on a single HTML page

Introduction #

As much as tools like create-react-app, Next.js, and Gatsby.js have streamlined React development, there are times when setting up an entire project feels like overkill – especially when you just want to test a small idea. While Vite offers a faster alternative, sometimes what you need is the simplest possible setup. This is where crafting a React app within a single HTML page becomes invaluable. It’s quick, straightforward, and lets you test out your ideas in real-time.

Why Opt for a Single HTML Page? #

This approach is particularly useful for:

• Rapid prototyping and testing of React components.
• Learning and experimenting with React and JSX without the overhead of project setup.
• Simplifying your workflow for small-scale experiments.

Setting Up Your React Environment in HTML #

To get started, you need to include Babel for JSX parsing and React and ReactDOM for rendering your app. Also, remember to set type="text/babel" in your script tag to ensure proper parsing of JSX.

Here’s the basic template to kickstart your React app in an HTML file:

<!doctype html>
<html>
    <head>
        <title>React Counter App</title>
        <!-- Load React and ReactDOM from CDN -->
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <!-- Load Babel for JSX parsing -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            const App = () => (
                <div>
                    <h1>Simple React Counter</h1>
                    <Counter />
                </div>
            );

            const Counter = () => {
                const [count, setCount] = React.useState(0);

                const increment = () => {
                    setCount(count + 1);
                };

                const decrement = () => {
                    setCount(count - 1);
                };

                return (
                    <div>
                        <p>Count: {count}</p>
                        <button onClick={increment}>Increment</button>
                        <button onClick={decrement}>Decrement</button>
                    </div>
                );
            };

            ReactDOM.createRoot(document.getElementById('root')).render(
                <App />
            );
        </script>
    </body>
</html>

How Does This Work? #

• React and ReactDOM: These are included via CDN links and are essential for rendering your React components.
• Babel: It’s used here to transpile JSX code in the browser. Though not efficient for production, it’s perfect for quick testing.
• Script Tag: The type="text/babel" attribute ensures your JSX code is correctly interpreted.

The Benefits #

• No Build Required: There’s no need for a build step or watching files.
• Instant Feedback: Changes are reflected immediately in your browser.
• Simplicity: It’s a straightforward way to experiment with React components.

Limitations #

• Not for Production: This method is intended for testing and prototyping, not for production use.
• Performance Overhead: Transpiling JSX in the browser can be slower than precompiled code.

Try It Out! #

I encourage you to use this setup for your next quick React experiment. It’s a great way to learn and test React components on the fly.