React Crash Course

Video Description

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