Day 0: Start here
How this course works, what you will build during the week, and the one hour of setup to do before Day 1.
Welcome to React in a Week. Over the next seven days you will go from your first line of React to a complete, deployed app. This course assumes you know a little HTML and CSS, and no React at all. Day 1 even teaches the JavaScript you need.
Day 0 is short. You install the tools, create an empty project, and get to know how the lessons work. Do it the evening before you start, so Day 1 can begin with real code.
How the lessons work
Every lesson follows the same pattern, so you always know where you are:
- Goals at the top tell you what you will be able to do by the end.
- Live sandboxes let you edit real React code in the page and see the result immediately. Change things and break things. The reset button puts them back.
- Pitfalls show the mistakes almost everyone makes, with the wrong code next to the right code.
- Challenges give you a small task to try on your own. Each has a hidden solution, so try first before you open it.
- Quizzes are quick checks that the idea has stuck.
- Deep dives are optional extra detail. Skip them on a first read if you like.
- Go deeper links at the end point to the best places to read more, mostly the official docs at react.dev.
Time plan
| Lesson | Time | What you'll do |
|---|---|---|
| Install your tools | 30 min | Install Node.js, VS Code and React Developer Tools |
| Create your first app | 30 min | Create the Reading List project with Vite and run it |
What you'll build this week
You will build one app all week: Reading List, a place to keep track of books you want to read, are reading, and have finished. Each day ends with a checkpoint that adds the day's new ideas to it:
| Day | The Reading List gains... |
|---|---|
| 0 | An empty project, running on your computer |
| 1 | A BookCard component |
| 2 | A list of books rendered from data, with status badges and styles |
| 3 | Adding, deleting and changing the status of books |
| 4 | Filters, a reducer, saving to local storage, and search suggestions |
| 5 | TypeScript, shared state with context, several pages, and server data |
| 6 | Modern React 19 features, the React Compiler, and tests |
| 7 | A move to Next.js, server rendering, and deployment to the web |
Today's step: create the project with Vite, run it, and replace the starter page with a single heading, "My Reading List".
Today's lessons
Install your tools
Node.js, VS Code, React Developer Tools and how the sandboxes work
Create your first app
Create the Reading List project with Vite and take a tour of its files
By the end of today, you should have:
-
Node.js 24 LTS or newer installed.
node -vprintsv24or higher. -
A
reading-listfolder, created with:npm create vite@latest reading-list -- --template react -
The dev server running with
npm run dev, and the app open athttp://localhost:5173. -
src/App.cssandsrc/index.cssemptied, andsrc/App.jsxreplaced with the code below. -
The React Developer Tools Components tab showing a single
Appcomponent.
Your src/App.jsx should match this sandbox (in your project the file ends in .jsx):
That is it for today. Tomorrow starts with the JavaScript React relies on, and ends with your first real component.
Day 0 progress