Intro to React - Build a Kanban Board

Опубликовано: 26 Сентябрь 2023
на канале: Jeffrey Codes

11,434

282

Learn React from scratch - no React, Typescript, or Tailwind experience necessary. Must understand HTML and Javascript.

Starter code: https://github.com/jeffreybiles/react...
Ending code: https://github.com/jeffreybiles/react...

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/