Learn React from scratch - no React, Typescript, or Tailwind experience necessary. Must understand HTML and Javascript.
Starter code: https://github.com/jeffreybiles/react-intro-kanban/tree/intro-to-react-start
Ending code: https://github.com/jeffreybiles/react-intro-kanban/tree/intro-to-react-end
0:00 Preview
1:45 Setup Node, Vite, and initialize the project
3:19 Setup Tailwind, remove boilerplate
7:21 Tailwind Basics
8:57 JSX Basics
12:56 Building a Task card
16:55 Reusable React Components
22:11 Typescript Crash Course
30:05 Refactoring, folder reorganization
31:25 Arrays in JSX
34:10 Building Columns for each status
40:56 Improving styling
43:43 JSX Conditionals and adding priority icons
49:29 Interactivity with onClick and useState - adding points
55:15 Updating data from React Components - Data Down, Actions Up
1:03:18 Fibonacci Points
1:07:53 Text Input - onChange and onBlur
1:12:00 Refactoring - abstracting to updateTask
1:14:43 Click and Drag - changing columns with onDragStart and onDrop
1:19:28 Hover Effects for dragged cards
1:24:03 JSON Server - setting up API endpoints
1:28:46 Loading data with useEffect
1:31:36 Persisting data with PUT requests to JSON Server
Want to work with me? https://www.jeffreybiles.com/consulting/
