React

Training Includes

Get Mentored by the React Experts

l

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

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”

Priyanka Babhale

Call Now