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

⚡
Converting HEIC to JPG entirely in the browser (no upload, no server)
Convert HEIC to JPG in-browser without uploading or server-side processing, enabling cross-platform image compatibility
Dev.to · gan liu
 ⚡
How I Add Watermarks to PDFs in the Browser with Vue 3 and pdf-lib
Learn to add watermarks to PDFs in the browser using Vue 3 and pdf-lib
Dev.to · sunshey
 ⚡
Excited to share my developer portfolio! It showcases my projects, skills, and experience in React, Next.js, TypeScript, and modern frontend development. 🌐 https://saurabhpatil84.netlify.app/ Feedback is always welcome!
Create a developer portfolio to showcase projects, skills, and experience in modern frontend development, and get feedback from the community.
Dev.to · Saurabh Patil
 ⚡
I Built a Random Wheel Spinner and Learned That Simple Tools Are the Hardest to Get Right
Building simple tools like a random wheel spinner requires attention to detail and iterative testing to get right, which is a valuable lesson for developers
Dev.to · Getinfo Toyou

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 →