Uploaded January 2021 | Updated September 2026, 2 weeks ago
Check out the latest version - youtube.com/watch?v=LDB4uaJ87e0
Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.
Code:
github.com/bradtraversy/react-crash-2021
React Front To Back 2022 Course:
udemy.com/course/react-front-to-back-2022/?referralCode=4A622C7E48DB66154114
💖 Support The Channel!
patreon.com/traversymedia
Timestamps:
0:00 - Intro & Slides
12:37 - Create a React app
14:52 - Files & folders
18:54 - App component & JSX
22:39 - Expressions in JSX
23:49 - Creating a component
27:18 - Component Props
28:50 - PropTypes
30:42 - Styling
34:17 - Button Component
37:46 - Events
40:18 - Tasks Component
41:03 - Create a list with .map()
43:07 - State & useState Hook
44:55 - Global state
46:52 - Task Component
49:30 - Icons with react-icons
51:41 - Delete task & prop drilling
55:50 - Optional message if no tasks
56:58 - Toggle reminder & conditional styling
1:03:13 - Add Task Form
1:06:16 - Form input state (controlled components)
1:09:18 - Add task submit
1:14:36 - showAddTask state
1:15:58 - Button toggle
1:19:33 - Build for production
1:21:51 - JSON Server
1:25:53 - useEffect Hook & Fetch tasks from server
1:30:13 - Delete task from server
1:31:51 - Add task to server
1:35:15 - Toggle reminder on server
1:39:15 - Routing, footer & about
Check out the latest version - youtube.com/watch?v=LDB4uaJ87e0
Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.
Code:
github.com/bradtraversy/react-crash-2021
React Front To Back 2022 Course:
udemy.com/course/react-front-to-back-2022/?referralCode=4A622C7E48DB66154114
💖 Support The Channel!
patreon.com/traversymedia
Timestamps:
0:00 - Intro & Slides
12:37 - Create a React app
14:52 - Files & folders
18:54 - App component & JSX
22:39 - Expressions in JSX
23:49 - Creating a component
27:18 - Component Props
28:50 - PropTypes
30:42 - Styling
34:17 - Button Component
37:46 - Events
40:18 - Tasks Component
41:03 - Create a list with .map()
43:07 - State & useState Hook
44:55 - Global state
46:52 - Task Component
49:30 - Icons with react-icons
51:41 - Delete task & prop drilling
55:50 - Optional message if no tasks
56:58 - Toggle reminder & conditional styling
1:03:13 - Add Task Form
1:06:16 - Form input state (controlled components)
1:09:18 - Add task submit
1:14:36 - showAddTask state
1:15:58 - Button toggle
1:19:33 - Build for production
1:21:51 - JSON Server
1:25:53 - useEffect Hook & Fetch tasks from server
1:30:13 - Delete task from server
1:31:51 - Add task to server
1:35:15 - Toggle reminder on server
1:39:15 - Routing, footer & about

![JavaScript Drag & Drop Sortable List Project
Learn the drag & drop API, array methods, spread operator, and DOM manipulation in this vanilla JavaScript project
Full 20 Projects Course:
https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75
Code: [MONTHNAME]2021
Code:
https://github.com/bradtraversy/vanillawebprojects/tree/master/sortable-list
TImestamps:
0:00 - Intro
2:27 - Insert List Items Into DOM
12:02 - Scramble List Items
18:44 - The CSS
31:07 - Drag & Drop Functionality
46:05 - Check Order JavaScript Drag & Drop Sortable List Project](https://i.ytimg.com/vi/wv7pvH1O5Ho/mqdefault.jpg)


