React and JSX on a single HTML page

Wed, Jan 24, 2024 2-minute read

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/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom/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.

Git Forked