What is JSX?

Learn that JSX lets you describe UI with an HTML-like syntax.

What is JSX?

JSX is a React extension that lets you write HTML-like syntax inside JavaScript files. When you write return <h1>Hello</h1>;, the build tool turns it into a React.createElement(...) call behind the scenes.

JSX keeps the UI markup next to the component logic, so the view and the behaviour live together. JSX is not a template language; it is fully part of JavaScript.

Its biggest strength is being declarative: you say what should appear on screen, and React takes care of the rest.

Why is JSX handy?

Without JSX, writing UI with React.createElement is long and hard to read. JSX lets you write the same structure in a short, HTML-like form.

You can put any JavaScript expression inside curly braces { } in JSX. This makes linking data to the view a one-liner.

JSX is compiled JavaScript; the browser does not understand it directly. That's why a tool like Vite or Babel transforms the code first.

Exercise First JSX component

Complete the skeleton. Write a function called Title that returns <h1>Welcome</h1> and export it.

Show example solution

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

export default Title;

Test yourself

The call JSX compiles to
- React.createElement
- React.makeNode
- React.build
- document.createElement
Show answer

React.createElement — JSX compiles to React.createElement calls behind the scenes.

The tool that compiles JSX

Vite or ____ translates JSX into code the browser understands.

Show answer

Vite or Vite translates JSX into code the browser understands.

Match the concepts

JSX

HTML-like syntax
{ }

Expression slot
React.createElement

Compiled call
Babel

Transformer

Next lesson: Expressions and curly braces

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies