What Is React?

Introduction

Websites used to be a set of separate pages. Today many are apps that update instantly as you click, type and scroll. React is a JavaScript library, made at Facebook (now Meta) and used widely, for building those interfaces. This course assumes you know basic HTML and JavaScript.

The code in this course is shown for reading. To run it, create a React project (for example with Vite, as the official docs describe) on your computer.

The simple explanation

In React you build a screen out of small, reusable pieces called components.

Think of LEGO. A button, a card and a navigation bar are each a component. You combine them into pages, and you reuse them wherever you need them.

Your first component

A component is a JavaScript function that returns what should appear on screen. The tag-like syntax inside is called JSX:

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

JSX looks like HTML but lives inside JavaScript. Tools turn it into normal JavaScript before the browser sees it. Component names start with a capital letter.

Using a component

You use your component like an HTML tag:

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

This shows the heading twice. Write once, use many times.

A few JSX rules

• Return one parent element. Wrap siblings in a div or an empty wrapper <> </>.
• Close every tag, including ones like <img />.
• Use className instead of class, because class is already a word in JavaScript.
• Put JavaScript inside curly braces: <p>Total: {2 + 3}</p> shows 5.

Why React?

React is declarative: you describe what the screen should look like for the current data, and React updates the page efficiently when the data changes. You do not tell the browser each step of how to change.

Try it yourself

Write a component called Footer that returns a p with the text "Made by" and your name. Use it twice inside App.

Summary

• React builds interfaces from components, which are functions that return JSX.
• JSX looks like HTML but is JavaScript, with a few rules such as className.
• Curly braces let you put JavaScript inside JSX.