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 & wellorganized code

Project code on GitHub: https://github.com/codinginflow/2024...

⭐ Get my fullstack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
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:   / codinginflow  
Instagram:   / codinginflow  
TikTok:   / codinginflow  
Facebook:   / 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?