React JS – The Complete Guide [Full Course]

☕ 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?