React Without JSX

In React, we can create elements without using JSX by calling React.createElement directly.

This method takes three arguments:

1 The HTML tag name as a string (for example, ‘h2’).

2 An object with attributes or props (or null if there are no props).

3 The content inside the element.

Example — without any attributes:

const elem = React.createElement('h2', null, 'Hello Mia');
ReactDOM.render(
  elem,
  document.getElementById('root')
);

If we want to add a CSS class, we pass it as part of the second argument using an object with the className property:

const elem = React.createElement('h2', { className: 'my-title' }, 'Hello Mia');

This code creates an <h2> element with class my-title and content “Hello Mia”.

JSX is a shortcut that compiles into React.createElement calls, so writing without JSX helps us understand how React works internally.


Home About Links

Text me