Mastering React With Interview Questions,eStore Project-2022

Mastering React With Interview Questions,eStore Project-2022

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 152 lectures (17h 12m) | 7.16 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

props & JSX – In Depth
30 Introduction
31 Expression & String Literals
32 props default to True
33 Spread Attributes
34 props.children property
35 React.Fragment

Event Handling – In-Depth
36 Event Handling – In-depth Introduction
37 Quick Essential Recap – Events
38 SyntheticEvent
39 Input Event – Textbox
40 preventDefault – Preventing default behavior
41 form with Multiple States
42 form – States as Object
43 Single Event Handler Using Dynamic Key
44 Functional Update – The Correct Way
45 Checkbox or Radio – Input fields

Conditional Rendering – In-Depth
46 Introduction
47 Conditional Rendering with if…else…
48 Inline if-else [ condition true false]
49 JSX – Element Variable
50 switch…case…
51 Logical && Operator

React Router [SPA-Single Page Application]
52 Multi-page Application(MPA)Single-page Application(SPA) Basics
53 Defining Routes
54 Route Matchers – Switch & exact
55 Route Parameters & Dynamic Routes with useParams hook
56 Nested Route, match object & useRouteMatch() hook
57 Redirect
58 NoMatch(404)
59 NavLink Vs. Link
60 useHistory() hook
61 Preventing Navigation – Prompt
62 Query Parameters

Context API
63 “prop” drilling
64 First Step – All in App.js
65 Creating Cart & Total component
66 context API – Implementation
67 useContext() – New & Better Consumer!

Redux
68 Redux – Introduction
69 Setting-up the redux-demo Application
70 Creating Global Store & Reducer
71 Providing store with Provider
72 useSelector() hook
73 useDispatch() hook
74 Class Component – Accessing store in class component
75 Action Creator & Event Dispatching (Class Component)
76 Delete Cart Item
77 Combine Reducers Part-1
78 Combine Reducers Part-2
79 Action Type Constants

Asynchronous Redux
80 Why Asynchronous Redux
81 Action Creator – validateUser()
82 redux-thunk

Redux Toolkit (RTK) – Modern Redux
83 Redux Toolkit(RTK) – Introduction & Installation
84 Creating Slice
85 configureStore() – Store creation
86 Dispatching Actions – The RTK way
87 thunk – Asynchronous

Handling Http Requests
88 Http Requests – Introduction
89 fetch Api – Refresher
90 Fetching Data
91 Displaying Users Data
92 Creating Components – UsersTodos
93 Conditional Rendering Implementation
94 Error Handling

React with TypeScript
95 Introduction
96 Installing TypeScript Compiler
97 Variables & Datatypes
98 Type Annotation & Inference
99 Creating React & TypeScript Project
100 React.FC – TypeScript FunctionalComponent
101 Interface & Optional Attributes
102 useState() with TypeScript
103 onClick – Event Handling with TypeScript
104 onChange – EventHandling with TypeScript
105 select – Working with Dropdown
106 useRef() with TypeScript

Automated Testing in React
107 Introduction to Automated Testing
108 Types of Automated Tests
109 Jest Vs. Enzyme
110 React Project & Testing – First Step
111 Understanding TDD – Test Driven Development
112 Beginning Practical Test
113 getByTestId() and data-testid
114 Button Click Test – fireEvent
115 userEvent Vs. fireEvent
116 Matchers – toBe() or not.toBe() & more…
117 Test with input element
118 Resolving Input Change Issue
119 Asynchronous Testing
120 Mock Test – Mocking fetch() API
121 beforeEach() & afterEach()
122 Snapshot Testing

eStore project
123 Creating Header Component
124 Component Based Architecture
125 Implementing SASS(.scss)
126 Top Menu Component
127 Sidebar Component
128 Product Component
129 Finetuning CSS Design
130 GitHub Configuration
131 Implementing Redux For Global State
132 Configuring Sidebar Component With Redux Using Hooks
133 Configuring Product Component With Redux Using Hooks
134 Configuring MySQL
135 Defining API End Point For Product Categories
136 Calling API From React Using Axios
137 Creating API End Point & Database For Product Categories
138 Displaying Product Component Data Inside React
139 Adding Cart Icon In Product Component
140 Implementing Cart On Product Click
141 Filtering Product On Category Selection
142 Applying Multiple Category Selection Filter
143 Applying Price Filter
144 Configuring React Router
145 Formatting Product Details
146 Adding Product To Cart From Product Detail Page
147 Implementing Cart Functionalities
148 Configuring Payment Gateway
149 Configuring Payment Gateway Inside Node.js
150 Displaying Response In Component
151 Google Authentication
152 Creating Separate Login Form

Homepage