React
Training Includes
Get Mentored by the React Experts
Work on Live Project
Get Hired Quickly
Job Oriented Courses
Students
Courses
Placed Students
React Training Course
Nagpur IT React Certification Training will teach you how to build efficient React applications by mastering React, Redux, and React Native concepts. You will learn how to build simple components and integrate them into more complex design components in this React Course. After completing this React training, you will be able to build applications using React concepts such as JSX, and Redux, Asynchronous Programming using Redux-Saga middleware, Fetch data using GraphQL, Test using Jest, Deploy applications using Nginx and Docker, and build Mobile apps using React Native.
Major apps such as Facebook, Instagram, Netflix, WhatsApp, Airbnb, Yahoo! Mail, and many others use React to enhance the user experience.
Interested In React Training Course
REACT COURSE CONTENT
Introduction to React
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
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
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
The state can be updated in many ways!
Adding Form Input
Listening to User Input
Working with the 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
Rendering Lists & Conditional Content
Module Introduction
Rendering Lists of Data
Using Stateful Lists
Understanding “Keys”
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
Debugging React Apps
Module Introduction
Understanding React Error Messages
Analyzing Code Flow & Warnings
Working with Breakpoints
Using the React DevTools
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
Adding The “ErrorModal” Component
Managing the Error State
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
Handling Side Effects, Using Reducers & Using the Context API
Module Introduction
What are “Side Effects” & Introducing useEffect
Using the use effect() Hook
use effect & Dependencies
What to add & Not to add as Dependencies
Using the use effect Cleanup Function
use effect 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”
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
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
Building Custom React Hooks
Module Introduction
What is “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
Sending Http Requests (e.g. Connecting to a Database)
Module Introduction
How To (Not) Connect To A Database
Using the Star Wars API
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
A Look Behind The Scenes Of React & Optimization Techniques
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
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
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
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
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
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
Deploying React Apps
Module Introduction
Deployment Steps
Building The Code For Production
Exploring Routing Issues & Finishing Deployment
Adding Authentication To React Apps
Module Introduction
What, How & Why?
More on “Authentication Tokens”
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
Protecting Frontend Pages
Persisting The User Authentication Status
Adding Auto-Logout
Finishing Steps
Animating React Apps
Module Introduction
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
Replacing Redux with React Hooks
Module Introduction
Alternative: Using the Context API
Toggling Favorites with the Context API
React+Typescript
Module Introduction
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
Ashish Kumar Patel
——–EXPERT TEAM
Meet Our Team
“Power is Gained By Sharing
Your Knowledge, Not Hoarding it”
