Why React, your first component and JSX

Discover what React is, write your very first component, and learn the basic rules of JSX.

8 min · 3 questions

React is a JavaScript library, in other words a toolbox of ready-to-use code, built for creating user interfaces: everything you see and interact with on screen (buttons, menus, forms...). The only prerequisite for this module is JavaScript basics (variables, functions, arrays). To understand why React matters, let's first look at how you change a page without React.

const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";

This approach works, but as soon as the page grows, you have to track down every element, update it at the right moment, and never forget one... It quickly becomes unmanageable. React offers a different idea: split the interface into components. A component is a JavaScript function that describes a piece of the interface (a button, a card, a menu). Like Lego bricks, you assemble them to build a full page, and React takes care of keeping the screen up to date for you.

import { createRoot } from "react-dom/client";

function Hello() {
  return <h1>Hello!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

The Hello function is a component: it returns what looks like HTML written directly inside JavaScript. This syntax is called JSX. Three rules to remember: a component returns a single parent element; some attributes change names (class becomes className); every tag must be closed (<img />, for example). JSX has a superpower: curly braces { } let you insert any JavaScript value into the output.

function Welcome() {
  const firstName = "Sarah";
  return <h2>Welcome, {firstName}!</h2>;
}

Knowledge check

Make sure you remember the key points of this lesson.

1. What is React?
   • A programming language that replaces JavaScript
   • A JavaScript library for building user interfaces
   • A drawing tool for creating website mockups
2. In React, what is a component?
   • A JavaScript function that returns JSX
   • A CSS file that lays out the site
   • A database that stores visitors
3. What are curly braces { } used for in JSX?
   • To write an HTML comment
   • To automatically create a loop
   • To insert a JavaScript value into the output