React JSX

By Xah Lee. Date: . Last updated: .

JSX

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>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

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

here's another example.

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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 = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);