DEV Community

Mohsen Mirshahreza
Mohsen Mirshahreza

Posted on

Dynamic React: Rendering Remote JSX without a Build Step

#react #buildless #dynamic

Dynamic React: Rendering Remote JSX without a Build Step

Introduction

Modern React development is often synonymous with complex build pipelines involving Webpack, Vite, or Rollup. While these tools offer optimization, they introduce a significant barrier to entry and rigidity. This project, ReactDynaCodeDynaHtml, demonstrates a powerful alternative: loading, compiling, and rendering React components dynamically in the browser at runtime.

Core Techniques

1. In-Browser Compilation with Babel Standalone

Instead of pre-compiling JSX, this project utilizes babel.min.js (Babel Standalone). This library runs entirely in the browser, transforming JSX syntax into standard JavaScript that the browser can execute on the fly.

2. Dynamic Fetching

The application uses the standard fetch API to retrieve component code (stored in .html or .js files) as plain text strings. This allows components to be stored remotely or locally and loaded only when needed.

3. Scoped Execution via new Function

The heart of the system is the DynamicContent loader. Once the code is fetched and transformed by Babel, it is executed using the new Function constructor.

const func = new Function('React', ...contextKeys, funcBody);
Enter fullscreen mode Exit fullscreen mode

This technique allows us to:

  • Inject dependencies (like React) explicitly.
  • Pass props and context variables dynamically.
  • Isolate the component's scope to prevent global namespace pollution.

Advantages

  • Zero Build Configuration: No npm run build, no node_modules hell, and no complex config files.
  • Hot-Swappable Architecture: You can update a component file on the server, and clients will see the change immediately upon refresh without redeploying the entire application.
  • Runtime Flexibility: Ideal for CMS-like structures where layout or logic needs to be defined by the backend or changed frequently.
  • Rapid Prototyping: Excellent for quick experiments or adding React to legacy applications without a full rewrite.

How to Use

  1. Setup: Ensure index.html includes React, ReactDOM, and Babel Standalone.
  2. The Loader: Use the DynamicContent component to load external files. 
   <DynamicContent url="./my-component.js" context={{ user: 'Alice' }} />
Enter fullscreen mode Exit fullscreen mode
  1. Component Files: Write standard React functional components in your external files. They should return the JSX element directly.

Conclusion

While not a replacement for build steps in massive, performance-critical applications, this "No-Build" approach offers unmatched flexibility for dynamic content, plugin systems, and lightweight integrations.

Source Code
You can find the complete source code for this project on GitHub: https://github.com/mirshahreza/ReactDynaCodeDynaHtml

Top comments (1)

Collapse
 
mashraf_aiman_b9a968e5c1d profile image
Mashraf Aiman •

This is a brilliant approach!!! As someone building AI-powered SaaS tools where content, UI blocks, and even entire workflows need to update dynamically, the idea of loading JSX at runtime without a build step is insanely useful.

The CMS-like flexibility you described matches a lot of what I’m experimenting with in my own projects. especially around creating “live-editable” components and instant prototyping for users.

The scoped execution + Babel Standalone combo is such a clever balance between power and simplicity. Definitely trying this out for a dynamic UI system I’m building right now.

Starred the repo. excited to explore more of this!