Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Complete React Course in Hindi - Learn ReactJS from Scratch

CodeWithHarry via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn React.js from scratch through this comprehensive 18-hour Hindi-language course that covers everything from basic concepts to advanced full-stack development. Master React fundamentals including JSX, components, props, state management, and event handling while building three practical projects. Start with TextUtils, a text manipulation application where you'll implement dark mode, alerts, and routing, then progress to NewsMonkey, a news aggregation app using class-based components, API integration, lifecycle methods, and infinite scrolling. Complete the learning journey by building iNotebook, a full-stack MERN application with user authentication, CRUD operations, and React Context API. Explore React Hooks including useState, useEffect, and useContext, understand component lifecycle methods, implement React Router for navigation, and integrate Bootstrap for styling. Gain hands-on experience with API consumption, environment variables, password hashing with bcryptjs, JWT authentication, and MongoDB integration using Mongoose. Learn Redux for state management, create custom middleware, implement form validation, and deploy applications to GitHub Pages and VPS hosting. The course includes practical exercises, solutions, and troubleshooting sessions to reinforce learning concepts and ensure thorough understanding of React development patterns and best practices.

Syllabus

Introduction to React Js + Installation | Complete React Course in Hindi #1
Creating our first react app using create-react-app | Complete React Course in Hindi #2
JavaScript Refresher | Complete React Course in Hindi #3
Understanding JSX | Complete React Course in Hindi #4
Project 1: Setup + Adding Bootstrap to React | Complete React Course in Hindi #5
Understanding Props and PropTypes in React | Complete React Course in Hindi #6
Understanding State & Handling Events in React | Complete React Course in Hindi #7
Adding more Logic to TextUtils | Complete React Course in Hindi #8
Exercise 1: Enhancing TextUtils | Complete React Course in Hindi #9
Creating "Enable Dark Mode" Button Using useState Hook | Complete React Course in Hindi #10
Exercise 1: Solutions + Shoutouts | Complete React Course in Hindi #11
Improving Dark Mode & Refactoring App Component | Complete React Course in Hindi #12
Adding + Auto Dismissing Alert Messages | Complete React Course in Hindi #13
Exercise 2: Adding Custom Color Theme to TextUtils | Complete React Course in Hindi #14
Changing title dynamically & adding favicons to TextUtils | Complete React Course in Hindi #15
React Router Setup + Usage | Complete React Course in Hindi #16
[Free] Building + Hosting React App For free on Github Pages | Complete React Course in Hindi #17
Purchasing a Domain + Hosting TextUtils on a VPS | Complete React Course in Hindi #18
Fixing Issues & Wrapping up TextUtils | Complete React Course in Hindi #19
Exercise 2: Solutions + Shoutouts | Complete React Course in Hindi #20
Fixing few more Textutils Issues | Complete React Course in Hindi #21
Project 2 Setup + Introduction to Class based components | Complete React Course in Hindi #22
Component Structure of our NewsMonkey React App | Complete React Course in Hindi #23
Fetching API Key from News API | Complete React Course in Hindi #24
Understanding state in class based components | Complete React Course in Hindi #25
Looping through an array in JSX to display NewsItems from state | Complete React Course in Hindi #26
Using Fetch API in React to populate NewsItems | Complete React Course in Hindi #27
Adding Previous & Next Buttons to populate NewsItems | Complete React Course in Hindi #28
Adding loading spinner & variable pageSize to NewsMonkey | Complete React Course in Hindi #29
Adding Categories & propTypes to NewsMonkey React App | Complete React Course in Hindi #30
Fetching News category wise in NewsMonkey React App | Complete React Course in Hindi #31
Adding time, author and news source to News React App | Complete React Course in Hindi #32
Refactoring News component to use the same function | Complete React Course in Hindi #33
React Component Lifecycle & Lifecycle methods | Complete React Course in Hindi #34
Adding Infinite Scroll to NewsMonkey | Complete React Course in Hindi #35
Adding a top loading bar to NewsMonkey | Complete React Course in Hindi #36
Hiding API Key by Adding Custom Environment Variables | Complete React Course in Hindi #37
Introduction to React Hooks | Complete React Course in Hindi #38
Changing Class based NewsMonkey components to Functional based | Complete React Course in Hindi #39
Sticky Navbar & NewsMonkey bug fixes | Complete React Course in Hindi #40
Introduction to MERN stack | Complete React Course in Hindi #41
Project 3: iNotebook backend and React frontend setup | Complete React Course in Hindi #42
iNotebook db & Express Server Setup | Complete React Course in Hindi #43
Creating Routes & Schema for Storing Notes & Users | Complete React Course in Hindi #44
Storing Data into the Database Using Mongoose Model | Complete React Course in Hindi #45
Adding Data Validation Using express-validator | Complete React Course in Hindi #46
Creating ThunderClient Collections to Manage Requests | Complete React Course in Hindi #47
Understanding Password Hashing, Salt & Pepper | Complete React Course in Hindi #48
Hashing Passwords using bcryptjs in NodeJs | Complete React Course in Hindi #49
Creating Login Endpoint & sending auth token| Complete React Course in Hindi #50
Creating a middleware to decode user from a JWT | Complete React Course in Hindi #51
Fetching all notes & Adding a Note | Complete React Course in Hindi #52
Updating an existing Note | Complete React Course in Hindi #53
Endpoint for deleting a Note | Complete React Course in Hindi #54
iNotebook React Project Setup | Complete React Course in Hindi #55
Creating Navbar and Routes | Complete React Course in Hindi #56
Introduction to React Context API | Complete React Course in Hindi #57
useContext hook: Using React Context API | Complete React Course in Hindi #58
useLocation Hook in React | Complete React Course in Hindi #59
iNotebook: Fetching Notes from Context | Complete React Course in Hindi #60
iNotebook: Adding NoteItem in a Separate Note component | Complete React Course in Hindi #61
Adding font awesome icons to iNotebook | Complete React Course in Hindi #62
Adding AddNote component to iNotebook | Complete React Course in Hindi #63
Adding "delete note" functionality to iNotebook | Complete React Course in Hindi #64
Adding "fetch notes" functionality to iNotebook | Complete React Course in Hindi #65
Adding a Modal for Editing Notes | Complete React Course in Hindi #66
Updating Notes on edit in the UI using React | Complete React Course in Hindi #67
Adding Frontend Validation + Few Fixes in iNotebook | Complete React Course in Hindi #68
Adding Login Component to iNotebook | Complete React Course in Hindi #69
Adding SignUp Component to iNotebook | Complete React Course in Hindi #70
Adding Alerts to Login, Signup & Notes Component of iNotebook | Complete React Course in Hindi #71
Fetching User Specific Notes in iNotebook | Complete React Course in Hindi #72
Introduction to Redux | Complete React Course in Hindi #73
Setting up a React Application for Redux | Complete React Course in Hindi #74
Creating a Reducer & Action Creator in Redux | Complete React Course in Hindi #75
Creating a Redux Store | Complete React Course in Hindi #76
Accessing State in Redux | Complete React Course in Hindi #77
Updating state from a different component in Redux | Complete React Course in Hindi #78

Taught by

CodeWithHarry

Reviews

Start your review of Complete React Course in Hindi - Learn ReactJS from Scratch

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.