In React, JSX just simplifies the way you write or read code (Readable syntax) for React.createElement. You can write React code without JSX by using React.createElement directly.

1. Basic example with JSX

Normally, with JSX, you might write:

function App() {
  return (
    

      
Hello, React!
      
This is a paragraph.
    
  );
}

This JSX gets compiled to React.createElement calls behind the scenes.

2. Equivalent code without JSX

Without JSX, you can write it like this:

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return React.createElement(
    'div',            // Type of element
    null,             // Props (null = no props)
    React.createElement('h1', null, 'Hello, React!'),
    React.createElement('p', null, 'This is a paragraph.')
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

Explanation:

• React.createElement(type, props, ...children)

  • type ? HTML tag name or a React component

  • props ? an object containing properties/attributes

  • children ? the inner content or nested elements

• Nesting is done by passing other React.createElement calls as children.

3. With props and events

For example, a button with a click handler:

function App() {
  function handleClick() {
    alert('Button clicked!');
  }

  return React.createElement(
    'button',
    { onClick: handleClick, style: { fontSize: '20px' } },
    'Click Me'
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

Notice how you pass props as an object, including event handlers and styles.

1. JSX is optional. React works fine with plain JS using React.createElement.

2. Each JSX tag is just a shorthand for React.createElement.

3. Nesting elements requires calling React.createElement recursively for each child.