Learn React With This One Project

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·1mo ago
React Simplified Course: https://learn.webdevsimplified.com/react-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-9aTRnV6g0eQ&utm_campaign=react-promo-2026-05 FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-9aTRnV6g0eQ Learning React is hard, especially if you are just getting started. In this video I will show you how to build out a full React application while also explaining every single important React concept you need to know. 📚 Materials/References: GitHub Code: https://github.com/WebDevSimplified/react-habit-tracker} React Simplified Course: https://learn.webdevsimplified.com/react-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-9aTRnV6g0eQ&utm_campaign=react-promo-2026-05 FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-9aTRnV6g0eQ 🌎 Find Me Here: My Blog: [https://blog.webdevsimplified.com](https://blog.webdevsimplified.com/) My Courses: [https://courses.webdevsimplified.com](https://courses.webdevsimplified.com/) Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00:00 - Introduction 00:01:02 - Setup React 00:04:24 - Setup Tailwind 00:06:27 - Thinking in Components 00:08:15 - Custom Components 00:14:26 - Props 00:19:20 - Form Custom Component 00:22:40 - Habit List Custom Component 00:24:40 - Rendering Arrays 00:28:15 - Habit Item Component 00:37:00 - Advanced Props 00:47:55 - useState Hook 01:10:30 - Conditional Rendering 01:11:50 - useContext Hook 01:22:46 - Making UI Reactive 01:32:51 - Rules of Hooks Hooks 01:34:30 - Custom Hooks 01:37:18 - useEffect Hook #TypeScript #WDS #ReactJS
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

⚡
Signals vs React Compiler: The Fine-Grained Reactivity Showdown
Compare Signals and React Compiler for fine-grained reactivity in frontend development to determine which one suits your needs best
Dev.to · Ahmed Mahmoud
 ⚡
Lightweight JavaScript Library for Visual Hierarchical Data Creation, Preview, and Validation
Learn about a lightweight JavaScript library for creating, previewing, and validating visual hierarchical data structures
Dev.to · Pavel Kostromin
 ⚡
How to Detect Which Font Is Actually Rendering in a Browser (Not Just the CSS Stack)
Learn to detect the actual font rendering in a browser, beyond the CSS stack, to ensure design consistency
Dev.to · SHOTA
 ⚡
Animate with Pseudorandom Numbers: Value Noise in a CSS Variable
Create animations using pseudorandom numbers with value noise in CSS variables
Reddit r/webdev

Chapters (18)

Introduction
1:02 Setup React
4:24 Setup Tailwind
6:27 Thinking in Components
8:15 Custom Components
14:26 Props
19:20 Form Custom Component
22:40 Habit List Custom Component
24:40 Rendering Arrays
28:15 Habit Item Component
37:00 Advanced Props
47:55 useState Hook
1:10:30 Conditional Rendering
1:11:50 useContext Hook
1:22:46 Making UI Reactive
1:32:51 Rules of Hooks Hooks
1:34:30 Custom Hooks
1:37:18 useEffect Hook
Up next
WP Rocket | Slow Website = Lost Money
Daniel | Tech & Data
Watch →