Skip to main content

React JSX Tutorial

What is JSX?​

JSX (JavaScript XML) is neither a string nor HTML. It is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

Basically it just provides the syntactic sugar for the React.createElement(type, props, ...children) function, giving us expressiveness of JavaScript along with HTML like template syntax.


In the example below, the text inside <h1> tag is returned as JavaScript function to the render function.

export default function App() {
  return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}

If you don't use JSX syntax then the respective JavaScript code should be written as below,

import { createElement } from "react";

export default function App() {
  return createElement("h1", { className: "greeting" }, "Hello, this is a JSX Code!");
}

Why React uses JSX?​

The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files!


But as the Web became more interactive, JavaScript was in charge of the HTML!

This is why in React, rendering logic and markup live together in the same place, known as components. JSX plays a crucial role in uniting these elements by binding together the logic and content.

What are the rules of JSX?​

The below 3 rules needs to be followed while using JSX in a react application.

  1. Return a single root element:

    • If you are returning multiple elements from a component, wrap them in a single parent element.
    • This requirement exists because,
      • Behind the scenes, JSX is transformed into plain javascript objects.
      • It is not possible to return two or more objects from a function without wrapping into an array.
      • This is the reason you can't simply return two or more JSX tags from a function without wrapping them into a single parent tag or a Fragment.

  2. All the tags needs to be closed:

    • Unlike HTML, all tags needs to closed explicitly with in JSX. This rule applies for self-closing tags(like hr, br and img tags) as well.
    • By adhering to this convention, JSX code can be more easily processed and transformed by various tools and libraries that rely on XML standards in React ecosystem.

  3. Use camelCase naming:

    • It is suggested to use camelCase naming for attributes in JSX. For example, the common attributes of HTML elements such as class, for, tabindex will be used as className, htmlFor and tabIndex.
    • The requirement exists because,
      • The attribute names written in JSX turned into keys of JavaScript objects
      • And the JavaScript names cannot contain dashes or reserved words, it is recommended to use camelCase wherever applicable in JSX code.
      • The attribute class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principle reason why React uses className instead of class.

    Note: There is an exception for aria-* and data-* attributes which should be lower cased all the time.