Learn JSX in React: Syntax, Rules, and Examples

JSX helps write React UI with HTML-like syntax. It links JavaScript logic with markup in one view.

What is JSX in React?

JSX is a syntax that lets you write HTML tags inside JavaScript code. React reads this syntax and converts it to JavaScript function calls.

Here is a quick example:

const name = "Sara";
const element = <h1>Hello {name}</h1>;

This code shows a variable with a name and a head element with a message. React renders the headline in the browser as HTML output.

JSX lets you build user interfaces inside React components without separate HTML files.

The JSX allows HTML-like tags inside React code. It helps developers see layout and logic together. It also helps React detect errors before runtime.

Here are the rules:

• Each JSX element must have one parent element.
• You must close all tags.
• Attribute names use camelCase style.
• Class becomes className.
• Quotes wrap string values.
• Curly braces hold JavaScript values.

Embed the Expressions in JSX

You can insert JavaScript values inside JSX with curly braces like {user.name} which shows the user name inside a tag. React updates it when the value changes.

Here is an example:

import React from "react";

function UserProfile() {
  const user = {
    name: "Moneer",
    age: 25,
  };

  return (
    <div>
      <h1>Hello, {user.name}!</h1>
      <p>You are {user.age} years old.</p>
    </div>
  );
}

export default UserProfile;

The curly braces { } let you run JavaScript inside HTML. {user.name} or {user.age} show values like “Moneer” or 25 in tags, and React updates the page when the data changes.

JavaScript Functions with JSX

JSX produces React elements while JavaScript functions run code. JSX compiles into function calls under the hood, so React can render elements faster.

Here is an example:

import React from "react";

function autoFunc() {
  const name = "Tarek";

  return <h1>Hello, {name}!</h1>;
}

export default autoFunc;

The line <h1>Hello, {name}!</h1> is JSX. React doesn’t understand HTML directly, so JSX is compiled into React.createElement() calls behind the scenes.

Here is the same code in JavaScript:

import React from "react";

function showName() {
  const name = "Hany";

  return React.createElement(
    "h1",       // element type
    null,       // props (none here)
    "Hello, " + name + "!" // children (text content)
  );
}

export default showName;

JSX is just syntactic sugar for React.createElement(). The compiler transforms your JSX into these function calls so React can update and render elements in the DOM.

It helps you write code short, but React is still working with plain JavaScript functions under the hood.

You must close every tag and wrap multiple tags inside one parent tag. Attribute names must match React rules. Curly braces must hold valid expressions only.

Examples of JSX in React Components

Simple JSX Element:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

Here is a component that returns a headline, and React renders it into the DOM and updates it if the code changes.

JSX with Dynamic Data:

function showThisName(props) {
  return <p>Hello {props.user}</p>;
}

This component takes a user name as a prop and displays it inside a paragraph. This shows you how the JSX mixes static tags and dynamic values.

JSX with Conditional Logic:

function Status({ online }) {
  return (
    <div>
      {online ? <p>User online</p> : <p>User offline</p>}
    </div>
  );
}

You can use the ternary operators inside curly braces to switch output in JSX, like in this example. The component checks the online prop and renders a message

JSX with a List:

function ShoppingListItem({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
    </ul>
  );
}

Here, you can use a map to loop through items and render each one as a list element.

Wrapping Up

You learned what JSX is and how React uses it.

Here is a quick recap:

• JSX allows HTML-like syntax inside JavaScript, it supports dynamic values with curly braces, and it compiles into function calls to render it.

FAQs

import React from "react";

function App() {
  return <h1>Hello JSX in React!</h1>;
}

export default App;

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

Similar Reads