React JSX

By Xah Lee. Date: . Last updated: .


JSX is a JavaScript syntax extension from the React library.

For example,

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

It is called JSX

JSX gets compiled to “React elements”.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;


in jsx, anything inside {} are evaluated as js expression.

here's another example.

const element = (
    Hello, {formatName(user)}!

attributes in jsx

like this:

const e1 = <div xyz="0"></div>;
const e2 = <img src={x.y}></img>;

note, don't add quotes inside the curly brackets.

self closing tag is ok

const element = <img src={user.avatarUrl} />;

JSX tags can be nested and multi line:

const element = (
    <h2>Good to see you here.</h2>