This assumes about five hours a week, working JavaScript basics, and an editor already installed — no more course-collecting before you start. You don't need another catalog of tutorials. You need thirty finishable days and one real page live on the internet at the end of them.
Week 1 — Components & JSX
Days 1–2: scaffold a project with Vite and React, then just edit App.jsx until you understand what's happening on save. Days 3–4: props, rendering lists, and why keys matter (this trips up almost everyone the first time). Days 5–7: useState, applied to something concrete — a counter, a form, a toggle-able UI element. By the end of week one you should be comfortable enough that a blank component file doesn't feel intimidating.
Week 2 — Hooks & Effects
Use useEffect for something real, like setting the document title or standing up a fetch stub. Write one custom hook — a localStorage hook is a good first one, since you'll actually reuse it. Then build something small end to end: a tiny weather widget or a quote generator, a mock API is completely fine here.
Week 3 — Routing & Data
Add React Router with two real pages and navigation between them. Fetch from an actual public API this time, and handle loading and error states properly — not just the happy path. Extract a reusable Card component once you notice yourself copy-pasting the same markup twice.
Week 4 — Deploy
Polish the CSS, whether that's Tailwind or plain stylesheets. Write a README with a screenshot — future-you will thank present-you. Deploy to Vercel and actually share the link with someone. A project nobody else has seen doesn't quite count as shipped yet.
Anti-Patterns Worth Avoiding
Watching six hours of tutorial video without typing a single line yourself is the single most common way this plan quietly fails. So is jumping to Next.js before you've built a real mental model of plain React first — the extra layer of abstraction just gets confusing faster. And don't build a design system before you have one working screen; polish is what week four is for, not week one.
Your Custom Week 1
Everyone's starting point is a little different depending on prior JavaScript experience. See the learn React template for AI-generated daily tasks matched to your actual experience level, instead of a one-size-fits-all thirty days.
