React Dynamic Code & HTML Loader

This project demonstrates a lightweight approach to loading and rendering React components dynamically from external files directly in the browser, without requiring a traditional build step (like Webpack or Vite).

Features

• No Build Step: Uses Babel Standalone to compile JSX in the browser.
• Dynamic Loading: Fetches external .html or .js files containing JSX and renders them.
• Tailwind CSS & Flowbite: Integrated for styling.
• Error Handling: Graceful error display for failed loads or render errors.

Project Structure

• index.html: The main entry point. Loads React, Babel, Tailwind, and the application scripts.
• dynamic-loader.js: Contains the DynamicContent component which handles fetching, compiling, and rendering external code.
• root-component.js: The root React component that uses DynamicContent to load other parts of the UI.
• assets/: Contains vendor libraries (React, Babel, Tailwind, Flowbite).

How to Run

Since this project uses fetch to load external files, it must be served via a web server (opening index.html directly from the file system will likely fail due to CORS policies).

You can use any static file server. For example:

Using Node.js (npx)

npx serve

Using Python

python -m http.server

Then open your browser to the provided URL (usually http://localhost:3000 or http://localhost:8000).