Learn React With This One Project

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·2d 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

⚡
The Ultimate Showdown the security of React Server Components and Remix 3: What Matters
Learn how to secure your React applications with Server Components and Remix 3, and understand the key differences in their security approaches
Dev.to · ANKUSH CHOUDHARY JOHAL
 ⚡
Unlock Modern Web Experiences with Professional React JS Development Services
Learn how professional React JS development services can help create modern web experiences with high functionality and interactivity
Medium · AI
 ⚡
React Hooks Explained So Simply Even a 10-Year-Old Can Understand
Learn React Hooks in simple terms to improve your frontend development skills
Medium · Programming
 ⚡
To Do List Project Using Html,Css and Javascript
Build a to-do list project using HTML, CSS, and JavaScript to improve your front-end development skills
Dev.to · Deva I

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
Linux Kernel Would Randomly Explode In The Past
Brodie Robertson
Watch →