☕ Coffee: https://www.buymeacoffee.com/bhrugen In this short course, we will learn React JS and its fundamentals by building 9 projects We will learn all the fundamentals along with advance concepts and related topic to make you proficient as a React.js developer. My Goal with this course is simple - being a .NET developer as technology evolves we have to adapt with front end frameworks. I want one course that will focus on making a backend developer give solid experience in React.js in a manner that is easy to understand and provides extensive depth to master the fundamentals and advance concepts in React.js .NET API and ECommerce React Course Link (22hr course): https://www.dotnetmastery.com/Home/Details?courseId=29 GitHub Link : https://www.dotnetmastery.com/Home/Details?courseId=29 All GitHub Repo: https://github.com/bhrugen ⭐️ Course Contents ⭐️ Section 1: Introduction (0:00:01) Welcome (0:00:56) Why this course? (0:02:19) What we will build? (0:07:49) What’s next after this course? (0:08:56) What is react and why should you learn it? (0:13:49) Project Resources (0:15:34) Tools Needed (0:17:50) Visual Studio Code Extensions Section 2 - React Fundamentals (0:21:05) Setup basic HTML and add React CDN (0:24:13) First React Code (0:27:32) Assignment 1 – Writing first react code (0:28:57) Creating element and rendering in react 18 (0:31:21) What is JSX? (0:35:53) Demo - Create React App (0:37:40) Run the Project (0:39:30) Cleanup Project (0:42:56) Make project Functional again (0:45:31) First React Component (0:50:50) Assignment 2 (0:52:01) Assignment 3 – Parent child component (0:53:01) Assignment 3 solution - Parent child component (0:54:27) Rules of JSX Section 3 - React Components (0:56:13) Work with styles (0:59:54) Adding Bootstrap Classes (1:02:01) Work with Classes Part 1 (1:05:40) Variable in JSX (1:08:27) Assignment 3 - Adding Const (1:09:05) Assignment 3 solution – Adding Const (1:09:41) HTML Element in JSX (1:14:01) Student Component (1:19:44) Export and Import Component (1:22:55) Assignment 4 - Separating Student Component (1:24:27) Assignment 4 Solution- Separating Student Component (1:25:29) Props and Components (1:29:47) Install third party libraries and Images (1:35:05) Import Image and Header Design (1:37:59) Footer and Main body Component (1:41:33) Assignment 5 (1:44:01) Passing Component as Children (1:48:37) Final Hierarchy (1:50:11) Arrow Function (1:53:11) Functional vs Class components (1:56:15) Class Components (2:00:23) Assignment 6 – Convert Mainbody to Class Component Section 4 - React State - CounOPedia (2:01:05) Create CountOPedia (2:04:13) Assignment 7 Solution – Setup CountOPedia (2:08:07) Counter Application Buttons (2:09:38) Click Events (2:11:22) Setting and Retrieving State (2:15:26) Demo – React State (2:20:36) State Summary (2:22:43) New SetState Syntax (2:27:36) CountOPedia UI (2:32:04) Random Play and Reset Button (2:36:18) Assignment 8 – Game Status and Last Play (2:37:42) Assignment 8 Solution – Game Status and Last Play Section 5 - ContactOPedia - CRUD Operations (2:41:37) Create Project – ContactOPedia (2:44:22) Add Components (2:44:13) Skelton of Components (2:54:38) Add Contact UI (2:57:12) Favorite and General Contact State (3:04:42) Individual Contact UI (3:11:17) Look and Feel ContactOPedia (3:14:20) Add Contact Handler (3:18:54) Add Contact in Action (3:24:09) Add Validations (3:29:30) Display Validation and Success Notification (3:32:19) Toggle Favorites (3:41:42) Assignment 10 – Delete Contacttscproj (3:42:19) Assignment 10 Solution – Delete Contact (3:45:37) Add Random User to Contact List (3:49:31) Axios Call (3:56:06) Demo – Adding Random Contact (3:59:28) Assignment 11 – Remove All Contact (3:59:41) Assignment 11 Solution – Remove All Contact (4:01:29) Which Contact has to be updated (4:07:15) Toggle UI Based on Update (4:13:34) Cancel Button in Action (4:15:30) Update Contact – Part 1 (4:20:57) Update Contact – Part 2 Section 6 - CyclOPedia - Lifecycle Methods Class Components (4:23:25) Create Project - Cyclopedia (4:26:30) Setup Random API (4:29:35) Display Instructor (4:36:56) Component Did Update (4:41:49) Controlled Component (4:46:60) Saving in LocalStorage (4:52:30) Separating out Instructor (4:55:10) Component will UnMount Section 7 - WatchOPedia - Hooks in React (5:07:57) Create WatchOPedia (5:12:53) Setup Counter (5:14:59) UseState in Action (5:20:01) Gotches with UseState (5:25:23) Objects and State (5:27:30) Another Gotcha with useState (5:29:59) Something Exciting (5:31:07) WatchoPedia Movie Setup (5:35:12) Assignment 12 Solution– Display Movie List (5:38:03) Assignment 13 Solution – Add Movie to Watch (5:43:22) Section 8 - CyclOPedia - Lifecycle Methods Functional Components (6:27:01) Section 9 - RouteOPedia - Routing in React (7:09:25) Section 10 - ReduxOPedia - Redux and React (8:17:17) Section 11 - TravelOPedia - Redux Toolkit, Query, Mutations and Slice (9:35:57) Whats Next?