DotNetMastery

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

React JS - The Complete Guide [Full Course]

React JS - The Complete Guide [Full Course]

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path