React Tutorial

This React tutorial takes you from zero to building real, interactive user interfaces with React 18. React is a free, open-source JavaScript library for building user interfaces out of small, reusable pieces called components.

React was created at Facebook (now Meta) and is used by companies of every size, from tiny startups to Netflix, Airbnb and Instagram. It is not a full framework: it focuses on one job, turning your data into UI, and lets you choose the other tools you need.

What is React?

With plain JavaScript you usually find an element on the page and change it by hand whenever something happens. That works for small pages, but it becomes messy as an app grows.

React flips the idea around. You describe what the UI should look like for the current data, and React works out the smallest set of changes needed to update the browser. When the data changes, you simply describe the new UI again. This is called a declarative approach.

Why Learn React?

  • It is one of the most in-demand front-end skills in job listings.
  • Components let you build an interface once and reuse it everywhere.
  • A huge ecosystem: routing, forms, data fetching, UI kits and testing tools.
  • The same ideas carry over to React Native for mobile apps and to frameworks like Next.js.
  • Hooks make state and side effects simple with plain functions.

Your First React Component

A React component is just a JavaScript function that returns markup. The markup looks like HTML but is actually JSX, a syntax extension you will learn in a later chapter. Here is a complete tiny app:

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

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

createRoot(document.getElementById('root')).render(<Greeting />);
Hello, React!   (rendered as a large heading inside <div id="root">)

Greeting is a component. createRoot connects React to an element in your HTML page, and render tells React what to show inside it. Notice that you use the component like a custom tag: <Greeting />.

What This React Tutorial Covers

  • Setting up a React project with Vite
  • JSX, components and props
  • Handling events, conditional rendering and lists
  • State with useState, side effects with useEffect, and other hooks
  • Forms, context, custom hooks and routing
  • A final project that puts everything together

Before You Start

You should be comfortable with basic HTML, CSS and modern JavaScript: let and const, arrow functions, arrays and their map and filter methods, objects, destructuring, and import/export. If any of these feel new, review them first and React will feel much easier.

Frequently asked questions

Is React a framework or a library?

React is a library for building user interfaces. It handles rendering and state, while routing, data fetching and build tools come from other packages or from frameworks built on React such as Next.js.

Is React hard to learn?

React itself has a small core: components, props, state and hooks. If you already know modern JavaScript, most beginners can build simple apps within a couple of weeks of practice.

Should I learn JavaScript before React?

Yes. React is JavaScript, so you need a solid grasp of functions, arrays, objects and modules. Learning both at once makes it hard to tell which errors come from React and which come from JavaScript.

What version of React does this tutorial use?

This tutorial uses React 18 with function components and hooks, which is the modern, recommended way to write React code.