React.js Master Course

This comprehensive course, “The Complete React JS Course – Basics to Advanced”, provides a complete guide to learning React JS, covering all the necessary concepts to become a front-end React JS developer. Whether you’re a beginner in web development or a seasoned developer looking to upgrade your skills, this course helps you take your skills to the next level and impress recruiters or clients by mastering React JS.

---

Key Learnings:

• Introduction to what is React and its basic concepts
• Learn what is JSX and how it works behind the scenes
• Learn what are the stateful and stateless components and when to use them
• Working with function based and class based components
• Working with React Modules, importing and exporting the modules
• Learn in detail about how the render method works
• React component lifecycle and different lifecycle methods
• Creating dynamic websites with help of re-usable components
• Creating a proper working structure for a project from scratch which will help maintaining the project for long term

---

Course Content:

Module-1 Introduction To React.JS

It’s All About Components! [Core Concept] Setting Up The Starting Project

JSX & React Components [Core Concept]

Creating & Using a First Custom Component A Closer Look: Components & File Extensions Building & Using a Component

How React Handles Components & How It Builds A “Component Tree” [Core Concept]

Components & JSX

Using & Outputting Dynamic Values [Core Concept]

Setting HTML Attributes Dynamically & Loading Image Files  Outputting Dynamic Content

Making Components Reusable with Props [Core Concept]  Alternative Props Syntaxes

More Prop Syntaxes  Working with Props

Dynamic Values & Props

Best Practice: Storing Components in Files & Using a Good Project Structure  Storing Component Style Files Next To Components

Component Composition: The special “children” Prop [Core Concept]  Component Composition

Reacting to Events [Core Concept]

Passing Functions as Values to Props  Reacting to Events

Passing Custom Arguments to Event Functions

Configuring Event Handlers

Best Practices & Event Handling

How NOT to Update the UI – A Look Behind The Scenes of React [Core Concept]  Managing State & Using Hooks [Core Concept]

Working with State

Deriving & Outputting Data Based on State  State & Computed Values

Rendering Content Conditionally  Conditional Content

CSS Styling & Dynamic Styling

Dynamic Styling

Outputting List Data Dynamically  Dynamic List Content

Conditional Content & Dynamic Lists

---

Module-2 Building Investment Calculator

Module Introduction & A Challenge For You! Adding a Header Component

Getting Started with a User Input Component Handling Events & Implementing Two-Way-Binding Lifting State Up

Computing Values & Effectively Handling Numerical Input Displaying Results in a List & Deriving Additional Values

Conditional Content Output

---

Module-3 State,Refs and Portals (Building Project Management App)

Module Introduction & Starting Project

Adding a “Projects Sidebar” Component

Styling the Sidebar & Button with Tailwind CSS

Adding the “New Project” Component & A Reusable “Input” Component  Styling Buttons & Inputs with Tailwind CSS

Splitting Components to Separate JSX & Tailwind Styles (for Higher Reusability)  Managing State to Toggle Between Components

Collecting User Input with Refs & Forwarded Refs  Handling Project Creation & Updating the UI

Validating User Input & Displaying an Error Modal via useImperativeHandle  Styling the Modal using Tailwind CSS

Making Projects Selectable & Viewing Project Details

Handling Project Deletion

Adding “Project Tasks” & A Tasks Component  Managing Tasks & Grappling with Prop Drilling  Clearing Tasks & Resolving Minor Bugs

---

Module-4 Context API & useReducer

Module Introduction

Understanding Prop Drilling & Project Overview

Prop Drilling: Component Composition as a Solution  Introducing the Context API

Creating & Providing The Context

Consuming the Context

Linking the Context to State

A Different Way Of Consuming Context

What Happens When Context Values Change?

Migrating the Entire Demo Project to use the Context API

Outsourcing Context & State Into a Separate Provider Component

---

Module-5 Side Effects and useEffect Hook

 

Module Introduction & Starting Project What’s a “Side Effect”?

A Potential Problem with Side Effects: An Infinite Loop

Using useEffect for Handling

 

Preparing Another Use-Case For useEffect

Using useEffect for Syncing With Browser APIs  Understanding Effect Dependencies

Fixing a Small Bug

Preparing Another Problem That Can Be Fixed with useEffect  Introducing useEffect’s Cleanup Function

The Problem with Object & Function Dependencies  The use Callback Hook

use Effect’s Cleanup Function: Another Example

Optimizing State Updates

Module-6 Sending HTTP Requests

 

Module Introduction

How (Not) To Connect To A Database

Starting Project & Dummy Backend API  Preparing the App For Data Fetching

How NOT To Send HTTP Requests (And Why It’s Wrong)  Sending HTTP Requests (GET Request) via useEffect

Using async / await

Handling Loading States  Handling HTTP Errors

Transforming Fetched Data

Extracting Code & Improving Code Structure  Sending Data with POST Requests

Using Optimistic Updating

Deleting Data (via DELETE HTTP Requests)

Module-7 Building Custom Hooks

 

Module Introduction & Starting Project

Revisiting the “Rules of Hooks” & Why To Use Hooks  Creating a Custom Hook

Custom Hook: Managing State & Returning State Values  Exposing Nested Functions From The Custom Hook

