Complete ReactJS - Basic to Advanced

Learn React from the basics! Including React Router, redux, hooks, context, front-end Stripe by creating live projects.

(100+ ratings)
  • Last updated 04/2022
  • Language: Hindi & English

Features:

  • 2Weekly Live Classes
  • 8+Live Projects
  • 2Months
  • ManyPractice questions
  • DedicatedGroup for discussions

Upcoming Batches

All Upcoming batches are occupied. Contact at info@edhint.com to book you seat in advance in the upcoming batch.

Course Chapters

1. Introduction
  • 1. What is Single Page Application?
  • 2. First App in ReactJS
  • 3. Installing NodeJS and NPM
  • 4. Creating React App using CLI
  • 5. More about Create React App
  • 6. Exploring a Create React App Project
  • 7. Starting and Stoping a React App
  • 8. Module System in JavaScript
  • 9. Using Functional Components
2. Creating UI with JSX
  • 1. What is JSX?
  • 2. Inline Styling with JSX
  • 3. Converting Styling to JSX
  • 4. Class vs ClassName
  • 5. Referencing JS Variables in JSX
  • 6. More on JSX
  • 7. Finding Forbidden Property Names
3. Components and Props
  • 1. Application Overview
  • 2. Working on Styling
  • 3. Naive Component Approach
  • 4. Images in JSX
  • 5. Extracting JSX to New Components
  • 6. Component Nesting
  • 7. Props in React
  • 8. Passing and Receiving Props
  • 9. Passing multiple props
  • 10. More on Passing Props
  • 11. Component Reuse
  • 12. Implementing an Approval Card
  • 13. Showing Custom Children
  • 14. Reusing Component
  • 15. Summary
4. Creating CRUD( Create, Read, Update, Delete) Application
  • 1. Class-Based Components
  • 2. Application Overview
  • 3. Scaffolding the App
  • 4. Getting System's Physical Location
  • 5. Resetting Geolocation Preferences
  • 6. Handling Async Operations with Functional Components
  • 7. Refactoring from Functional to Class Components
5. Components and State
  • 1. Introducing State
  • 2. Initializing State Using Constructors
  • 3. Updating State Properties
  • 4. App Lifecycle Walkthrough
  • 5. Error Handling
  • 6. Rendering Content
6. React Lifecycles Methods
  • 1. Lifecycle Methods in ReactJS
  • 2. Use of Lifecycle Methods
  • 3. Refactoring Data Loading to Lifecycle Methods
  • 4. Alternate State Initialization
  • 5. Passing State as Props
  • 6. Determining Season
  • 7. Ternary Expressions in JSX
  • 8. Showing Icons
  • 9. Extracting Options to Config Objects
  • 10. Adding Styles
  • 11. Showing a Loading Spinner
  • 12. Specifying Default Props
  • 13. Avoiding Conditionals in Render
  • 14. Breather and Review
  • 15. Updating Components with State
  • 16. Summary
7. Working with Forms and Events
  • 1. App Overview
  • 2. Component Design
  • 3. Updating Project Structure
  • 4. Showing Forms to the User
  • 5. Adding a Touch of Style
  • 6. Creating Event Handlers
  • 7. Uncontrolled and Controlled Elements
  • 8. More on Controlled Elements
  • 9. Submit Form
  • 10. 'this' in JavaScript
  • 11. Solving Context Issues
  • 12. Communicating Child to Parent
  • 13. Invoking Callbacks in Children
8. Getting Started with API Requests
  • 1. Fetching Data
  • 2. Axios vs Fetch
  • 3. Working on the API response
  • 4. Using Async/Await to hanldle Request
  • 5. Setting State when using Async
  • 6. Binding Callbacks
  • 7. Creating Custom Clients
9. Working with Lists
  • 1. Binding List item into JSX
  • 2. Using Map Statements
  • 3. Using 'key' in Rendering List item
  • 4. Summary
10. Accessing DOM Using Ref's
  • 1. Grid CSS
  • 2. Creating an Image Card Component
  • 3. Using Ref's to Access DOM
  • 4. Accessing Image Height
  • 5. Callbacks on Image Load
  • 6. Dynamic Spans
  • 7. Summary
11. React Hooks
  • 1. Introducing Hooks
  • 2. Hooks at a Glance
  • 3. Using useState Hooks
  • 4. Rules of Hooks
  • 5. Building Your Own Hooks
  • 6. Hooks API Reference
  • 7. Hooks FAQ
12. Routing in ReactJS
  • 1. Navigation in React
  • 2. Component Routing
  • 3. Building a Reusable Route Component
  • 4. Implementing a Header for Navigation
  • 5. Handling Navigation
  • 6. Building a Link
  • 7. Changing URL
  • 8. Detecting Navigation
  • 9. Updating the Route
  • 10. Command Clicks
13. Deploying a React App
  • 1. Section Intro
  • 2. Deployment over Common Servers
  • 3. Deployment with Vercel
  • 4. Deployment with Netlify
14. Introducing Redux
  • 1. Section Intro
  • 2. How Redux works?
  • 3. Redux Deep Dive
  • 4. Modeling with Redux
  • 5. Creating Reducers
  • 6. Point to Note on Redux
  • 7. React with Redux
  • 8. Designing Redux App
  • 9. Working with React-Redux
  • 10. Project Structure
  • 11. Named vs Default Exports
  • 12. Building Reducers
  • 13. Using Providers
  • 14. Connect Function
  • 15. Using MapStateToProps
  • 16. Building a List with Redux Data
  • 17. Action Creators
  • 18. Functional Components with Connect
  • 19. Conditional Rendering
  • 20. Summary
