JSX Component

When working with React, you’ll often use JSX to describe what the user interface (UI) should look like. JSX makes it easier to write and understand UI code by letting you mix HTML-like syntax with JavaScript logic in one place.

JSX is not a React component itself, but a syntax extension that allows you to write HTML inside JavaScript. It’s what React uses to define the structure of components.

JSX is a syntactic extension of JavaScript, and you can also write actual JavaScript expressions inside it using curly braces {}.

Since browsers don’t understand JSX directly, it must be compiled into plain JavaScript first. This is usually done using Babel.

To write a simple JSX component:

const variable = <h1>This is JSX</h1>;

If we want to create nested JSX, we need to wrap everything inside a single parent element, because JSX must return only one root element.

Get Ali ur Rehman’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

<div>
  <h1>Heading</h1>
  <p>Paragraph</p>
</div>

These nested elements should be enclosed in parentheses when assigned to a variable:

const JSX = (
  <div>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </div>
);

Now, to render this component on the screen, we use ReactDOM.

Using ReactDOM.render()

To display the JSX on the page, we use:

ReactDOM.render(what_to_render, where_to_render);

• what_to_render: The JSX element (in this case, JSX)
• where_to_render: The DOM element where you want to display it, usually selected using document.getElementById('some-id')

So, the full code looks like this:

const JSX = (
  <div>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </div>
);
ReactDOM.render(JSX, document.getElementById('someID'));

JSX vs HTML

One key difference between HTML and JSX is in their naming conventions:

• class in HTML becomes className in JSX
• onclick becomes onClick
• Also, all tags must be properly closed, even self-closing ones like <br />, <img />, etc.

Summary

JSX is a powerful way to write UI in React that feels like HTML but works inside JavaScript. It allows us to create complex layouts in a clean, readable way, while still having full access to JavaScript logic. Understanding JSX is one of the first steps to becoming comfortable with React.