React - JSX

About

JSX is an React expression that compiles to the native javascript (ie createElement).

The first motivation of JSX is that it's easier to read and write.

Pro

JSX:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

Compilation

Babel transpile (ie convert) JSX down to Javascript with React.createElement() calls. 1)

Example that you can run on the Babel online compiler playground

This JSX Script

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Becomes this Javascript

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

where: React - Element

Syntax

Multiple line

Multiple JSX lines should be wrap in parentheses to avoid automatic semicolon insertion

Expression

Because Jsx is an expression, you can:

  • use JSX inside if statements
  • use JSX inside for loops,
  • assign it to variables,
  • accept it as arguments,

Loop

  • With a For loop, you feed an array that you put inside the JSX return expression
............
const items = []
for (const [index, value] of elements.entries()) {
  items.push(<input value={value} label={index} />)
}

return (
<div>
    {items}
</div>
);
....
return (
<div>
    {elements.map((value, index) => {
        return <input value={value} label={index} />
    })}
</div>
);
....

Return it from functions

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Javascript expression

Any valid JavaScript expression can be written inside curly braces in JSX

<ReactElementTagName>
   Hello, world! 
   <ChildReactElement/>
   { console.log("Javascript code is between {}") } 
</ReactElementTagName>;

where:

Unicode

  • Espace: {“\u00A0”}

Component Attribute

All Jsx attribute have a camelCase name in order to make a difference with html attribute:

  • class becomes className
  • tabindex becomes tabIndex

You should either use:

but not both in the same attribute.

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

Typescript

You declare the type with the JSX.Element

let inputElements: JSX.Element;

How to

How to render JSX in the browser

How to create JSX dynamically from Json

Documentation / Reference


Powered by ComboStrap