How to Learn React Enough to Build a Side Project (Without a 40-Hour Course)

You don’t need a 40-hour bootcamp to build something real with React. In a few focused weeks you can go from zero to a small side project—if you learn the right 20% and skip the rest.

This guide is for you if: you want to build a side project (dashboard, todo app, small SaaS), you’re tired of “React for everyone” courses that never get you to “I shipped something,” and you’re okay learning “just enough” to build.

Here’s what to learn week by week, what to skip, and how to avoid tutorial hell so you actually ship.

What “enough to build a side project” means

You won’t be a senior React engineer in a month—and you don’t need to be. In a few weeks you can get to:

• Writing components (function components, props, basic JSX)
• Managing state (useState, maybe one level of “lifting state up”)
• Fetching data once (useEffect + fetch or a simple data library)
• Routing between a few pages (e.g. Next.js file-based routing or React Router)
• Styling enough to ship (Tailwind, CSS modules, or plain CSS)

That’s enough to build a todo app, a simple dashboard, or a small multi-page app. It’s a realistic “ship something” goal.

What to skip (so you don’t run out of time)

Stay narrow so you actually ship:

• Class components — use function components and hooks only
• Redux / complex state — useState (and maybe useContext) is enough for a first project
• Every hook — focus on useState, useEffect, and the basics of your router
• Advanced patterns — custom hooks, render props, and “perfect” architecture can wait
• Testing — get one project out the door first; add tests when you come back to it

If you try to “learn React,” “learn TypeScript,” “learn state management,” and “learn testing” at once, you’ll spread yourself thin. Nail components + state + one data fetch + routing first.

Week 1: Components and state

Aim for about 1–1.5 hours per day. Adjust if you have more or less time.

Days 1–2: JSX and function components

If you’ve never touched React, cover:

• JSX — HTML-like syntax, className instead of class, {expression} for JavaScript
• Function components — a function that returns JSX
• Props — passing data into components via attributes
• Rendering lists — .map() over an array and a key prop

Skip for now: class components, refs, portals, error boundaries.

Resource tip: Use the official React “Quick Start” and “Your First Component.” Stop as soon as you can build a small list (e.g. a list of items that render from an array). Don’t collect five different “React for beginners” playlists.

Days 3–5: State with useState

State is what makes your UI change when the user does something. Focus on:

1. useState — const [value, setValue] = useState(initial)
2. Updating state — call setValue(newValue) or setValue(prev => ...) when you need the previous value
3. Controlled inputs — value + onChange tied to state
4. Lifting state up — when two components need the same data, keep it in a parent and pass it down via props

By the end of day 5 you should be able to build a small form or todo list where typing and clicking actually update what’s on the screen.

Resource tip: React’s “Managing State” and “Responding to Events” docs. After that, build one tiny app (e.g. “add/remove items from a list”) yourself. Type the code; don’t only copy-paste.

Days 6–7: One small UI-only project

Pick one idea and build it without a backend or API:

• A todo list (add, toggle, delete)
• A simple counter or “habit tracker” with a few items
• A small form that shows what you typed (e.g. a “preview” box)

Use only components, props, and useState. This gets you out of passive tutorial mode and into writing React yourself.

Week 2: Data and routing

Days 8–10: Fetching data with useEffect

Most side projects need data from somewhere. Focus on:

1. useEffect — run code after render (e.g. fetch when the component mounts)
2. fetch — get data from a public API (e.g. JSONPlaceholder, or an API you care about)
3. Loading and error state — useState for loading and error; show a message or spinner while loading
4. Displaying the data — map over the response and render a list or cards

You’re aiming for: “When this page loads, fetch X and show it.” One endpoint is enough for the first project.

Resource tip: React’s “Synchronizing with Effects” and “You Might Not Need an Effect.” Then wire up one real API (e.g. “list of posts” or “current weather”) in your app.

Days 11–12: Routing (a few pages)

Your side project probably has more than one screen. Pick one approach and stick to it:

• Next.js — file-based routing: create a folder under app/ and add a page.tsx. Link with <Link href="/about">. Easiest if you’re already in or open to Next.js.
• React Router — <BrowserRouter>, <Routes>, <Route path="..." element={...} />, and <Link>. Standard for “plain” React (e.g. Vite).

Add 2–3 pages: e.g. Home, List, Detail. Navigate between them. That’s enough structure for a small app.

Days 13–14: One real micro-project

Choose something that matters to you:

• A small dashboard that fetches and displays data from one API
• A “favorites” or “watch later” list (data in state, or localStorage for persistence)
• A simple multi-page app (e.g. list view + detail view) using your chosen router

Keep the scope small so you can finish in a few days: fetch → show → navigate. You can add styling and polish later.

How to avoid tutorial hell

• Pick one main resource (e.g. React docs + one short course or series). Don’t hop between 10 courses.
• Stop as soon as you can do the next step — e.g. once you can use useState and a simple useEffect, build a tiny project instead of watching more videos.
• Prefer “do one thing” over “finish the whole course.” You can always come back; shipping a small project beats half-finishing a long course.
• Type the code yourself in your editor; don’t only copy-paste. When you get stuck, use the error message and docs (or a targeted search) to fix it.

If you’d rather skip the resource hunt and get a learning path built for your exact goal and schedule, you can get a custom course in minutes →. Describe what you want to learn (e.g. “React enough to build a side project”) and how much time you have; the rest is structured for you.

A simple “ship something” schedule at a glance

Useful resources (keep the list short)

• React: React docs — “Quick Start,” “Your First Component,” “Managing State,” “Synchronizing with Effects.”
• Next.js (if you choose it): Next.js Learn — “Create your first app” and “Navigate between pages.”
• React Router (if you choose it): React Router docs — “Overview” and “Basic routing.”

What’s next after you ship?

Once you’re comfortable with components, state, one data fetch, and routing, you can add:

• TypeScript — add types to your components and props
• Styling — Tailwind, CSS modules, or a component library (e.g. shadcn/ui)
• Persistence — localStorage, or a simple backend/API
• Auth — e.g. sign up / log in when you’re ready to build something multi-user

A few weeks gets you to “I built something with React.” From there, you can grow in the direction that fits your next project.

Bottom line

You can go from zero to shipping a small React side project in a few weeks by focusing on: (1) components and props, (2) useState and one data fetch with useEffect, and (3) simple routing and one micro-project. Skip broad “learn everything” courses and heavy state management until you’ve nailed this core loop.

Skip the tutorial hunt. Tell us what you want to learn and how much time you have (e.g. “React enough to build a side project, 1 hour a day for 2 weeks”), and we’ll build you a custom course—structured lessons, in the right order, nothing you don’t need. Build my course →