Using A Custom Hook in Multiple Components

Creating Flexible Custom Hooks

---

Module-8 React Forms

Module Introduction & Starting Project

Handling Form Submission

Managing & Getting User Input via State & Generic Handlers  Getting User Input via Refs

Getting Values via FormData & Native Browser APIs

Resetting Forms

Validating Input on Every Keystroke via State  Validating Input Upon Lost Focus (Blur)

Validating Input Upon Form Submission

Validating Input via Built-in Validation Props  Mixing Custom & Built-in Validation Logic

Building & Using a Reusable Input Component

Outsourcing Validation Logic

Creating a Custom useInput Hook  Using Third-Party Form Libraries

---

Module-9 Building Food Order App

Module Introduction & Starting Project

Planning the App & Adding a First Component  Fetching Meals Data (GET HTTP Request)

Adding a “MealItem” Component

Formatting & Outputting Numbers as Currency

Creating a Configurable & Flexible Custom Button Component  Getting Started with Cart Context & Reducer

Finishing & Using the Cart Context & Reducer

Adding a Reusable Modal Component with useEffect  Opening the Cart in the Modal via a New Context

Working on the Cart Items

Adding a Custom Input Component & Managing Modal Visibility  Handling Form Submission & Validation

Sending a POST Request with Order Data

Adding a Custom HTTP Hook & Avoiding Common Errors  Handling HTTP Loading & Error States

---

Module-10 Introduction To Redux

Module Introduction

Redux vs React Context API How Redux Works

More Redux Basics Preparing a new Project

Creating a Redux Store for React  Providing the Store

Using Redux Data in React Components

Dispatching Actions From Inside Components  Redux with Class-based Components

Attaching Payloads to Actions

Working with Multiple State Properties

How To Work With Redux State Correctly

Redux Challenges & Introducing Redux Toolkit  Adding State Slices

Connecting Redux Toolkit State

Migrating Everything To Redux Toolkit  Working with Multiple Slices

Reading & Dispatching From A New Slice

---

Module-11 Advanced Redux

Module Introduction

Redux & Side Effects  Redux & Async Code

Frontend Code vs Backend Code

Where To Put Our Logic

Using useEffect with Redux  A Problem with useEffect()

Handling Http States & Feedback with Redux  Using an Action Creator Thunk

Getting Started with Fetching Data  Finalizing the Fetching Logic

Exploring the Redux DevTools

---

Module-12 Building Single Page Applications React Router

Module Introduction

Routing: Multiple Pages in Single-Page Applications Project Setup & Installing React Router

Defining Routes

Adding a Second Route

Exploring an Alternative Way of Defining Routes Navigating between Pages with Links

Layouts & Nested Routes

Showing Error Pages with errorElement

Working with Navigation Links (NavLink)  Navigating Programmatically

Defining & Using Dynamic Routes  Adding Links for Dynamic Routes

Understanding Relative & Absolute Paths  Working with Index Routes

Onwards to a new Project Setup  Data Fetching with a loader()

Using Data From A Loader In The Route Component

More loader() Data Usage

Where Should loader() Code Be Stored?  When Are loader() Functions Executed?

Reflecting The Current Navigation State in the UI  Returning Responses in loader()s

Which Kind Of Code Goes Into loader()s?  Error Handling with Custom Errors

Extracting Error Data & Throwing Responses

The json() Utility Function

Dynamic Routes & loader()s

The useRouteLoaderData() Hook & Accessing Data From Other Routes  Planning Data Submission

Working with action() Functions

Submitting Data Programmatically

Updating the UI State Based on the Submission Status  Validating User Input & Outputting Validation Errors

Reusing Actions via Request Methods

Behind-the-Scenes Work with useFetcher()  Deferring Data Fetching with defer()

Controlling Which Data Should Be Deferred

---

Module-13 Adding Authentication

Module Introduction

How Authentication Works Project Setup & Route Setup Working with Query Parameters Implementing the Auth Action

Validating User Input & Outputting Validation Errors Adding User Login

Attaching Auth Tokens to Outgoing Requests Adding User Logout

Updating the UI Based on Auth Status

Important: loader()s must return null or any other value  Adding Route Protection

Adding Automatic Logout

Managing the Token Expiration

Who this course is for:

Anyone that wants to become a React developer

---

Module14: Final Project

---

Course Prerequisite:

You should know JavasScript pretty well before learning React or any framework

---

International Student Fees: 400 US$

---

Stay connected even when you’re apart

????????Join our WhatsApp Channel – Get discount offers

???? 500+ Free Certification Exam Practice Question and Answers

???? Your FREE eLEARNING Courses (Click Here)

---

Internships, Freelance and Full-Time Work opportunities

???????? Join Internships and Referral Program (click for details)

???????? Work as Freelancer or Full-Time Employee (click for details)

????????Hire an Intern

---

Flexible Class Options

Evening Classes

Corporate BootCamp Workshops

Fast-Track  Week End Classes For Professionals SAT | SUN

Online Classes Available

---

Related Course

MERN Stack Developer

Java Spring Boot Microservices training course

Microservices With Node.js and React

Next.js & React – The Complete Guide

 JavaScript Basic To Advance with Projects

Next.js & React – The Complete Guide