React Crash Course
About
No channel description available.
Latest Posts
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
Boost Your Web Dev Skills Now
AI-recommended products based on this video

Magnetic Nasal Strips Starter Kit: Comfortable Nasal Breathing Support for Sleep, Helps Reduce Snoring Noise, Includes 60 Tabs (30 Uses) with 4 Sizes

Environet Hydroponic Growing Kit, Self-Watering Mason Jar Herb Garden Starter Kit Indoor, Windowsill Herb Garden, Grow Your Own Herbs from Organic Seeds (Basil)

Herb Garden Planter Indoor Kit 21Pcs Kitchen Herb Garden Starter Kit Growing Kit Including Wooden Box Burlap Pots Soil Discs Gardening Tools Unique Easter Birthday Christmas Gift Ideas for Women Mom

Bonsai Starter Kit – 1x Bonsai Tree | Complete Indoor Starter Kit for Growing Plants with Bonsai Seeds, Tools & Planters – Gardening Gifts for Women & Men

BBQ Lighter,Barbecue Lighter,BBQ Long Reach Refillable Candle Fire for Indoor & Outdoor,Long Neck Adjustable Lighter Butane Gas Refillable Plastic Lighter Kitchen Igniter




















