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/De...
GitHub Link :
https://www.dotnetmastery.com/Home/De...
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?
Watch video React JS - The Complete Guide [Full Course] online without registration, duration hours minute second in high quality. This video was added by user DotNetMastery 04 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 26,322 once and liked it 752 people.