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.