This project-based course will make your journey easier in becoming a hands-on React.js developer.
In this comprehensive course, we will go through the prior and newer versions of ReactJS with the primary focus on understanding the latest version.
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.
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...
Learn from the best!
Being in the industry for 2 decades - we know what it takes to get your career off on the right foot. That's why we have designed and crafted interactive courses that are the best reference material around, and they're an absolute must-have for any developer looking to get ahead.
The course is crafted by the best in the business - loaded with hands-on reference material & interview questions from Fortune 10/100/500 clients world-wide, which has helped over 10,000 consultants in securing their dream job or even advance in their career in Front-End/Full-Stack/Web & Mobile technologies industry.
Curriculum
- Introduction (3:00)
- React Is Declarative (3:49)
- Component Based Architecture (18:25)
- Creating and Understanding React Project Architecture (11:06)
- npm Vs. npx (3:33)
- React 18 - Goodbye ReactDOM.render() (2:27)
- React 18 - Migrating from v17 to v18 (2:29)
- "props" Destructuring (9:18)
- Concept of State and useState() Hook (11:26)
- Lazy Initial State (6:30)
- Basic Event Handling and Parameter Passing (8:37)
- Applying External and Inline Styling (6:45)
- JSX - In-depth (10:13)
- New JSX Transform (4:46)
- Primitive Types and Object Literal with useState() (11:58)
- Class Component Basics (7:40)
- Class Component "state" update with setState() (7:15)
- Component Lifecycle Methods Basics (9:50)
- useEffect() - Creating A Digital Clock Using useEffect() (8:29)
- useEffect() Multiple States and Skipping Effects For Optimization (5:18)
- Conditional Rendering - Cleaning Up An Effect (9:56)
- "ref" - The Older way (5:17)
- React.createRef() method (2:49)
- useRef() hook (3:34)
- React.memo() and useCallback() hook (17:45)
- Event Handling - In-depth Introduction (0:52)
- Quick Essential Recap - Events (4:27)
- SyntheticEvent (5:34)
- Input Event - Textbox (3:10)
- preventDefault - Preventing default behavior (5:16)
- form with Multiple States (8:15)
- form - States as Object (6:20)
- Single Event Handler Using Dynamic Key (5:03)
- Functional Update - The Correct Way (2:52)
- Checkbox or Radio - Input fields (3:30)
- Source Code
- MPA vs. SPA (3:25)
- Defining Routes 2 (13:24)
- Menu Formatting (1:44)
- URL Vs. Routes and Default Page Setup (3:14)
- Dynamic Routes - useParams() hook (10:40)
- Nested Routes - Outlet (5:12)
- Not Found Page (404) (3:23)
- index Attribute - Referring the patent route (3:46)
- Dynamic Products Data - useState() and route configuration (5:29)
- context and useOutletContext() hook - Passing data to child component (3:35)
- "state" & useLocation() hook - The Correct Way Of Data Sharing (3:30)
- Improvizing The Interface (4:07)
- useRoutes() hook - Javascript instead of JSX (5:35)
- NavLink - for better styling (4:37)
- to Redirect (1:55)
- useNavigate() hook (3:58)
- Source Code
- Multi-page Application(MPA)/Single-page Application(SPA) Basics (3:18)
- Defining Routes (10:48)
- Route Matchers - and exact (6:05)
- Route Parameters & Dynamic Routes with useParams hook (9:06)
- Nested Route, match object and useRouteMatch() hook (10:10)
- Redirect (2:56)
- No Match(404) (5:10)
- NavLink Vs. Link (6:13)
- useHistory() hook (6:09)
- Preventing Navigation - Prompt (5:32)
- Query Parameters (8:24)
- Source Code
- Redux - Introduction (10:21)
- Setting-up the redux-demo Application (6:29)
- Creating Global Store and Reducer (5:20)
- Providing store with Provider (3:00)
- useSelector() hook (6:18)
- useDispatch() hook (14:42)
- Class Component - Accessing store in class component (7:04)
- Action Creator and Event Dispatching (Class Component) (7:45)
- Delete Cart Item (6:09)
- Combine Reducers Part-1 (6:33)
- Combine Reducers Part-2 (6:55)
- Action Type Constants (5:56)
- Source Code
- Introduction (1:17)
- Installing TypeScript Compiler (5:05)
- Variables and Datatypes (8:04)
- Type Annotation and Inference (4:56)
- Creating React and TypeScript Project (2:23)
- React.FC - TypeScript FunctionalComponent (6:18)
- Interface and Optional Attributes (3:55)
- useState() with TypeScript (3:02)
- onClick - Event Handling with TypeScript (3:30)
- onChange - EventHandling with TypeScript (3:00)
- select - Working with Dropdown (2:06)
- useRef() with TypeScript (3:31)
- Source Code
- Introduction to Automated Testing (2:14)
- Types of Automated Tests (2:15)
- Jest Vs. Enzyme (3:10)
- React Project and Testing - First Step (5:12)
- Understanding TDD - Test Driven Development (1:46)
- Beginning Practical Test (11:11)
- getByTestId() and data-testid (2:27)
- Button Click Test - fireEvent (5:02)
- userEvent Vs. fireEvent (3:57)
- Matchers - toBe() or not.toBe() and more (3:55)
- Test with input element (5:30)
- Resolving Input Change Issue (3:10)
- Asynchronous Testing (7:33)
- Mock Test - Mocking fetch() API (4:08)
- beforeEach() and afterEach() (2:22)
- Snapshot Testing (6:17)
- Source Code
- Introduction - MERN Stack eStore Project (1:20)
- Beginning With Header Component (5:03)
- Adding Search Bar With Icon (4:32)
- Category Dropdown In Search Bar (2:53)
- Login, Wishlist and Cart Icons (5:57)
- Creating React TopNav Component (4:27)
- Implementing SCSS (4:29)
- CatNav - Category Navigation (5:42)
- Applying Transition Effect (3:13)
- Global CSS with mixins and variables (4:43)
- SideNav (5:27)
- Creating Accordion (5:46)
- Making the Accordion Collapsible (2:24)
- Converting Transition into Global Mixin (3:54)
- Creating Products Component (6:35)
- Styling the Product Card (5:24)
- Mapping the Product Cards (3:22)
- Rating section in the product card (1:46)
- Implementing Flex For Better Responsiveness (3:52)
- What and Why Git / Github? (3:05)
- Configuring the Project Repository (4:15)
- Configuring the Branch in Git (2:40)
- Configuring Redux Tool-Kit(RTK) (2:03)
- Implementing RTK in CatNav Component (3:40)
- Implementing RTK for the Products Component (1:28)
- Implementing RTK for the Accordion Categories (4:10)
- Configuring MySQL (3:34)
- Creating the Database (3:52)
- Creating Node Server with Express.js (3:11)
- Configuring API Endpoints/Routes (2:33)
- Configuring nodemon (1:35)
- Connecting with MySQL (3:25)
- Data Fetching with SQL Query (2:02)
- createPool() - No Need for getConnection() (1:27)
- Organizing Routes (2:16)
- Configuring Routes with “express.Router()” (1:21)
- Inserting and Fetching all Parent Categories (1:31)
- Organizing the RTK Code (2:10)
- Configuring the Reducer and Action for CatNav (4:05)
- Fetching the Category Data from Database (2:09)
- Fetching Categories for Accordion (3:14)
- Adding the Products Endpoint / Route (2:57)
- Rendering the Products Data (3:33)
- Adding the Cart Button (3:03)
- Creating the Cart Slice (1:51)
- Applying Cart Functionalities (4:03)
- Displaying the Cart Item Count (3:46)
- Filtering Products by Categories (4:51)
- Setting Up Price Filter UI (3:34)
- Adding Price Filter Feature (3:32)
- Configuring the React Router 6 - SPA (2:32)
- Configuring the ProductDetails (2:20)
- Filling the Data in ProductDetails Component (3:25)
- Styling the ProductDetails Component (5:09)
- Enabling Cart In ProductDetails (1:08)
- Creating the Cart Component (1:39)
- Conditional Rendering in Cart Component (1:44)
- Completing the EmptyCart Component (2:59)
- Rendering Data in FilledCart Component (7:04)
- Styling the FilledCart Component (3:17)
- Rendering the Cart Item Quantity (2:19)
- Implementing the Cart Item Quantity (5:05)
- Deleting Cart Items (2:53)
- Configuring the Google OAuth (4:07)
- Displaying Logged-in User Name (2:38)
- Source Code
30 Day Money Back Guarantee - No Questions Asked!
Confidence in our course quality is unwavering, so much so that we guarantee your satisfaction. If, within the initial 30 days, you find the course doesn't meet your expectations, we'll grant you a full refund.
Your satisfaction is our commitment.
🙋Frequently Asked Questions
🕒 When does the course kick off and conclude?
Your journey starts right now and extends indefinitely! This self-paced online course respects your schedule – commence and conclude at your convenience.
⏰ How long can I enjoy course access?
Prepare for a lifetime of access! Once you enroll, the course content is at your fingertips for as long as you desire. Access it seamlessly across all your devices.
❓ What if the course doesn't meet my expectations?
Your satisfaction is paramount. Should the course fall short of your expectations, reach out within the initial 30 days, and we'll gladly grant you a full refund. Your contentment is our priority.