React – Get Started | Love Me Some Coding

This is the start of a 27-part React tutorial. By the end of it you will be able to read and write a real React application — not a to-do list, an actual one with a menu, a shopping cart, forms, routing, authentication, payment and an admin dashboard.

This page covers what React is, exactly which versions everything is pinned to, and how to get a project running in about a minute.

What React is

React is a JavaScript library for building user interfaces out of components — self-contained pieces of UI that you write once and use like HTML tags.

The problem it solves is keeping the screen in step with your data. Without a framework you write code that says find this element, change its text, add this class, remove that row, and every one of those instructions is a chance for the page to disagree with the truth. React inverts it: you describe what the screen should look like for the current data, change the data, and React works out the minimum set of DOM changes to get there.

// You write this — a description of the UI for a given cart.
{totals.itemCount > 0 && <Badge pill>{totals.itemCount}</Badge>}

// Not this — a list of instructions for changing the page.
// document.querySelector('.cart-badge').textContent = count;
// if (count === 0) document.querySelector('.cart-badge').remove();

It was built at Facebook and released in 2013, and it is now the most widely used way to build web front ends. The same component model also drives React Native for iOS and Android apps.

Versions used in this tutorial

React changed substantially between 2019 and now — class components gave way to hooks, ReactDOM.render was removed, forwardRef stopped being necessary. A tutorial that does not say which version it means is a tutorial you cannot trust. This one is written and tested against:

Package	Version	What it is
react	19.2	the component model itself
react-dom	19.2	the renderer that turns components into DOM
typescript	6.0	every example in this track is TypeScript
vite	8.2	dev server and build tool
@vitejs/plugin-react	6.0	compiles JSX, enables Fast Refresh
react-router-dom	7.18	routing (not part of React)
react-bootstrap	2.10	UI components, used for styling only
Node.js	22 LTS	20.19+ is the minimum Vite 8 accepts

If you are on React 18, essentially everything here still applies — hooks, context, effects and routing are unchanged. The React 19 specifics are called out where they come up: refs as ordinary props (no forwardRef), and the removal of ReactDOM.render.

If you are following a tutorial that uses class, this.setState and componentDidMount, it predates hooks. That code still runs — React has not broken it — but it is not how new code is written. This track uses function components throughout and explains the class equivalents where you are likely to meet them in an existing codebase.

What you need

Node.js 20.19 or newer, and an editor. That is all — React needs no global install.

node --version
# v22.23.2

You should be comfortable with HTML, CSS and JavaScript before starting. If modern JavaScript syntax — destructuring, spread, arrow functions, modules — is not yet familiar, lesson 3 (The JavaScript You Need First) covers exactly the parts React leans on.

Create a project

The React team retired create-react-app and now points you at Vite. Three commands:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Open http://localhost:5173 and you have a running React application. Editing src/App.tsx updates the browser before you have finished switching windows.

Two notes on that first command. The -- is required — without it npm swallows the flags and runs the interactive prompt instead. And react-ts is the TypeScript template; there is a plain react template if you would rather not use types, though this track uses TypeScript throughout.

Prefer plain JavaScript, or want to check your Node version is acceptable first?

# JavaScript instead of TypeScript
npm create vite@latest my-react-app -- --template react

# Pick the framework and language from a menu
npm create vite@latest

Lesson 2 goes through what the scaffolder generated, file by file — what index.html is doing at the project root, why npm run build runs tsc first, and what belongs in vite.config.ts.

What about Next.js?

Next.js is a framework built on React that adds server rendering, file-based routing and data fetching. It is an excellent choice for a production site and a poor choice for learning React, because it is hard to tell which half of what you are learning is React and which half is Next. Learn React first; Next.js is much easier afterwards.

The app every example comes from

Tutorials usually invent a counter or a to-do list, and then real code looks nothing like the tutorial. Everything in this track is taken from one working application instead — a pizza ordering site, deliberately built to exercise the features you actually have to learn:

a menu fetched from an API, with filtering that lives in the URL
a pizza builder — sizes, crusts, toppings, a live price
a cart shared by the navbar, the menu and checkout, persisted to a server
sign-in, guest checkout, and routes only signed-in users can reach
Stripe payment
a lazily-loaded admin dashboard with charts and CRUD screens

When you see a snippet here, it is running in that app. Nothing has been simplified for the tutorial, which occasionally means a code sample has a detail in it that this lesson is not about — that detail is usually the subject of a later one, and it is linked.

The lessons

Getting started

Describing the UI

Interactivity

Managing state

Escape hatches

Going to production

Interview prep

Interview Questions — twenty-four senior-level questions and answers, drawing on everything above

Read them in order if React is new to you — each one assumes the ones before it. If you are here for one specific thing, jump straight to it; every lesson links back to what it depends on.

Set Up a Project with Vite.