English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 14 Hours | 5.76 GB
Fundamentals, Router, Context API, Hooks, Redux, Redux-Toolkit, HTTP & REST API calls, React with TypeScript etc.
In this comprehensive course, we will go through the prior and newer versions of ReactJS with the primary focus on understanding the latest version(17).
The entire course is prepared in a methodical way so that candidates learn & master ReactJS fundamentals through smaller applications, get prepared for interviews & advanced concepts in the simplest of ways.
“React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces or UI components.”
Candidates trained by me are now working with fortune 500 companies in the US. This project-based course will make your journey easier in becoming a hands-on React.js developer.
The end of the course has a concise Amazon-like eStore project using MySQL,Express.js,ReactJS,Node.js, which is built with all the latest React techniques like Redux, React Hooks, React Router(SPA), Class & functional components, Axios, Node.js, Express.js, GitHub, payment gateway and more…
As mentioned, the course is completely hands-on from the 1st lecture – making sure you make the most out of each lecture as you progress ahead.
On completion of this course, you’ll be able to handle real-world applications like any other ReactJS developer.
What’s in the course?
If you have seen my other courses, you’ll know that we always have sections packed with beginner to advanced level content, so once again it is advised to check the full course curriculum first to get a clear idea of all the topics and then start step by step.
Here’s a quick summary of what you’ll find in the course:
- React fundamentals(version 17)
- React Hooks
- Standard React practices
- Code optimization
- List & Keys
- Forms
- React-Router (SPA – Single-page application)
- Context API
- Redux
- Asynchronous Redux
- Redux Toolkit (RTK) – Modern Redux
- React with TypeScript
- Comprehensive React eStore project
- Testing
In the eStore project, you’ll learn the following:
- Configuring large projects
- Axios
- GitHub for source & version control
- MySQL installation & working knowledge
- Configuring RESTful API with Node.js & Express.js
- Creating shopping cart
- Configuring payment gateway
I recommend that you have a basic knowledge of HTML, CSS & JavaScript before starting this course.
What you’ll learn
- Basic to advanced level practical concepts in React development
- Learn and understand what is React and how it works
- Learn to use React Hooks for building functional components
- Prepare for real- world interview questions on one of the most in-demand web development technologies
Table of Contents
React Fundamentals
1 Introduction
2 React Is Declarative
3 Component Based Architecture
4 Creating & Understanding React 17 Project Architecture
5 props Destructuring
6 Concept of State & useState() Hook
7 Lazy Initial State
8 Basic Event Handling & Parameter Passing
9 Applying External & Inline Styling
10 JSX – In-depth
11 New JSX Transform
12 Primitive Types & Object Literal with useState()
13 Class Component Basics
14 Class Component state update with setState()
15 Component Lifecycle Methods Basics
16 useEffect() – Creating A Digital Clock Using useEffect()
17 useEffect() Multiple States & Skipping Effects For Optimization
18 Conditional Rendering – Cleaning Up An Effect
19 ref – The Older way
20 React.createRef() method
21 useRef() hook
22 React.memo() & useCallback() hook
List & Keys
23 Introduction
24 map() method
25 String Array Rendering
26 Keys
27 Fixed stable keys
28 List with a component
29 Embedding map() in JSX
React Router [SPA-Single Page Application]
30 Multi-page Application(MPA) Single-page Application(SPA) Basics
31 Defining Routes
32 Route Matchers – Switch & exact
33 Route Parameters & Dynamic Routes with useParams hook
34 Nested Route, match object & useRouteMatch() hook
35 Redirect
36 NoMatch(404)
37 NavLink Vs. Link
38 useHistory() hook
39 Preventing Navigation – Prompt
40 Query Parameters
Context API
41 “prop” drilling
42 First Step – All in App.js
43 Creating Cart & Total component
44 context API – Implementation
45 useContext() – New & Better Consumer!
Redux
46 Redux – Introduction
47 Setting-up the redux-demo Application
48 Creating Global Store & Reducer
49 Providing store with Provider
50 useSelector() hook
51 useDispatch() hook
52 Class Component – Accessing store in class component
53 Action Creator & Event Dispatching (Class Component)
54 Delete Cart Item
55 Combine Reducers Part-1
56 Combine Reducers Part-2
57 Action Type Constants
Asynchronous Redux
58 Why Asynchronous Redux
59 Action Creator – validateUser()
60 redux-thunk
Redux Toolkit (RTK) – Modern Redux
61 Redux Toolkit(RTK) – Introduction & Installation
62 Creating Slice
63 configureStore() – Store creation
64 Dispatching Actions – The RTK way
65 thunk – Asynchronous
Handling Http Requests
66 Fetching Data
67 fetch Api – Refresher
68 Displaying Users Data
69 Creating Components – Users Todos
70 Conditional Rendering Implementation
71 Error Handling
eStore project
72 Creating Header Component
73 Component Based Architecture
74 Implementing SASS(.scss)
75 Top Menu Component
76 Sidebar Component
77 Product Component
78 Finetuning CSS Design
79 GitHub Configuration
80 Implementing Redux For Global State
81 Configuring Sidebar Component With Redux Using Hooks
82 Configuring Product Component With Redux Using Hooks
83 Configuring MySQL
84 Defining API End Point For Product Categories
85 Calling API From React Using Axios
86 Creating API End Point & Database For Product Categories
87 Displaying Product Component Data Inside React
88 Adding Cart Icon In Product Component
89 Implementing Cart On Product Click
90 Filtering Product On Category Selection
91 Applying Multiple Category Selection Filter
92 Applying Price Filter
93 Configuring React Router
94 Formatting Product Details
95 Adding Product To Cart From Product Detail Page
96 Implementing Cart Functionalities
97 Configuring Payment Gateway
98 Configuring Payment Gateway Inside Node.js
99 Displaying Response In Component
100 Google Authentication
101 Creating Separate Login Form
Resolve the captcha to access the links!