What is JSX?

JSX allows you to write HTML-like syntax directly inside JavaScript. React then transforms this into actual JavaScript using a compiler like Babel.

import React from 'react';

function Welcome() {
  const name = "Zeki";

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a JSX example in React.</p>
    </div>
  );
}

export default Welcome;

🧠 Explanation:

• <div>, <h1>, <p> – These look like HTML, but are actually JSX elements.
• {name} – You can embed JavaScript expressions inside {} in JSX.
• return (...) – JSX must return a single parent element, which is why everything is wrapped inside <div>.

🔧 Without JSX (Pure JS Equivalent)

Get Zeki Ahmed’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here’s the same code without JSX using React.createElement:

import React from 'react';

function Welcome() {
  const name = "Zeki";

  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, `Hello, ${name}!`),
    React.createElement('p', null, 'This is a JSX example in React.')
  );
}

export default Welcome;

As you can see, JSX makes it shorter and easier to read.