Getting Started!

Welcome To The Course!
What is React.js?
Why React Instead Of "Just Javascript"?
Building Single-Page Applications (SPA's) with React
Exploring React.js Alternatives (Angular/Vue)
Join Our Online Learning Community
About This Course & Course Outline
The Two Ways (Paths) of Taking This Course
Getting The Most Out of This Course
Setting Up The Course Dev Environment ( Code Editor)

JavaScript Refresher

Module Introduction
Understanding "let" and "const"
Arrow Functions
Exports and Imports
Understanding Classes
Classes, Properties and Methods
The Spread & Rest Operator
Destructuring
Reference and Primitive Types Refresher
Refreshing Array Functions
Wrap Up
Next-Gen JavaScript - Summary
JS Array Functions

React Basics & Working With Components

Module Introduction
What Are Components? And Why Is React All About Them?
React Code Is Written In A "Declarative Way"!
A Note About New React Projects & NodeJS
Creating a new React Project
The Starting Project
Analyzing a Standard React Project
Introducing JSX
How React Works
Building a First Custom Component
Writing More Complex JSX Code
Adding Basic CSS Styling
Outputting Dynamic Data & Working with Expressions in JSX
Passing Data via "props"
Adding "normal" JavaScript Logic to Components
Splitting Components Into Multiple Components
Time to Practice: React & Component Basics
The Concept of "Composition" ("children props")
A First Summary
A Closer Look At JSX
Organizing Component Files
An Alternative Function Syntax
Learning Check: React Basics, Components, Props & JSX
Module Resources

React State & Working with Events

Module Introduction
Listening to Events & Working with Event Handlers
How Component Functions Are Executed
Working with "State"
A Closer Look at the "useState" Hook
State can be updated in many ways!
Adding Form Inputs
Listening to User Input
Working with Multiple States
Using One State Instead (And What's Better)
Updating State That Depends On The Previous State
Handling Form Submission
Adding Two-Way Binding
Child-to-Parent Component Communication (Bottom-up)
Lifting The State Up
Time to Practice: Working with Events & State
Controlled vs Uncontrolled Components & Stateless vs Stateful Components
Learning Check: Working with Events & State
Module Resources

Rendering Lists & Conditional Content

Module Introduction
Rendering Lists of Data
Using Stateful Lists
Understanding "Keys"
Time to Practice: Working with Lists
Outputting Conditional Content
Adding Conditional Return Statements
Time to Practice: Conditional Content
Demo App: Adding a Chart
Adding Dynamic Styles
Wrap Up & Next Steps
Fixing a Small Bug
Learning Check: Outputting Lists & Conditional Content
Module Resources

Styling React Components

Module Introduction
Setting Dynamic Inline Styles
Setting CSS Classes Dynamically
Introducing Styled Components
Styled Components & Dynamic Props
Styled Components & Media Queries
Using CSS Modules
Dynamic Styles with CSS Modules
Module Resources

Debugging React Apps

Module Introduction
Understanding React Error Messages
Analyzing Code Flow & Warnings
Working with Breakpoints
Using the React DevTools
Module Resources

Time To Practice: A Complete Practice Project

Module Introduction
Adding a "User" Component
Adding a re-usable "Card" Component
Adding a re-usable "Button" Component
Managing the User Input State
Adding Validation & Resetting Logic
Adding a Users List Component
Managing a List Of Users via State
Adding The "ErrorModal" Component
Managing the Error State
Module Resources

Diving Deeper: Working with Fragments, Portals & "Refs"

Module Introduction
JSX Limitations & Workarounds
Creating a Wrapper Component
React Fragments
Introducing React Portals
Working with Portals
Working with "ref"s
Controlled vs Uncontrolled Components
Module Resources

Advanced: Handling Side Effects, Using Reducers & Using the Context API

Module Introduction
What are "Side Effects" & Introducing useEffect
Using the useEffect() Hook
useEffect & Dependencies
What to add & Not to add as Dependencies
Using the useEffect Cleanup Function
useEffect Summary
Introducing useReducer & Reducers In General
Using the useReducer() Hook
useReducer & useEffect
Adding Nested Properties As Dependencies To useEffect
useReducer vs useState for State Management
Introducing React Context (Context API)
Using the React Context API
Tapping Into Context with the useContext Hook
Making Context Dynamic
Building & Using a Custom Context Provider Component
React Context Limitations
Learning the "Rules of Hooks"
Refactoring an Input Component
Diving into "Forward Refs"
Module Resources

Practice Project: Building a Food Order App

Module Introduction
Starting Setup
Adding a "Header" Component
Adding the "Cart" Button Component
Adding a "Meals" Component
Adding Individual Meal Items & Displaying Them
Adding a Form
Fixing Form Input IDs
Working on the "Shopping Cart" Component
Adding a Modal via a React Portal
Managing Cart & Modal State
Adding a Cart Context
Using the Context
Adding a Cart Reducer
Working with Refs & Forward Refs
Outputting Cart Items
Working on a More Complex Reducer Logic
Making Items Removable
Using the useEffect Hook
Module Resources

A Look Behind The Scenes Of React & Optimization Techniques

Module Introduction
How React Really Works
Component Updates In Action
A Closer Look At Child Component Re-Evaluation
Preventing Unnecessary Re-Evaluations with React.memo()
Preventing Function Re-Creation with useCallback()
useCallback() and its Dependencies
A First Summary
A Closer Look At State & Components
Understanding State Scheduling & Batching
Optimizing with useMemo()
Module Resources

An Alternative Way Of Building Components: Class-based Components

Module Introduction
What & Why
Adding a First Class-based Component
Working with State & Events
The Component Lifecycle (Class-based Components Only!)
Lifecycle Methods In Action
Class-based Components & Context
Class-based vs Functional Components: A Summary
Introducing Error Boundaries
Module Resources

Sending Http Requests (e.g. Connecting to a Database)

Module Introduction
How To (Not) Connect To A Database
Our Starting App & Backend
Sending a GET Request
Using async / await
Handling Loading & Data States
Handling Http Errors
Using useEffect() For Requests
Preparing The Project For The Next Steps
Sending a POST Request
Wrap Up
Module Resources

Building Custom React Hooks

Module Introduction
What are "Custom Hooks"?
Creating a Custom React Hook Function
Using Custom Hooks
Configuring Custom Hooks
Onwards To A More Realistic Example
Building a Custom Http Hook
Using the Custom Http Hook
Adjusting the Custom Hook Logic
Using The Custom Hook In More Components
Module Resources

Working with Forms & User Input

Module Introduction
Our Starting Setup
What's So Complex About Forms?
Dealing With Form Submission & Getting User Input Values
Adding Basic Validation
Providing Validation Feedback
Handling the "was touched" State
React To Lost Focus
Refactoring & Deriving States
Managing The Overall Form Validity
Time to Practice: Forms
Adding A Custom Input Hook
Re-Using The Custom Hook
A Challenge For You!
Applying Our Hook & Knowledge To A New Form
Summary
Bonus: Using useReducer()
Module Resources

Practice Project: Adding Http & Forms To The Food Order App

Module Introduction
Moving "Meals" Data To The Backend
Fetching Meals via Http
Handling the Loading State
Handling Errors
Adding A Checkout Form
Reading Form Values
Adding Form Validation
Submitting & Sending Cart Data
Adding Better User Feedback
Summary
Module Resources

Diving into Redux (An Alternative To The Context API)

Module Introduction
Another Look At State In React Apps
Redux vs React Context
How Redux Works
Exploring The Core Redux Concepts
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
Splitting Our Code
Summary
Module Resources

Advanced Redux

Module Introduction
Redux & Side Effects (and Asynchronous Code)
Refresher / Practice: Part 1/2
Refresher / Practice: Part 2/2
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
Summary
Module Resources

Building a Multi-Page SPA with React Router

Module Introduction
What is Routing & Why?
Installing React Router
Defining & Using Routes
Working with Links
Using NavLinks
Adding Dynamic Routes with Params
Extracting Route Params
Using "Switch" and "exact" For Configuring Routes
Working with Nested Routes
Redirecting The User
Time to Practice: Onwards to a New Project
Practice Redirecting & Extracting Params
Practicing Nested Routes
Adding a Layout Wrapper Component
Adding Dummy Data & More Content
Outputting Data on the "Details" Page
Adding a "Not Found" Page
Implementing Programmatic (Imperative) Navigation
Preventing Possibly Unwanted Route Transitions with the "Prompt" Component
Working with Query Parameters
Getting Creative With Nested Routes
Writing More Flexible Routing Code
Sending & Getting Quote Data via Http
Adding the "Comments" Features
Upgrading To React Router v6
Module Resources

Deploying React Apps

Module Introduction
Deployment Steps
Adding Lazy Loading
Building The Code For Production
Getting Started With Deployment (Uploading Files)
Exploring Routing Issues & Finishing Deployment
Module Resources

Adding Authentication To React Apps

Module Introduction
What, How & Why?
More on "Authentication Tokens"
Starting Setup & First Steps
Adding User Signup
Showing Feedback To The User
Adding User Login
Managing The Auth State With Context
Using The Token For Requests To Protected Resources
Redirecting The User
Adding Logout
Protecting Frontend Pages
Persisting The User Authentication Status
Adding Auto-Logout
Finishing Steps
Module Resources

A (Pretty Deep Dive) Introduction to Next.js

Module Introduction
What is NextJS?
Key Feature 1: Built-in Server-side Rendering (Improved SEO!)
Key Feature 2: Simplified Routing with File-based Routing
Key Feature 3: Build Fullstack Apps
Creating a New Next.js Project & App
Analyzing the Created Project
Adding First Pages
Adding Nested Paths & Pages (Nested Routes)
Creating Dynamic Pages (with Parameters)
Extracting Dynamic Parameter Values
Linking Between Pages
Onwards to a bigger Project!
Preparing the Project Pages
Outputting a List of Meetups
Adding the New Meetup Form
The "_app.js" File & Layout Wrapper
Using Programmatic (Imperative) Navigation
Adding Custom Components & CSS Modules
How Pre-rendering Works & Which Problem We Face
Data Fetching for Static Pages
More on Static Site Generation (SSG)
Exploring Server-side Rendering (SSR) with "getServerSideProps"
Working with Params for SSG Data Fetching
Preparing Paths with "getStaticPaths" & Working With Fallback Pages
Introducing API Routes
Working with MongoDB
Sending Http Requests To Our API Routes
Getting Data From The Database
Getting Meetup Details Data & Preparing Pages
Adding "head" Metadata
Deploying Next.js Projects
Using Fallback Pages & Re-deploying
Summary
Module Resources

Animating React Apps

Module Introduction
Preparing the Demo Project
Using CSS Transitions
Using CSS Animations
CSS Transition & Animations Limitations
Using ReactTransitionGroup
Using the Transition Component
Wrapping the Transition Component
Animation Timings
Transition Events
The CSSTransition Component
Customizing CSS Classnames
Animating Lists
Alternative Animation Packages
Wrap Up
Module Resources

Replacing Redux with React Hooks

Module Introduction
Starting Project & Why You Would Replace Redux
Alternative: Using the Context API
Toggling Favorites with the Context API
Context API Summary (and why NOT to use it instead of Redux)
Getting Started with a Custom Hook as a Store
Finishing the Store Hook
Creating a Concrete Store
Using the Custom Store
Custom Hook Store Summary
Optimizing the Custom Hook Store
Bonus: Managing Multiple State Slices with the Custom Store Hook
Wrap Up
Module Resources

Testing React Apps (Unit Tests)

Module Introduction
What & Why?
Understanding Different Kinds Of Tests
What To Test & How To Test
Understanding the Technical Setup & Involved Tools
Running a First Test
Writing Our First Test
Grouping Tests Together With Test Suites
Testing User Interaction & State
Testing Connected Components
Testing Asynchronous Code
Working With Mocks
Summary & Further Resources
Module Resources

React + TypeScript

Module Introduction
What & Why?
Installing & Using TypeScript
Exploring the Base Types
Working with Array & Object Types
Understanding Type Inference
Using Union Types
Understanding Type Aliases
Functions & Function Types
Diving Into Generics
A Closer Look At Generics
Creating a React + TypeScript Project
Working with Components & TypeScript
Working with Props & TypeScript
Adding a Data Model
Time to Practice: Exercise Time!
Form Submissions In TypeScript Projects
Working with refs & useRef
Working with "Function Props"
Managing State & TypeScript
Adding Styling
Time to Practice: Removing a Todo
The Context API & TypeScript
Summary
Bonus: Exploring tsconfig.json
Module Resources

Optional: React Hooks Introduction & Summary

Module Introduction
What Are React Hooks?
The Starting Project
Getting Started with useState()
More on useState() & State Updating
Array Destructuring
Multiple States
Rules of Hooks
Passing State Data Across Components
Time to Practice: Hooks Basics
Sending Http Requests
useEffect() & Loading Data
Understanding useEffect() Dependencies
More on useEffect()
What's useCallback()?
Working with Refs & useRef()
Cleaning Up with useEffect()
Deleting Ingredients
Loading Errors & State Batching
More on State Batching & State Updates
Understanding useReducer()
Using useReducer() for the Http State
Working with useContext()
Performance Optimizations with useMemo()
Getting Started with Custom Hooks
Sharing Data Between Custom Hooks & Components
Using the Custom Hook
Wrap Up
Module Resources

Optional: React Summary & Core Feature Walkthrough

Module Introduction
What Is React?
Why React?
Building SPAs (Single Page Applications)
React Alternatives
Creating a React Project
Setting Up A Code Editor
Diving Into The Created Project
How React Works & Understanding Components
More Component Work & Styling with CSS Classes
Building & Re-Using Another Component
Working with "props" & Dynamic Content
Handling Events
Adding More Components
Introducing State
Working with "Event Props" (Passing Function As Props)
Use The Right React Router Version
Adding Routing
Adding Links & Navigation
Styling with CSS Modules
Outputting Lists of Data
Adding More React Components
Building Wrapper Components with props.children
Adding a Form
Getting User Input & Handling Form Submission
Preparing the App for Http
Sending a POST Request
Navigating Programmatically
Getting Started with Fetching Data
Using the useEffect() Hook
Introducing React Context
Context Logic & Different Ways Of Updating State
Using Context In Components
More Context Usage
Summary
Module Resources

Course Roundup

What Now? Next Steps You Could Take!
Explore The React Ecosystem!
Finishing Thoughts
Bonus!
This Course Got Updated!3 lectures • 20min
Course Update Overview, Explanation & Migration Guide
Course Update & Migration Guide
Old Course Content Download

Popular Searches

React The Complete Guide incl Hooks, React Router, Redux

Online

₹ 599 3699

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Getting Started!

JavaScript Refresher

React Basics & Working With Components

React State & Working with Events

Rendering Lists & Conditional Content

Styling React Components

Debugging React Apps

Time To Practice: A Complete Practice Project

Diving Deeper: Working with Fragments, Portals & "Refs"

Advanced: Handling Side Effects, Using Reducers & Using the Context API

Practice Project: Building a Food Order App

A Look Behind The Scenes Of React & Optimization Techniques

An Alternative Way Of Building Components: Class-based Components

Sending Http Requests (e.g. Connecting to a Database)

Building Custom React Hooks

Working with Forms & User Input

Practice Project: Adding Http & Forms To The Food Order App

Diving into Redux (An Alternative To The Context API)

Advanced Redux

Building a Multi-Page SPA with React Router

Deploying React Apps

Adding Authentication To React Apps

A (Pretty Deep Dive) Introduction to Next.js

Animating React Apps

Replacing Redux with React Hooks

Testing React Apps (Unit Tests)

React + TypeScript

Optional: React Hooks Introduction & Summary

Optional: React Summary & Core Feature Walkthrough

Course Roundup

Instructors

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone