# React for Beginners | Gjorge Karakabakov

> Twelve lessons from why React exists to building a whole app, taught on React 19 with hooks and nothing else. Free, no sign-up.

Source: https://karakabakov.com/courses/react-for-beginners/

---

Course · Beginner · 12 lessons · ~2 hours

# React for Beginners

You know HTML, CSS and enough JavaScript to be dangerous. Twelve lessons later you will have built a working app and understand why every piece of it is there.

[Start lesson 1](https://karakabakov.com/courses/react-for-beginners/why-react/)

## What you'll learn

- What React actually solves, and when reaching for it is the wrong call
- Components, JSX and props - the whole composition model
- State, events and forms: making a page respond to a person
- Where state belongs, and why the answer is usually higher up
- Effects and data fetching, without the mental model everyone gets wrong
- Building a complete app from a mock-up, start to finish

## Before you start

- HTML and CSS
- JavaScript basics: variables, functions, arrays, objects
- Comfort running a command in a terminal

Beginner · 12 lessons · ~2 hours · Free · No sign-up

1. [01

   10 min

   ## Why React exists

   The problem React actually solves - and the same small interface built twice, once by hand and once by describing the result.](https://karakabakov.com/courses/react-for-beginners/why-react/)
2. [02

   8 min

   ## Setting up a React project

   One command to create a React project with Vite, then a tour of every file it generated: what each one is for and which ones you will actually touch.](https://karakabakov.com/courses/react-for-beginners/setting-up/)
3. [03

   14 min

   ## Components and JSX

   A component is a function that returns markup. JSX is how you write that markup, and it has about five rules worth learning up front.](https://karakabakov.com/courses/react-for-beginners/components-and-jsx/)
4. [04

   15 min

   ## Props: passing data down

   Components take arguments like any other function. Props are those arguments, they only travel one way, and the component cannot change them.](https://karakabakov.com/courses/react-for-beginners/props/)
5. [05

   10 min

   ## Rendering lists, and what keys are for

   Turning an array into markup with map, and the one prop React asks for in return - plus why reaching for the array index will eventually bite you.](https://karakabakov.com/courses/react-for-beginners/lists-and-keys/)
6. [06

   6 min

   ## Showing things conditionally

   Four ways to render something in React only some of the time, when to reach for each, and the tidy one that quietly puts a stray zero on your page.](https://karakabakov.com/courses/react-for-beginners/conditional-rendering/) [Optional Checkpoint: the first half 10 questions · lessons 1–6 · no sign-up, nothing stored](https://karakabakov.com/courses/react-for-beginners/quiz/halfway/)
7. [07

   12 min

   ## Making it interactive: events and useState

   The pivot. Why changing a plain variable does nothing, what useState changes about that, and how to update state from its own previous value.](https://karakabakov.com/courses/react-for-beginners/state-and-events/)
8. [08

   9 min

   ## Forms and controlled inputs

   Letting React own what is in the box: one state object for a whole form, immutable updates, and submitting without reloading the page.](https://karakabakov.com/courses/react-for-beginners/forms/)
9. [09

   10 min

   ## Sharing state between components

   Two components need the same value. The answer is almost never to give them one each - it is to move it up to the nearest thing they have in common.](https://karakabakov.com/courses/react-for-beginners/lifting-state-up/)
10. [10

    10 min

    ## Talking to the outside world: useEffect and fetching

    Effects are for synchronising with something outside React, not for running code on mount. Fetching a list, cleaning up after it, and when not to use one.](https://karakabakov.com/courses/react-for-beginners/effects-and-data/)
11. [11

    16 min

    ## Thinking in React: build the whole thing

    The capstone. Take a mock-up, break it into components, build it static, find the smallest possible state, decide where it lives, and wire it up.](https://karakabakov.com/courses/react-for-beginners/thinking-in-react/)
12. [12

    5 min

    ## Where to go from here

    An honest map of everything this course left out - what to learn next, what can wait, and what you can safely ignore for another year.](https://karakabakov.com/courses/react-for-beginners/what-next/) [Optional Checkpoint: the whole thing 10 questions · lessons 7–12 · no sign-up, nothing stored](https://karakabakov.com/courses/react-for-beginners/quiz/final/)

## Common questions

**### Is React for Beginners free?**

Yes. All twelve lessons are free to read, with no sign-up, no account and no email address to hand over. The whole course sits on the open web.

**### What do I need to know before starting?**

HTML and CSS, JavaScript basics - variables, functions, arrays and objects - and enough comfort with a terminal to run a command. No React at all.

**### How long does the course take?**

About two hours of reading across twelve lessons, plus the time you spend in the editor. Every lesson ends with something you build yourself.

**### Which version of React does it teach?**

React 19, with hooks and function components only. No class components and no framework on top - a plain Vite project you create in lesson two.

[Start lesson 1](https://karakabakov.com/courses/react-for-beginners/why-react/) [← All courses](https://karakabakov.com/courses/)