React - JSX


JSX is a Javascript HTML Like language that compiles to Javascript React API.

The first motivation of JSX is that reading and writing React elements, are easier.


It permits to:

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!
Becomes this Javascript
const element = React.createElement(
  {className: 'greeting'},
  'Hello, world!'

where: What is a React Element?

Pro / Cons

Pro: JSX:

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


  • It needs to be compiled


Multiple line

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


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 / Concatenate

For 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} key={index} />)

return (
Map Loop


  • from an array
return (
    {, index) => {
        return <input value={value} label={index} key={index} />
  • from an object, you need to iterate over the keys with Object.keys function
    {Object.keys(elementsObject).map((key) => {
                return <input key={key} type="text" name={key} value={elementsObject[key]}/>

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

   Hello, world! 
   { console.log("Javascript code is between {}") } 



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


You declare the type with the JSX.Element

let inputElements: JSX.Element;

How to

How to render JSX in the browser

See How to render Jsx code in the browser

How to create JSX dynamically from Json

See How to create JSX dynamically from Json


Discover More
How to create JSX dynamically from Json

This article shows you how to create a JSX expression dynamically from Json data
Html Checkbox Illustration
How to create a checkbox in React?

This page shows you how you can create a checkbox in React. This example is written in JSX and shows you a controlled component. The react forms components input accept a value attribute that is used...
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
How to inject a HTML string in React with the dangerouslySetInnerHTML attribute?

How to add a HTML string (for instance for when you have converted a markdown document in an HTML string). with a function component in Jsx The standard mandatory root DOM node (placeholder for React...
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
How to render Jsx code in the browser

This article shows you how you can render JSX in the browser
How to render React on the Server (SSR) in Static Markup (renderToStaticMarkup)?

This page shows you how to render React in a static HTML page (known in React as static markup) - ie only HTML element without any React properties or React library. The page then doesn't need to be hydrated....
How to render a List of React Elements (Component, )?

This page is Loop in React and Jsx. Example with Pure Javascript map is the Reference/Global_Objects/Array/mapArray Map function with an Arrow function as argument Example in React By adding...
Card Puncher Data Processing
MDX (Markdown + JSX)

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. It implements the logic of docs as code and supports arbitrarily-complex JavaScript logic. It allows users to...

is a virtual dom technology that permits to create HTML page or components based on the concepts that: If the data (state) changes, the UI should change too. Learn once, write anywhere Babel for...

Share this page:
Follow us:
Task Runner