What is JSX in React

Introduction

JSX lets you write HTML-like code inside JavaScript. It makes building user interfaces easier and clearer.

When creating React components that display UI elements

When you want to mix JavaScript logic with HTML structure

When you want to write code that looks like HTML but runs in JavaScript

When building interactive web pages with React

When you want to keep UI code readable and simple

Syntax

React

const element = <tagName>Content</tagName>;

JSX looks like HTML but is actually JavaScript under the hood.

You can embed JavaScript expressions inside JSX using curly braces {}.

Examples

This creates a heading element with text inside.

React

const greeting = <h1>Hello, world!</h1>;

You can insert JavaScript variables inside JSX using curly braces.

React

const name = 'Alice';
const greeting = <h1>Hello, {name}!</h1>;

JSX can represent nested HTML elements like lists.

React

const list = <ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>;

Sample Program

This React component uses JSX to show a welcome message with a user's name.

React

import React from 'react';

function Welcome() {
  const user = 'Friend';
  return <h1>Welcome, {user}!</h1>;
}

export default Welcome;

Important Notes

Browsers do not understand JSX directly; React transforms it into JavaScript before running.

Always use a single parent element in JSX or wrap multiple elements in a fragment.

Summary

JSX lets you write HTML-like code inside JavaScript for React.

It makes UI code easier to read and write.

You can mix JavaScript expressions inside JSX using curly braces.