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-crash-2024
React Front To Back Full Course:
https://www.traversymedia.com/Modern-React-Front-To-Back-Course
Check out all my courses:
https://traversymedia.com
Social Media:
Github – https://github.com/bradtraversy
Twitter – https://twitter.com/traversymedia
Instagram – https://www.instagram.com/traversymedia
Facebook – https://www.facebook.com/traversymedia
Linkedin – https://www.linkedin.com/in/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
source
