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