Mastering React With Interview Questions,eStore Project-2024
In this comprehensive course, we will go through the prior and newer versions of ReactJS with the primary focus on understanding the latest version(18).
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.
More
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.
Take action today and enroll in this comprehensive course.
Watch Online Mastering React With Interview Questions,eStore Project-2024
# | Title | Duration |
---|---|---|
1 | Introduction | 01:55 |
2 | React Is Declarative | 03:50 |
3 | Component Based Architecture | 18:26 |
4 | Creating & Understanding React Project Architecture | 11:07 |
5 | npm vs. npx | 03:34 |
6 | React 18 - Goodbye ReactDOM.render() | 02:28 |
7 | React 18 - Migrating from v17 to v18 | 02:31 |
8 | "props" Destructuring | 09:19 |
9 | Concept of State & useState() Hook | 11:27 |
10 | Lazy Initial State | 06:31 |
11 | Basic Event Handling & Parameter Passing | 08:38 |
12 | Applying External & Inline Styling | 06:46 |
13 | JSX - In-depth | 10:14 |
14 | New JSX Transform | 04:47 |
15 | Primitive Types & Object Literal with useState() | 11:59 |
16 | Class Component Basics | 07:41 |
17 | Class Component "state" update with setState() | 07:16 |
18 | Component Lifecycle Methods Basics | 09:51 |
19 | useEffect() - Creating A Digital Clock Using useEffect() | 08:30 |
20 | useEffect() Multiple States & Skipping Effects For Optimization | 05:19 |
21 | Conditional Rendering - Cleaning Up An Effect | 09:57 |
22 | "ref" - The Older way | 05:18 |
23 | React.createRef() method | 02:50 |
24 | useRef() hook | 03:35 |
25 | React.memo() & useCallback() hook | 17:46 |
26 | Introduction | 00:48 |
27 | map() method | 08:52 |
28 | String Array Rendering | 04:17 |
29 | Keys | 05:17 |
30 | Fixed Stable Keys | 02:35 |
31 | List With A Component | 04:24 |
32 | Embedding map() In JSX | 01:51 |
33 | Introduction | 01:03 |
34 | Expression & String Literals | 04:47 |
35 | "props" default to True | 01:25 |
36 | Spread Attributes | 02:54 |
37 | props.children property | 03:04 |
38 | <React.Fragment> | 02:45 |
39 | Event Handling - In-depth Introduction | 00:53 |
40 | Quick Essential Recap - Events | 04:28 |
41 | SyntheticEvent | 05:35 |
42 | Input Event - Textbox | 03:11 |
43 | preventDefault - Preventing default behavior | 05:17 |
44 | <form> with Multiple States | 08:16 |
45 | <form> - States as Object | 06:21 |
46 | Single Event Handler Using Dynamic Key | 05:04 |
47 | Functional Update - The Correct Way | 02:53 |
48 | Checkbox or Radio - Input fields | 03:31 |
49 | Introduction | 01:16 |
50 | Conditional Rendering with if...else… | 07:42 |
51 | Inline if-else [ condition? true: false] | 02:56 |
52 | JSX - Element Variable | 02:54 |
53 | switch...case… | 01:47 |
54 | Logical && Operator | 02:14 |
55 | MPA vs. SPA | 03:26 |
56 | Defining Routes | 13:25 |
57 | Menu Formatting | 01:45 |
58 | URL Vs. Routes & Default Page Setup | 03:15 |
59 | Dynamic Routes - useParams() hook | 10:41 |
60 | Nested Routes - <Outlet/> | 05:13 |
61 | Not Found Page (404) | 03:24 |
62 | index Attribute - Referring The Parent Route | 03:47 |
63 | Dynamic Products Data - useState() & route Configuration | 05:30 |
64 | context & useOutletContext() hook - Passing Data To Child Component | 03:36 |
65 | "state" & useLocation() hook - The Correct Way Of Data Sharing | 03:31 |
66 | Improvizing The Interface | 04:08 |
67 | useRoutes() hook - Javascript instead of JSX | 05:36 |
68 | NavLink - For Better Styling | 04:38 |
69 | <Navigate> To Redirect | 01:56 |
70 | useNavigate() hook | 03:59 |
71 | Multi-page Application(MPA)/Single-page Application(SPA) Basics | 03:19 |
72 | Defining Routes | 10:49 |
73 | Route Matchers - <Switch> & exact | 06:06 |
74 | Route Parameters & Dynamic Routes with useParams hook | 09:07 |
75 | Nested Route, match object & useRouteMatch() hook | 10:11 |
76 | Redirect | 02:57 |
77 | NoMatch(404) | 05:11 |
78 | <NavLink> Vs. <Link> | 06:14 |
79 | useHistory() hook | 06:10 |
80 | Preventing Navigation - <Prompt> | 05:33 |
81 | Query Parameters | 08:25 |
82 | “prop” drilling | 05:11 |
83 | First Step - All in App.js | 03:25 |
84 | Creating Cart & Total component | 04:04 |
85 | context API - Implementation | 13:01 |
86 | useContext() - New & Better Consumer! | 04:34 |
87 | Redux - Introduction | 10:22 |
88 | Setting-up the redux-demo Application | 06:30 |
89 | Creating Global Store & Reducer | 05:21 |
90 | Providing store with Provider | 03:01 |
91 | useSelector() hook | 06:19 |
92 | useDispatch() hook | 14:43 |
93 | Class Component - Accessing store in class component | 07:05 |
94 | Action Creator & Event Dispatching (Class Component) | 07:46 |
95 | Delete Cart Item | 06:11 |
96 | Combine Reducers Part-1 | 06:34 |
97 | Combine Reducers Part-2 | 06:56 |
98 | Action Type Constants | 05:57 |
99 | Why Asynchronous Redux ? | 03:48 |
100 | Action Creator - validateUser() | 04:41 |
101 | redux-thunk | 05:29 |
102 | Redux Toolkit(RTK) - Introduction & Installation | 03:52 |
103 | Creating Slice | 12:31 |
104 | configureStore() - Store creation | 03:20 |
105 | Dispatching Actions - The RTK way | 06:11 |
106 | thunk - Asynchronous | 04:26 |
107 | Http Requests - Introduction | 02:21 |
108 | fetch Api - Refresher | 12:28 |
109 | Fetching Data | 07:53 |
110 | Displaying Users Data | 04:18 |
111 | Creating Components - Users/Todos | 08:18 |
112 | Conditional Rendering Implementation | 03:33 |
113 | Error Handling | 08:13 |
114 | Rules Of Hooks | 02:42 |
115 | Custom Hooks | 06:03 |
116 | Fetching Data Using Custom Hooks | 05:17 |
117 | Introduction | 01:18 |
118 | Installing TypeScript Compiler | 05:06 |
119 | Variables & Datatypes | 08:05 |
120 | Type Annotation & Inference | 04:57 |
121 | Creating React & TypeScript Project | 02:24 |
122 | React.FC - TypeScript FunctionalComponent | 06:19 |
123 | Interface & Optional Attributes | 03:56 |
124 | useState() with TypeScript | 03:03 |
125 | onClick - Event Handling with TypeScript | 03:31 |
126 | onChange - EventHandling with TypeScript | 03:02 |
127 | <select> - Working with Dropdown | 02:07 |
128 | useRef() with TypeScript | 03:32 |
129 | Introduction to Automated Testing | 02:15 |
130 | Types of Automated Tests | 02:16 |
131 | Jest Vs. Enzyme | 03:11 |
132 | React Project & Testing - First Step | 05:13 |
133 | Understanding TDD - Test Driven Development | 01:47 |
134 | Beginning Practical Test | 11:12 |
135 | getByTestId() and data-testid | 02:28 |
136 | Button Click Test - fireEvent | 05:03 |
137 | userEvent Vs. fireEvent | 03:58 |
138 | Matchers - toBe() or not.toBe() & more... | 03:56 |
139 | Test with input element | 05:31 |
140 | Resolving Input Change Issue | 03:11 |
141 | Asynchronous Testing | 07:34 |
142 | Mock Test - Mocking fetch() API | 04:09 |
143 | beforeEach() & afterEach() | 02:23 |
144 | Snapshot Testing | 06:18 |
145 | Introduction - MERN Stack eStore Project | 01:20 |
146 | Beginning With Header Component | 05:04 |
147 | Adding Search Bar With Icon | 04:33 |
148 | Category Dropdown In Search Bar | 02:54 |
149 | Login, Wishlist & Cart Icons | 05:58 |
150 | Creating React TopNav Component | 04:28 |
151 | Implementing SCSS | 04:30 |
152 | CatNav - Category Navigation | 05:43 |
153 | Applying Transition Effect | 03:14 |
154 | Global CSS with mixins and variables | 04:44 |
155 | SideNav | 05:28 |
156 | Creating Accordion | 05:47 |
157 | Making the Accordion Collapsible | 02:25 |
158 | Converting Transition into Global Mixin | 03:55 |
159 | Creating Products Component | 06:36 |
160 | Styling the Product Card | 05:25 |
161 | Mapping the Product Cards | 03:23 |
162 | Rating section in the product card | 01:47 |
163 | Implementing Flex For Better Responsiveness | 03:53 |
164 | What and Why Git / Github? | 03:06 |
165 | Configuring the Project Repository | 04:16 |
166 | Configuring the Branch in Git | 02:41 |
167 | Configuring Redux Tool-Kit(RTK) | 02:04 |
168 | Implementing RTK in CatNav Component | 03:41 |
169 | Implementing RTK for the Products Component | 01:29 |
170 | Implementing RTK for the Accordion Categories | 04:11 |
171 | Configuring MySQL | 03:35 |
172 | Creating the Database | 03:53 |
173 | Creating Node Server with Express.js | 03:12 |
174 | Configuring API Endpoints/Routes | 02:34 |
175 | Configuring nodemon | 01:36 |
176 | Connecting with MySQL | 03:26 |
177 | Data Fetching with SQL Query | 02:03 |
178 | createPool() - No Need for getConnection() | 01:28 |
179 | Organizing Routes | 02:17 |
180 | Configuring Routes with “express.Router()” | 01:22 |
181 | Organizing the RTK Code | 02:11 |
182 | Configuring the Reducer and Action for CatNav | 04:06 |
183 | Fetching the Category Data from Database | 02:10 |
184 | Inserting and Fetching all Parent Categories | 01:31 |
185 | Fetching Categories for Accordion | 03:15 |
186 | Adding the Products Endpoint / Route | 02:58 |
187 | Rendering the Products Data | 03:34 |
188 | Adding the Cart Button | 03:04 |
189 | Creating the Cart Slice | 01:52 |
190 | Applying Cart Functionalities | 04:04 |
191 | Displaying the Cart Item Count | 03:47 |
192 | Filtering Products by Categories | 04:52 |
193 | Setting Up Price Filter UI | 03:35 |
194 | Adding Price Filter Feature | 03:33 |
195 | Configuring the React Router 6 - SPA | 02:33 |
196 | Configuring the ProductDetails | 02:21 |
197 | Filling the Data in ProductDetails Component | 03:26 |
198 | Styling the ProductDetails Component | 05:10 |
199 | Enabling Cart In ProductDetails | 01:09 |
200 | Creating the Cart Component | 01:40 |
201 | Conditional Rendering in Cart Component | 01:45 |
202 | Completing the EmptyCart Component | 03:00 |
203 | Rendering Data in FilledCart Component | 07:05 |
204 | Styling the FilledCart Component | 03:18 |
205 | Rendering the Cart Item Quantity | 02:20 |
206 | Implementing the Cart Item Quantity | 05:06 |
207 | Deleting Cart Items | 02:54 |
208 | Configuring the Google OAuth | 04:08 |
209 | Displaying Logged-in User Name | 02:39 |