CodeWithHarry React JS Tutorials: study plan and how long it takes
The CodeWithHarry playlist is 78 videos and 18.3 hours long. Here's how long it takes at different paces, a week-by-week schedule built from the real videos, and a planner that turns it into your own daily plan.
78 videos · 18.3 hours · CodeWithHarry
CodeWithHarry's React course in Hindi is built around projects: TextUtils, a news app built with class components and then refactored with hooks, and iNotebook, a full MERN notes app with authentication using bcrypt and JWT, plus Context API and Redux.
It teaches both class-based and function components, which is useful when working on older codebases.
Who it's for: JavaScript developers who want to learn React in Hindi by building real projects.
How long does it take?
The full playlist is 18.3 hours across 78 videos. Here's roughly how many days that is at different daily watch times and speeds, counting video time only:
| Daily time | At 1x | At 1.5x | At 2x |
|---|---|---|---|
| 30 min a day | 37 days | 25 days | 19 days |
| 1 h a day | 19 days | 13 days | 10 days |
| 2 h a day | 10 days | 7 days | 5 days |
Make your own schedule
The playlist link is already filled in. Press Plan, set how much time you have each day and your speed, and you'll get a day-by-day schedule with a finish date and a calendar file. It reads the live playlist, so new videos are included.
Week-by-week schedule
A sample plan at 1 hour a day and normal speed, using whole videos so none is split across days. That's 3 weeks in total. For a different pace, start date or speed, use the planner above.
Week 1Videos 1–19 · 5h 39m
Day 1 · 38m
- 1Introduction to React Js + Installation | Complete React Course in Hindi #117m
- 2Creating our first react app using create-react-app | Complete React Course in Hindi #221m
Day 2 · 54m
- 3JavaScript Refresher | Complete React Course in Hindi #327m
- 4Understanding JSX | Complete React Course in Hindi #427m
Day 3 · 45m
- 5Project 1: Setup + Adding Bootstrap to React | Complete React Course in Hindi #519m
- 6Understanding Props and PropTypes in React | Complete React Course in Hindi #626m
Day 4 · 44m
- 7Understanding State & Handling Events in React | Complete React Course in Hindi #725m
- 8Adding more Logic to TextUtils | Complete React Course in Hindi #813m
- 9Exercise 1: Enhancing TextUtils | Complete React Course in Hindi #96m
Day 5 · 48m
- 10Creating "Enable Dark Mode" Button Using useState Hook | Complete React Course in Hindi #1019m
- 11Exercise 1: Solutions + Shoutouts | Complete React Course in Hindi #116m
- 12Improving Dark Mode & Refactoring App Component | Complete React Course in Hindi #1222m
Day 6 · 59m
- 13Adding + Auto Dismissing Alert Messages | Complete React Course in Hindi #1318m
- 14Exercise 2: Adding Custom Color Theme to TextUtils | Complete React Course in Hindi #143m
- 15Changing title dynamically & adding favicons to TextUtils | Complete React Course in Hindi #1510m
- 16React Router Setup + Usage | Complete React Course in Hindi #1614m
- 17[Free] Building + Hosting React App For free on Github Pages | Complete React Course in Hindi #1714m
Day 7 · 52m
- 18Purchasing a Domain + Hosting TextUtils on a VPS | Complete React Course in Hindi #1815m
- 19Fixing Issues & Wrapping up TextUtils | Complete React Course in Hindi #1936m
Week 2Videos 20–46 · 6h
Day 8 · 50m
- 20Exercise 2: Solutions + Shoutouts | Complete React Course in Hindi #2014m
- 21Fixing few more Textutils Issues | Complete React Course in Hindi #219m
- 22Project 2 Setup + Introduction to Class based components | Complete React Course in Hindi #2211m
- 23Component Structure of our NewsMonkey React App | Complete React Course in Hindi #2316m
Day 9 · 55m
- 24Fetching API Key from News API | Complete React Course in Hindi #2414m
- 25Understanding state in class based components | Complete React Course in Hindi #2513m
- 26Looping through an array in JSX to display NewsItems from state | Complete React Course in Hindi #2613m
- 27Using Fetch API in React to populate NewsItems | Complete React Course in Hindi #2714m
Day 10 · 47m
- 28Adding Previous & Next Buttons to populate NewsItems | Complete React Course in Hindi #2816m
- 29Adding loading spinner & variable pageSize to NewsMonkey | Complete React Course in Hindi #2917m
- 30Adding Categories & propTypes to NewsMonkey React App | Complete React Course in Hindi #3014m
Day 11 · 56m
- 31Fetching News category wise in NewsMonkey React App | Complete React Course in Hindi #3115m
- 32Adding time, author and news source to News React App | Complete React Course in Hindi #3213m
- 33Refactoring News component to use the same function | Complete React Course in Hindi #3311m
- 34React Component Lifecycle & Lifecycle methods | Complete React Course in Hindi #3416m
Day 12 · 47m
- 35Adding Infinite Scroll to NewsMonkey | Complete React Course in Hindi #3516m
- 36Adding a top loading bar to NewsMonkey | Complete React Course in Hindi #3615m
- 37Hiding API Key by Adding Custom Environment Variables | Complete React Course in Hindi #377m
- 38Introduction to React Hooks | Complete React Course in Hindi #389m
Day 13 · 1h
- 39Changing Class based NewsMonkey components to Functional based | Complete React Course in Hindi #3917m
- 40Sticky Navbar & NewsMonkey bug fixes | Complete React Course in Hindi #4010m
- 41Introduction to MERN stack | Complete React Course in Hindi #418m
- 42Project 3: iNotebook backend and React frontend setup | Complete React Course in Hindi #4212m
- 43iNotebook db & Express Server Setup | Complete React Course in Hindi #4313m
Day 14 · 46m
- 44Creating Routes & Schema for Storing Notes & Users | Complete React Course in Hindi #4422m
- 45Storing Data into the Database Using Mongoose Model | Complete React Course in Hindi #4512m
- 46Adding Data Validation Using express-validator | Complete React Course in Hindi #4612m
Week 3Videos 47–78 · 6h 38m
Day 15 · 59m
- 47Creating ThunderClient Collections to Manage Requests | Complete React Course in Hindi #4716m
- 48Understanding Password Hashing, Salt & Pepper | Complete React Course in Hindi #4818m
- 49Hashing Passwords using bcryptjs in NodeJs | Complete React Course in Hindi #4915m
- 50Creating Login Endpoint & sending auth token| Complete React Course in Hindi #5012m
Day 16 · 57m
- 51Creating a middleware to decode user from a JWT | Complete React Course in Hindi #5115m
- 52Fetching all notes & Adding a Note | Complete React Course in Hindi #5217m
- 53Updating an existing Note | Complete React Course in Hindi #5315m
- 54Endpoint for deleting a Note | Complete React Course in Hindi #5410m
Day 17 · 52m
- 55iNotebook React Project Setup | Complete React Course in Hindi #5511m
- 56Creating Navbar and Routes | Complete React Course in Hindi #5611m
- 57Introduction to React Context API | Complete React Course in Hindi #5710m
- 58useContext hook: Using React Context API | Complete React Course in Hindi #5819m
Day 18 · 58m
- 59useLocation Hook in React | Complete React Course in Hindi #5911m
- 60iNotebook: Fetching Notes from Context | Complete React Course in Hindi #606m
- 61iNotebook: Adding NoteItem in a Separate Note component | Complete React Course in Hindi #617m
- 62Adding font awesome icons to iNotebook | Complete React Course in Hindi #6212m
- 63Adding AddNote component to iNotebook | Complete React Course in Hindi #6316m
- 64Adding "delete note" functionality to iNotebook | Complete React Course in Hindi #647m
Day 19 · 57m
- 65Adding "fetch notes" functionality to iNotebook | Complete React Course in Hindi #6514m
- 66Adding a Modal for Editing Notes | Complete React Course in Hindi #6617m
- 67Updating Notes on edit in the UI using React | Complete React Course in Hindi #6713m
- 68Adding Frontend Validation + Few Fixes in iNotebook | Complete React Course in Hindi #6813m
Day 20 · 56m
- 69Adding Login Component to iNotebook | Complete React Course in Hindi #6920m
- 70Adding SignUp Component to iNotebook | Complete React Course in Hindi #7013m
- 71Adding Alerts to Login, Signup & Notes Component of iNotebook | Complete React Course in Hindi #7111m
- 72Fetching User Specific Notes in iNotebook | Complete React Course in Hindi #7212m
Day 21 · 59m
- 73Introduction to Redux | Complete React Course in Hindi #739m
- 74Setting up a React Application for Redux | Complete React Course in Hindi #7410m
- 75Creating a Reducer & Action Creator in Redux | Complete React Course in Hindi #7513m
- 76Creating a Redux Store | Complete React Course in Hindi #7610m
- 77Accessing State in Redux | Complete React Course in Hindi #776m
- 78Updating state from a different component in Redux | Complete React Course in Hindi #7811m
Tips for finishing
- Modern React mostly uses function components and hooks. Don't spend too long perfecting the class-component versions.
- Build iNotebook yourself alongside the videos; it covers the full MERN stack.