This content originally appeared on DEV Community and was authored by Mohsen Mirshahreza
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);
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, nonode_moduleshell, 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
-
Setup: Ensure
index.htmlincludes React, ReactDOM, and Babel Standalone. -
The Loader: Use the
DynamicContentcomponent to load external files.
<DynamicContent url="./my-component.js" context={{ user: 'Alice' }} />
- 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
This content originally appeared on DEV Community and was authored by Mohsen Mirshahreza
Mohsen Mirshahreza | Sciencx (2025-11-18T22:03:51+00:00) Dynamic React: Rendering Remote JSX without a Build Step. Retrieved from https://www.scien.cx/2025/11/18/dynamic-react-rendering-remote-jsx-without-a-build-step/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.