Web Development · Beginner
React Fundamentals
Learn to build interactive user interfaces with React: components, props, state, hooks, and forms.
- Price
- $45
- Level
- Beginner
- Duration
- 10 hours
- Lessons
- 38 lessons
- Projects
- 6 hands-on projects
- Prerequisites
- Basic JavaScript (variables, functions, arrays)
Overview
React Fundamentals is a 10-hour course that teaches you to build modern user interfaces with React. Across 38 lessons and 6 projects, you learn the component model that powers a large share of today's web applications.
The course begins with components and JSX, then builds up through props, state, and event handling — the core loop of interactive UIs. From there you learn hooks, controlled forms, and how to compose small components into complete applications.
Each concept is practiced in isolation first, then combined in projects that grow in scope, ending with a complete multi-component application built from scratch.
What you'll learn
- Build UIs from reusable components with JSX
- Pass data through components with props
- Manage interactivity with state and events
- Use hooks including useState and useEffect correctly
- Build controlled forms with validation
- Compose small components into full applications
- Understand rendering: when and why components update
- Complete 6 projects, from a counter to a full task application
Curriculum
7 modules · 38 lessons · 10 hours of material
Module 1 — Thinking in Components
- What React is and why components
- Setting up a React project
- JSX: markup in JavaScript
Module 2 — Props
- Passing data into components
- Composition with children
- Project: profile card gallery
Module 3 — State and Events
- useState fundamentals
- Handling user events
- State updates and re-rendering
- Project: interactive counter and toggle
Module 4 — Hooks in Depth
- useEffect and side effects
- Rules of hooks
- Building a custom hook
Module 5 — Forms
- Controlled inputs
- Form submission and validation
- Project: signup form with validation
Module 6 — Lists and Conditional Rendering
- Rendering lists with keys
- Conditional rendering patterns
- Project: filterable list
Module 7 — Component Composition
- Lifting state up
- Structuring a component tree
- Final project: complete task application
Who this course is for
- Developers with basic JavaScript who want to build modern UIs
- Backend developers expanding into frontend work
- Self-taught coders formalizing their React knowledge
- Anyone planning to learn Next.js, which builds on React
Prerequisites
Basic JavaScript (variables, functions, arrays)
Course outcomes
By the end of this course, you will be able to:
- Build interactive React applications from scratch
- Structure UIs as clean, reusable component trees
- Handle state, events, and forms idiomatically
- Be fully prepared for Next.js and production React work
Frequently asked questions
How much JavaScript do I need?
You should know variables, functions, arrays, and objects. Familiarity with arrow functions and array methods like map helps, and the course reviews them briefly where they first appear.
Does this course cover React with TypeScript?
The course teaches React with plain JavaScript to keep the focus on React concepts. The patterns transfer directly to TypeScript.
What should I learn after React Fundamentals?
Next.js for Developers is the natural next step: it builds directly on the component, props, and hooks knowledge from this course.