https://github.com/arniebradfo/template-nobuild-react-jsx
Run a react 19 app with jsx in the browser - no build
https://github.com/arniebradfo/template-nobuild-react-jsx
babel-standalone buildless bundleless esm jsx react service-worker
Last synced: 3 months ago
JSON representation
Run a react 19 app with jsx in the browser - no build
- Host: GitHub
- URL: https://github.com/arniebradfo/template-nobuild-react-jsx
- Owner: arniebradfo
- Created: 2025-07-15T18:51:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-16T19:30:16.000Z (3 months ago)
- Last Synced: 2025-07-16T23:49:59.847Z (3 months ago)
- Topics: babel-standalone, buildless, bundleless, esm, jsx, react, service-worker
- Language: JavaScript
- Homepage: https://arniebradfo.github.io/template-nobuild-react-jsx/
- Size: 22.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# No-Build React JSX Demo
A minimal React application that runs JSX directly in the browser without any build tools or compilation step.
## How It Works
- **Import Maps**: Loads React 19 directly from esm.sh CDN
- **Babel Transpilation Service Worker**: Intercepts `.js` and `.jsx` file requests and transpiles JSX to JavaScript using Babel standalone
- **ES Modules**: Uses native browser module support for component imports
- **Real-time Transpilation**: JSX is transformed on-the-fly in the browser
- **Deferred App Loading**: The React app is loaded only after the service worker is ready, ensuring all JSX is handled correctly
> Important! Only `.jsx` files are transpiled by babel. `.js` files are not transpiled.
## Project Structure
```
index.html # Entry point with importmap and service worker
service-worker.js # Service worker entry point
runtime/
├── register-service-worker.js # Service worker registration and startup logic
├── babel-react-jsx.js # Babel JSX transpilation engine
└── app-loader.js # Loads and bootstraps the React app after SW is ready
components/
├── App.jsx # Main app component
└── HelloWorld.jsx # Example child component
```
## Execution Flow
The application follows a carefully orchestrated startup sequence to ensure JSX transpilation is available before any JSX files are loaded:
1. **`index.html`** - Entry point with React importmap and service worker registration
2. **`register-service-worker.js`** - Registers and waits for service worker to be controlling the page
3. **`service-worker.js`** - Service worker entry point that imports the Babel transpiler. This *must* be in the root directory to have proper scope access
4. **`babel-react-jsx.js`** - Sets up Babel standalone and handles JSX => JS transformation
5. **`app-loader.js`** - Loads React and imports JSX components (only after SW is ready)
6. **`App.jsx`** - Main React application with JSX syntax
## Usage
1. Serve the files from an HTTP server (required for service workers, won't work with `file://` protocol)
2. Open `index.html` in a **modern** browser with ES modules and service worker support
3. The system will automatically follow the execution flow to set up JSX transpilation and load the React app
## Service Worker & Hard Refresh
**Hard/force refresh (Ctrl+F5, Cmd+Shift+R, etc.)** will [temporarily disable service workers](https://stackoverflow.com/a/49076667/5648839) and cache in modern browsers. The app detects this and will automatically reload the page after a short delay to re-enable the service worker. This is a browser security feature and not a bug.
## Features
✅ No build tools or compilation step
✅ No npm install required
✅ Real-time JSX transpilation
✅ Modern React 19 with createRoot API
✅ ES module imports
✅ Works on first page load
Perfect for prototyping, learning, or minimal React demos!