The easiest way to skyrocket your YouTube subscribers
Get Free YouTube Subscribers, Views and Likes

React Crash Course 2024

Follow
Traversy Media

Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.

Code:
https://github.com/bradtraversy/react...

React Front To Back Full Course:
https://www.traversymedia.com/Modern...

Check out all my courses:
https://traversymedia.com

Social Media:
Github https://github.com/bradtraversy
Twitter   / traversymedia  
Instagram   / traversymedia  
Facebook   / traversymedia  
Linkedin   / bradtraversy  

Timestamps:

0:00 Intro
1:55 What Is React? (Slide)
3:43 Why React? (Slide)
7:19 What Are Components? (Slide)
8:21 What Is State? (Slide)
10:00 What Are Hooks? (Slide)
11:17 What Is JSX? (Slide)
12:42 SPA, SSR, SSG (Slide)
15:38 Vite (Slide)
16:30 Project Demo
19:53 Setup React With Vite
22:29 File Explanation
25:11 Boilerplate Cleanup
26:48 Tailwind CSS Setup
30:24 JSX Crash Course
39:37 Start Homepage
42:00 Navbar Component
43:56 Image Import
45:24 Hero Component
46:17 Props
48:00 Default Props
48:51 Wrapper Components
55:14 JobListings Component
58:50 Create Lists With map()
1:03:20 Single JobListing Component
1:05:49 Limit Jobs to 3
1:07:50 useState() Hook & Desc Toggle
1:13:07 Creating an Event
1:14:20 Updating Component State
1:16:00 React Icons Package
1:18:00 React Router Setup
1:20:21 Create Routes From Elements
1:21:36 Router Provider
1:22:36 Homepage Component/Route
1:24:40 Layouts
1:29:06 Jobs Page Component/Route
1:30:50 Link Component
1:34:20 Custom 404 Page
1:36:55 Active Links With NavLink
1:41:00 Conditional Rendering
1:43:10 JSON Server Setup
1:47:00 useEffect() & Data Fetching
1:53:07 Loading Spinner
1:51:06 Conditional Fetching
1:59:45 Proxying
2:03:38 Single Job Page
2:09:04 useParams() to Get ID
2:12:25 Data Loaders
2:16:36 Single Job Output
2:22:00 Add Job Page
2:23:40 Working With Forms
2:30:05 Form Submission
2:35:27 Pass Function as Prop
2:39:32 POST Request to Add Job
2:41:45 Delete Job Button/function
2:45:12 DELETE Request to Remove Job
2:46:50 React Toastify Package
2:50:08 Edit Job Page/Form
2:56:05 Update Form Submission
2:58:54 PUT Request to Update Job
3:02:10 Build Static Assets For Production

posted by citystyleeevq