15. Async Actions with Redux Thunk
  • 1. Section Intro
  • 2. Initial App Setup
  • 3. Fetch Data in Redux App
  • 4. Finishing Action Creator
  • 5. Making a Reqeust from Action Creator
  • 6. Understanding Async Action Creators
  • 7. Middlewares in Redux
  • 8. More on Redux Thunk
  • 9. Shortend Syntax with Redux Thunk
16. Redux Store Design
  • 1. Section Intro
  • 2. Return Values from Reducers
  • 3. Argument Values
  • 4. Pure Reducers
  • 5. Mutations in JavaScript
  • 6. Equality of Arrays and Objects
  • 7. Common Mistakes
  • 8. Safe State Updates in Reducers
  • 9. Dispatching Correct Values
  • 10. Building List
  • 11. Displaying List Item
  • 12. Fetching Single Records
  • 13. Displaying the User Header
  • 14. Finding Relevant Users
  • 15. Understanding Logic of mapStateToProps
  • 16. Memoizing Functions
  • 17. Memoization Issues
  • 18. One Time Memoization
  • 19. Alternate Overfetching Solution
  • 20. Action Creators in Action Creators
  • 21. Finding Unique User Ids
  • 22. Quick Refactor with Chain
  • 23. Summary
17. Navigate Using React Router
  • 1. App Overview
  • 2. Mockups in Detail
  • 3. App Difficulties
  • 4. Initial Setup
  • 5. Introducing React Router
  • 6. How React Router works
  • 7. How Paths Get Matched
  • 8. Navigate without React Router
  • 9. Navigating with React Router
  • 10. Different Router Types
  • 11. Component Scaffloding
  • 12. Wiring up Routes
  • 13. Always Visible Components
  • 14. Connecting the Header
  • 15. Links inside Routers
  • 16. Summary
18. Working on Authentication Part
  • 1. OAuth-Based Authentication
  • 2. OAuth for Servers and Browsers Apps
  • 3. Creating OAuth Credentials
  • 4. Google API Integration
  • 5. Sending a User into the OAuth Flow
  • 6. Rendering Authentication Status
  • 7. Updating Auth State
  • 8. Displaying Sign In and Sign Out Buttons
  • 9. On Demand Sign In and Sign Out
  • 10. Redux Architecture Design
  • 11. Redux Setup
  • 12. Connecting Auth with Action Creators
  • 13. Building the Auth Reducer
  • 14. Handling Auth Status Through Redux
  • 15. Fixed Action Types
  • 16. Recording the User's ID
19. Redux Dev Tools
  • 1. Using Redux Dev Tools to Inspect the Store
  • 2. Debug Sessions with Redux Dev Tools
20. Working with Redux Form
  • 1. Forms with Redux Form
  • 2. Connecting Redux Form
  • 3. Creating Forms
  • 4. Handling Events
  • 5. Submitting Form Data
  • 6. Form Input Validations
  • 7. Showing Validation Messages
  • 8. Showing Errors
  • 9. Summary
21. Working with React Portals
  • 1. Use of React Portals
  • 2. More on Using Portals
  • 3. Creating a Portal
  • 4. Hiding a Modal
  • 5. Making a Modal Reusable
  • 6. React Fragments
  • 7. onDismiss From the Parent
  • 8. Reminder on Path Params
  • 9. Fetching the Deletion Stream
  • 10. Conditionally Showing Stream Details
  • 11. Deleting a Stream
  • 12. Summary
22. Video Streaming
  • 1. Viewing a Stream
  • 2. Switches with React-Router
  • 3. Showing a Stream
  • 4. RTMP Server Setup
  • 5. OBS installation
  • 6. OBS Scene Setup
  • 7. Video Player Setup
  • 8. Implementing FLV JS
  • 9. Creating a FLV Player
  • 10. Cleaning with ComponentWillUnmount
  • 11. Summary
23. The Context System
  • 1. The Context System
  • 2. An App with Context
  • 3. Creating a new app
  • 4. Getting Data Out of Context
  • 5. Create Context Objects
  • 6. Consuming Object Value
  • 7. The Context Provider
  • 8. More on Context Providers
  • 9. Accessing Data with Consumers
  • 10. Pulling From Multiple Contexts
  • 11. Summary
24. Replacing Redux with Context
  • 1. Replacing Redux with Context
  • 2. Creating a Store Component
  • 3. Implementing a Language Store
  • 4. Rendering a Language Store
  • 5. Connecting the Selector to the Store
  • 6. Context vs Redux

Course Overview

edHint ReactJS certification training course introduces you to the fundamental concepts of ReactJS and provides hands-on experience in building real-time applications efficiently using ReactJS. This training is specially designed for the developers striving for a successful career in this field. In the complete live training course, we will explain in-depth knowledge of JSX, State, Props, Lifecycle methods, Hooks, Redux, and more through hands-on online sessions. Scale up your career as a ReactJS Frontend developer by enrolling in this ReactJS training.

 

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta(Previously named Facebook) and a community of individual developers and companies.

Requirements

  • Knowledge of JavaScript is required.
  • Any computer and OS will work. We will help to set up the development environment.
  • A basic understanding of HTML and CSS is mandatory.


Live Classes are scheduled for every weekend(Saturday & Sunday).


FAQs

1. Do We Get any Placement Assistance?

The complete course is designed in the way so that you will be hinted for the interview based questions througout the course.

2. How my queries will be resolved?

There are 2 ways by which you will be connected with your instructor. First is the live classes where you can put your queries and second is the group dedicated for the batch. You can clear your queries on any of the places.


Still Confused? Get in touch with our instructors at +91 - 8287374553

Upcoming Batches

All Upcoming batches are occupied. Contact at info@edhint.com to book you seat in advance in the upcoming batch.