React Beginner Course 2024 (Vite, Tailwind CSS, TypeScript)

Learn the basics of React.js with Tailwind CSS and TypeScript. You will learn: -How to set up a new React project using Vite -How to install & use Tailwind CSS in React -How to think in React -The difference between declarative and imperative code -What are components, props, JSX, SPA, unidirectional data flow, callbacks, state, side effects, and more -How to build your first app with clean & well-organized code Project code on GitHub: https://github.com/codinginflow/2024-react-beginner ⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs ✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices 💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter 💬 Join our developer community on Discord: https://codinginflow.com/discord 📣 Follow Coding in Flow on social media: Twitter: https://twitter.com/codinginflow Instagram: https://instagram.com/codinginflow TikTok: https://tiktok.com/@codinginflow Facebook: https://facebook.com/codinginflow Timestamps: 0:00 - Introduction 2:29 - React project setup (VS Code, Node.js, Create Vite) + What is TypeScript? 12:05 - Imperative vs declarative explained 15:53 - Tailwind CSS setup (with Vite) + Tailwind CSS IntelliSense setup 26:17 - Rendering lists with map (+ React project structure) 33:55 - Components & props explained, conditional className 44:11 - Unidirectional data flow explained, callback props 51:28 - useState + updating state in React 58:08 - Add to state in React, form, controlled vs uncontrolled input 1:11:31 - Derive state (sort), component rendering explained, prop drilling, conditional rendering 1:25:53 - Todo summary sibling component, filter, delete all completed todos 1:33:07 - useEffect (side effects), local storage, useState initializer function 1:38:22 - Custom hook + What are hooks in React?