Home/Courses/React/React Basics

React Basics⚛️

Beginner

React 19

Learn the fundamentals of React 19, from JSX and components to state management and event handling

8

Sections

24

Lessons

26

Challenges

Start this free course

Start learning React Basics

24 lessons and 26 challenges, all 100% free.

Start this course

Introduction to React

Setting Up a React Project

The Virtual DOM

What is React?(Sign in required)

Beginner+10 Mana

JSX Curly Braces(Sign in required)

Beginner+10 Mana

Component Render Steps(Sign in required)

Beginner+10 Mana

Conditional Rendering

Rendering Lists

JSX Class Attribute(Sign in required)

Beginner+10 Mana

JSX Expression Types(Sign in required)

Beginner+10 Mana

Conditional Rendering with &&(Sign in required)

Beginner+10 Mana

Purpose of Keys(Sign in required)

Intermediate+20 Mana

Functional Components

Component Composition

Component Patterns

Valid Component Name(Sign in required)

Beginner+10 Mana

Component Return Value(Sign in required)

Beginner+10 Mana

Component Structure(Sign in required)

Intermediate+20 Mana

Passing Props to Components

The Children Prop

Destructuring Props

Props Immutable(Sign in required)

Beginner+10 Mana

Default Props(Sign in required)

Beginner+10 Mana

Prop Value Types(Sign in required)

Intermediate+20 Mana

useState Basics

useState with Objects & Arrays

React useState Functional Updates: Avoid Stale State

useState Return Value(Sign in required)

Beginner+10 Mana

Functional Updates Count(Sign in required)

Intermediate+20 Mana

Updating Object State(Sign in required)

Intermediate+20 Mana

useEffect Basics

useEffect Dependencies

Cleanup Functions

Empty Dependency Array(Sign in required)

Beginner+10 Mana

Effect Dependency Behavior(Sign in required)

Beginner+10 Mana

useEffect Cleanup Timing(Sign in required)

Intermediate+20 Mana

Missing Dependency Bug(Sign in required)

Intermediate+20 Mana

Handling Events in React

React Synthetic Events

Event Handling Patterns

Event Naming Convention(Sign in required)

Beginner+10 Mana

Event Handler Syntax(Sign in required)

Beginner+10 Mana

Preventing Default Behavior(Sign in required)

Beginner+10 Mana

Controlled vs Uncontrolled Components

Form State Management

Form Validation Patterns

Controlled Component Definition(Sign in required)

Beginner+10 Mana

Controlled vs Uncontrolled Features(Sign in required)

Intermediate+20 Mana

Controlled Input Behavior(Sign in required)

Intermediate+20 Mana

Ready to start this free course?

No credit card required.

Start this course now

Ready to start React Basics?

24 interactive lessons and 26 hands-on challenges — learn in VS Code, Cursor, or the web.