REACT Tutorial

JSX in React

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that looks similar to HTML and is used with React to describe what the UI should look like.

Why JSX?

JSX makes writing React components easier by allowing you to write HTML-like code directly inside JavaScript. React then transforms this JSX into JavaScript calls that create React elements.

Basic JSX Syntax

JSX looks like this:

const element = <h1>Hello, JSX!</h1>;
  

Here, <h1> is JSX syntax that will render an h1 element with text inside.

Embedding Expressions in JSX

You can embed any JavaScript expression inside JSX by wrapping it in curly braces {'{}'}:

const name = 'React Learner';
const greeting = <h2>Hello, {name}!</h2>;
  

This renders as Hello, React Learner!.

JSX Must Have One Parent Element

JSX expressions must be wrapped in a single parent element. For example, this is invalid:

const element = <h1>Hello</h1> <p>Welcome</p>;
  

Instead, wrap it inside a parent like a <div>:

const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);
  

Using JSX in React Components

JSX is commonly returned from React components. For example:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
  

This component uses JSX to render a personalized greeting.