React JS Full Course (20 HOUR All-in-One Tutorial for Beginners) - PART 1!

Video Description

💰 Mentorship to six figure software engineer - https://calcur.tech/mentorship ⚙️ Backend Engineering Mind Map - https://calcur.tech/mindmap 💻 System Design Playlist - https://calcur.tech/system-design Timestamps: 00:00 - Introduction 12:38 - Intro to React 23:14 - Create React App Files Explained 34:07 - Our First Component 45:57 - Understand Props in Components 53:07 - Intro to useState Hook 01:01:19 - Install Tailwind CSS for React 01:08:29 - Styling React with Tailwind CSS Classes 01:17:58 - Map through State Array (Loop) 01:28:38 - Create a Popup Modal with React Bootstrap 01:35:20 - Create and Style HTML Form 01:45:03 - Profile Form Data in Modal 01:52:32 - Update Parent Component State in Child Component 02:05:25 - How to Push to State Array 02:18:52 - Pass a Component to Props 02:25:27 - Create a Navbar with Tailwind CSS 02:34:13 - Pages and props.children 02:41:04 - Routing with React Router 02:46:40 - Create an Active Page Link in Navbar 02:53:41 - Finishing up Our Header 03:04:51 - Intro to useEffect Hook 03:16:55 - useEffect Dependency Array Explained 03:25:13 - Fetch an API to Display on Page 03:41:20 - URL Parameters in Router 03:45:44 - Redirect with useNavigate Hook 03:52:58 - Create 404 (Not Found) Page 04:03:08 - Fetch Response Status Codes and Errors 04:11:38 - Build and Style a Search Component 04:23:07 - Setup a Django Backend (Full Stack App) 04:34:06 - Create a REST API Backend 04:53:43 - Consume Backend API 05:06:22 - Create a Details by ID API 05:13:22 - Create a Details Page 05:21:36 - Return 404 From Backend API (Django) 05:29:56 - Code a Full CRUD API (Crate, Read, Update, Delete 05:45:09 - DELETE Request with Fetch 05:53:12 - Popup Modal to Add Data (POST) 06:03:53 - Close modal on POST Success (and Add Results to State) 06:12:37 - Dynamic Edit Form to Update API Data 06:29:18 - Comparing State Objects 06:38:48 - Display Form Errors on Page 06:48:53 - Tailwind CSS Form and Button Styling 07:04:09 - Intro to JWTs and Authentication (JSON Web Tokens) 07:14:41 - Create a Login Page 07:30:11 - localStorage and Bearer Auth Tokens 07:37:32 - useLocation and useNavigate State (Redirect to Previous Page on Login) 07:49:15 - useContexct Hook Introduction 08:03:19 - Create a Logout Button 08:15:38 - Auth Refresh Tokens 08:31:05 - User Register Form and API 08:43:35 - Create a Custom Hook (useFetch) 08:53:58 - Destructuring Explained (Custom Hook Parameters and Return Data) 09:09:11 - Default Values and Nested Data with Restructuring 09:16:40 - Custom Hook on Button Click (onClick POST with useFetch) 09:35:04 - TypeScript and Axios Intro 09:53:11 - TypeScript Components 10:02:36 - Generate Drop Down List from API 10:11:36 - Crypto Price Chart with Chart.js 10:26:37 - Dynamic Chart with Multiple Drop Downs (Chart.js) 10:42:18 - Calculate Crypto Values 10:55:36 - Aggregate Data with map and reduce 11:17:18 - Pie Chart with Chart.js (react-charts-2) 11:27:50 - GraphQL API and Apollo Intro 11:43:02 - GraphQL in Django Backend (Graphene) 💯 FREE Courses (100+ hours) - https://calcur.tech/free-courses 🏆 C++ Mastery Course - https://calcur.tech/cpp-mastery 🐍 Backend Python Course - https://calcur.tech/backend-python 🥇 Python Mastery Course - https://calcur.tech/python-mastery ~~~~~~~~~~~~~~~ CONNECT ~~~~~~~~~~~~~~~ ✉️ Newsletter - https://calcur.tech/newsletter 📸 Instagram - https://www.instagram.com/CalebCurry 🐦 Twitter - https://twitter.com/calebCurry 🔗 LinkedIn - https://www.linkedin.com/in/calebcurry ▶️ Subscribe - http://calcur.tech/subscribe 👨🏻‍🎓 Courses - https://www.codebreakthrough.com 🅿 Patreon - http://calcur.tech/patreon-calebcurry