React › Components & JSX

What is JSX and why do React developers use it?

Beginner

Answer

JSX is a special syntax that lets you write HTML looking code directly inside your JavaScript files. It makes it much easier to see what a component will look like on the screen, and it gets converted into regular JavaScript function calls before the browser ever sees it.

function Greeting() {
  return <h1>Hello, welcome to our site</h1>;
}

// This is converted behind the scenes into something like:
// React.createElement('h1', null, 'Hello, welcome to our site');

Real-world example A team building a product page writes JSX that looks almost exactly like the final HTML, making it easy for both developers and designers to understand what the page will show.

Common follow-ups: What are the rules for writing valid JSX, such as needing one single parent element?;Can you write plain JavaScript logic like a for loop directly inside JSX?

Component Composition & Children Props;Props & State