Launch Your Global Career with Maersk – Placement Drive 2025 @ ZebLearn | Applications Close In 0d 0h 00h 00s

    ZebLearn Certification Partners – Globally Recognized Credentials!

    ZebLearn partners with leading industry experts to offer genuine, career-focused certifications in SAP training, foreign languages, and professional development courses. Earn internationally recognized credentials, enhance your career prospects, and distinguish yourself with certifications valued by the industry.

    cisco
    apple
    esb
    abode
    Partner
    meta
    pmi
    ic3
    Partner
    Partner
    Partner
    Partner
    communication

    Course content

    About React JS Training Program

  • Welcome To The Course!
  • What is React.js? And Why Would You Use It?
  • ReactJS vs "Vanilla JavaScript": Why Use React?
  • About This Course & Course Outline
  • The Two Ways (Paths) Of Taking This Course
  • Getting The Most Out Of This Course
  • Creating React Projects
  • Why Do You Need A Special Project Setup?

  • Starting Project
  • Adding JavaScript To A Page & How React Projects Differ
  • React Projects Use a Build Process
  • "import" & "export"
  • Revisiting Variables & Values
  • Revisiting Operators
  • Revisiting Functions & Parameters
  • Exercise: Working with Functions
  • Arrow Functions
  • More on the Arrow Function Syntax
  • Revisiting Objects & Classes
  • Arrays & Array Methods like map()
  • Exercise: Array Methods
  • Destructuring
  • Destructuring in Function Parameter Lists
  • The Spread Operator
  • Revisiting Control Structures
  • Manipulating the DOM - Not With React!
  • Using Functions as Values
  • Defining Functions Inside Of Functions
  • Reference vs Primitive Values
  • Next-Gen JavaScript - Summary
  • JS Array Functions

  • 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

  • You Don't Have To Use JSX!
  • Working with Fragments
  • Using Fragments
  • When Should You Split Components?
  • Splitting Components By Feature & State
  • Problem: Props Are Not Forwarded To Inner Elements
  • Forwarding Props To Wrapped Elements
  • Forwarding Props
  • Working with Multiple JSX Slots
  • Setting Component Types Dynamically
  • Setting Default Prop Values
  • Creating Flexible Components
  • Onwards To The Next Project & Advanced Concepts
  • Not All Content Must Go Into Components
  • Closer Look: public/ vs assets/ for Image Storage
  • New Project: First Steps Towards Our Tic-Tac-Toe Game
  • Concept Repetition: Splitting Components & Building Reusable Components
  • Concept Repetition: Working with State
  • Component Instances Work In Isolation!
  • Conditional Content & A Suboptimal Way Of Updating State
  • Best Practice: Updating State Based On Old State Correctly
  • User Input & Two-Way-Binding
  • Two-Way-Binding
  • Rendering Multi-Dimensional Lists
  • Best Practice: Updating Object State Immutably
  • Lifting State Up [Core Concept]
  • Avoid Intersecting States!
  • Prefer Computed Values & Avoid Unnecessary State Management
  • Deriving State From Props
  • Sharing State Across Components
  • Reducing State Management & Identifying Unnecessary State
  • Disabling Buttons Conditionally
  • Outsourcing Data Into A Separate File
  • Lifting Computed Values Up
  • Deriving Computed Values From Other Computed Values
  • Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
  • Why Immutability Matters - Always!
  • When NOT To Lift State Up
  • An Alternative To Lifting State Up

  • Adding a Header Component
  • Getting Started with a User Input Component
  • Handling Events & Using Two-Way-Binding
  • Lifting State Up
  • Computing Values & Properly Handling Number Values
  • Outputting Results in a List & Deriving More Values
  • Outputting Content Conditionally

  • Splitting CSS Code Across Multiple Files
  • Styling React Apps with Vanilla CSS - Pros & Cons
  • Vanilla CSS Styles Are NOT Scoped To Components!
  • Styling React Apps with Inline Styles
  • Dynamic & Conditional Inline Styles
  • Dynamic & Conditional Styling with CSS Files & CSS Classes
  • Scoping CSS Rules with CSS Modules
  • Introducing "Styled Components" (Third-party Package)
  • Creating Flexible Components with Styled Components
  • Dynamic & Conditional Styling with Styled Components
  • Styled Components: Pseudo Selectors, Nested Rules & Media Queries
  • Creating Reusable Components & Component Combinations
  • Introducing Tailwind CSS For React App Styling
  • Adding & Using Tailwind CSS In A React Project
  • Tailwind: Media Queries & Pseudo Selectors
  • Dynamic & Conditional Styling with Tailwind
  • Migrating The Demo App to Tailwind CSS
  • Tailwind CSS: Pros & Cons

  • Module Introduction
  • The Starting Project
  • Understanding React Error Messages
  • Using the Browser Debugger & Breakpoints
  • Understanding React's "Strict Mode"
  • Using the React DevTools 

  • Repetition: Managing User Input with State (Two-Way-Binding)
  • Repetition: Fragments
  • Introducing Refs: Connecting & Accessing HTML Elements via Refs
  • Manipulating the DOM via Refs
  • Accessing DOM Elements with "refs"
  • Refs vs State Values
  • Adding Challenges to the Demo Project
  • Setting Timers & Managing State
  • Using Refs for More Than "DOM Element Connections"
  • Managing Other Values with Refs
  • Adding a Modal Component
  • Forwarding Refs to Custom Components
  • Exposing Component APIs via the useImperativeHandle Hook
  • More Examples: When To Use Refs & State
  • Sharing State Across Components
  • Enhancing the Demo App "Result Modal"
  • Closing the Modal via the ESC (Escape) Key
  • Introducing & Understanding "Portals"

  • 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 Split JSX & Tailwind Styles (for Higher Reusability)
  • Managing State to Switch Between Components
  • Collecting User Input with Refs & Forwarded Refs
  • Handling Project Creation & Updating the UI
  • Validating User Input & Showing an Error Modal via useImperativeHandle
  • Styling the Modal via Tailwind CSS
  • Making Projects Selectable & Viewing Project Details
  • Handling Project Deletion
  • Adding "Project Tasks" & A Tasks Component
  • Managing Tasks & Understanding Prop Drilling
  • Clearing Tasks & Fixing Minor Bugs

  • 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
  • Creating & Using Context
  • Introducing the useReducer Hook
  • Dispatching Actions & Editing State with useReducer

  • What's a "Side Effect"? A Thorough Example
  • A Potential Problem with Side Effects: An Infinite Loop
  • Using useEffect for Handling (Some) Side Effects
  • Not All Side Effects Need useEffect
  • useEffect Not Needed: Another Example
  • 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 useCallback Hook

  • React Builds A Component Tree / How React Works Behind The Scenes
  • Analyzing Component Function Executions via React's DevTools Profiler
  • Avoiding Component Function Executions with memo()
  • Avoiding Component Function Executions with Clever Structuring
  • Understanding the useCallback() Hook
  • Understanding the useMemo() Hook
  • React Uses A Virtual DOM - Time To Explore It!
  • Why Keys Matter When Managing State!
  • More Reasons For Why Keys Matter
  • Using Keys For Resetting Components
  • State Scheduling & Batching

  • 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

  • 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)

  • 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

  • What Are Forms & What's Tricky About Them?
  • 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

  • Another Look At State In React Apps
  • Redux vs React Context
  • How Redux Works
  • MUST READ: Redux createStore() is (not) deprecated
  • 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

  • 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
  • Time to Practice: Problem
  • Time to Practice: Solution
  • 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 Summary
  • Upgrading from React Router v5

  • 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

  • Deployment Steps
  • Understanding Lazy Loading
  • Adding Lazy Loading
  • Building the Code For Production
  • Deployment Example
  • Server-side Routing & Required Configuration

  • 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
    • Why Should You Learn React JS Training?

    The annual salary of an React JS is $125k.

    Request more information

    What you will get at Zeblearnindia Learning?

    Zeblearnindia Learning is a premier institute offering training in SAP Online Courses, Web Designing, Data Science, Full-Stack Development, Salesforce, Workday, Machine Learning, Software Testing, and Video Editing. With the option to choose between online and offline (classroom) learning, our well-structured courses cater to students, working professionals, business owners, and entrepreneurs. Here’s what you can expect at Zeblearnindia Learning:

    •   Expert-Led Training
    •   Globally Recognized Certifications
    •   100% Job Placement Support
    •   Hands-On Learning
    •   Flexible Learning Options
    •   Affordable Course Fees
    •   Career Growth Opportunities
    View Courses  
    best-seller-min

    () 60 Minutes WEBINAR with CERTIFICATE

    Date Time IST (GMT +5:30) Event Free Sign Up

    Explore Our Courses Across India - Flexible batches

    We are proud to offer our React JS Training Program services across numerous states nationwide.

    Call Us
    WhatsApp
    Questions? WhatsApp us.
    Placements query?

    We use cookies to improve your experience and personalize our site. cookie policy