Learn React With This One Project

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·2mo ago

Key Takeaways

Builds a React project for beginners

Original Description

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 Reads

📰
React Introduction
Learn the basics of ReactJS and how to build dynamic user interfaces with this popular JavaScript library
Dev.to · Karthick (k)
 📰
Why SnapDOM Beats html2canvas for DOM-to-Image Capture
Learn why SnapDOM outperforms html2canvas for DOM-to-image capture and how to use it in your frontend projects
Dev.to · Juan Martin
 📰
I built 42 landing page templates as single HTML files (no npm, no build step)
Learn how to create simple landing page templates as single HTML files without relying on npm or build steps, and why this approach matters for efficient web development
Dev.to · Segcam spa
 📰
Part 7B — Section 2 — React Event Handling Explained: Forms, Event Object & User Input.
Learn React event handling for forms and user input to improve your frontend skills
Medium · JavaScript

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
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →