Learn how to write and render React components without JSX.
Why Render Without JSX?
- No build step: Useful in environments where Babel or a build tool isn’t available.
- Dynamic rendering: Enables rendering components by name or from a mapping.
- Behind the scenes: Helps you understand how JSX is compiled.
Rendering a React Component Without JSX
Here’s how you can do typical JSX syntax with raw React.createElement for control and clarity.
Basic Example
import React from 'react';
import ReactDOM from 'react-dom/client';
function Greeting({ name }) {
return React.createElement('h1', null, 'Hello ', React.createElement('i', null, name), '. Welcome!');
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Greeting, { name: 'Taylor' }));
This code renders the same UI as <Greeting name="Taylor" />, but without any JSX.
Dynamic Component Rendering (Mapping)
Suppose you want to render a component by name, not by direct import or JSX:
import React from 'react';import Login from './Login';
import Logout from './Logout';
const componentMap = {
Login,
Logout,
};
function Popup({ componentName }) {
const ComponentToRender = componentMap[componentName];
return React.createElement(
'div',
null,
ComponentToRender
? React.createElement(ComponentToRender)
: 'No component to display'
);
}
This pattern is powerful for modals, popups, or dashboards where the component is chosen at runtime.
Also Read: ReactJS Development Services : Shift Towards the Appealing UI
Tips & Gotchas
- Props: Pass them as the second argument to createElement (e.g., { name: 'Taylor' }).
- Children: Pass as additional arguments after props; you can nest createElement calls for nested elements.
- Don’t call function components directly: Always use React.createElement(Component) instead of Component()—the latter breaks hooks and context.
- Shorthand: Assign const e = React.createElement; for less typing in large files.
Advanced: No-JSX with Third-Party Helpers
- react-hyperscript and hyperscript-helpers provide more concise, chainable syntax for large UIs without JSX.
- No build step: Useful in environments where Babel or a build tool isn’t available.
- Dynamic rendering: Enables rendering components by name or from a mapping.
- Behind the scenes: Helps you understand how JSX is compiled.
