React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks

Complete React Tutorial (inc. Hooks, Context API, React Router, Custom Hooks) Source Code - www.johnsmilga.com Projects Video -    • React Projects   Products I Use: Microphone - Shure SM7B - https://amzn.to/3fX55aD Headphones - Shure AONIC 50 - https://amzn.to/3zbkxHC Desk-Mounted Microphone Stand - https://amzn.to/3x3MBuS Crossover - dbx 234s - https://amzn.to/3xcryGC Audio Interface - Focusrite Scarlett 2i2 3rd Gen - https://amzn.to/3pt1wMx Cheaper Microphone (My first mic) - Blue Yeti USB Mic https://amzn.to/3iliwTm Blue Light Blocking Glasses - https://amzn.to/3fZASrv Apple MacBook Pro 13.3" - https://amzn.to/3z5QDEK iMac - https://amzn.to/3glWmOe Second Monitor - LG 4K UHD 27UD88 - https://amzn.to/3ckdwdV Wifi Router - TP-Link AC1900 - https://amzn.to/34ZSddz Desk Chair - https://amzn.to/3ikNbQJ Standing Desk - https://amzn.to/3zdKVAJ Books I Recommend: The Subtle Art of Not Giving a F*ck - https://amzn.to/3v9t8Yi The Tipping Point - https://amzn.to/3gCslKj Atomic Habits - https://amzn.to/3x52xNa 12 Rules for Life - https://amzn.to/3gln8pN Deep Work - https://amzn.to/3cyAgqu Digital Minimalism - https://amzn.to/3gao69A A World Without Email - https://amzn.to/351Swoe Rich Dad Poor Dad - https://amzn.to/3v8RWQ6 Rich Dad's Cashflow Quadrant - https://amzn.to/3ivt1Uk Check out My Amazon Store for more products and books recommendations - https://www.amazon.com/shop/codingaddict Disclosure: This video is not sponsored. Some links above are affiliate links, and l may earn a small commission from any purchases at no additional cost to you. Thank you for supporting my channel! Timeline Intro 00:00 About React 01:09 Goals 06:51 Structure 08:50 Course Requirements 09:46 Dev Environment Setup 11:45 Text Editor Setup 16:26 Command Line Basics 18:20 NPM Basics 25:00 Create-React-App 35:07 Install Create-React-App 37:05 Folder Structure 43:19 Clean Boilerplate 52:25 First Component 54:00 Text Editor Setup 1:04:13 First Component In Detail 1:12:29 JSX Rules 1:19:18 Nested Components And Tools 1:28:55 Mini Book Project 1:34:50 CSS Basics 1:42:59 JSX Css 1:54:41 JSX Javascript 2:01:31 Props 2:09:30 Props Destructuring 2:25:41 Props - Children 2:29:44 Simple List 2:36:13 Proper List 2:45:12 Key Prop And Spread Operator 2:52:49 Event Basics 2:58:52 Import And Export Statements 3:11:12 Free Hosting 3:23:25 Advanced Intro 3:28:22 Get Starter Project 3:30:42 Install Starter 3:31:35 Starter Overview 3:33:43 UseState - Simple Use Case 3:39:00 UseState - Basics 3:48:44 General Rules Of Hooks 4:00:47 UseState - Array Example 4:03:39 UseState - Object Example 4:17:27 UseState - Multiple State Values 4:23:00 Simple Counter 4:26:17 Functional Update Form 4:32:10 Matching Project 4:44:55 useEffect - Basics 4:47:27 useEffect - Conditional 4:57:47 useEffect - Dependency List 5:01:40 useEffect - Cleanup Function 5:07:13 useEffect - Fetch Data 5:19:24 Multiple Returns 5:31:29 Multiple Returns - Fetching Data 5:37:09 Short - Circuit Evaluation 5:52:07 Ternary Operator 6:02:50 Show/Hide Component 6:11:30 Form Basics 6:20:15 Controlled Inputs 6:28:53 Add Item To The List 6:38:09 Multiple Inputs 6:50:32 useRef 7:06:29 useReducer - UseState Setup 7:16:20 useReducer - Refactor 7:29:52 useReducer - Add Item 7:37:15 useReducer - Remove Item 7:53:14 Prop Drilling - 8:00:56 Context API / - useContext 8:14:36 Custom Hooks - useFetch 8:26:22 PropTypes - Setup 8:38:09 PropTypes - Images 8:47:48 PropTypes - Default Values 8:55:48 React Router Intro 9:00:41 React Router - Basic Setup 9:05:52 React Router - Error And Switch Component 9:15:50 React Router - Links 9:18:51 React Router - URL Params And Placeholder 9:23:22 React Optimization Warning 9:37:51 React.memo 9:41:21 useCallback 9:49:50 useMemo 9:58:00 useCallback - Fetch Example 10:04:15