Video Lectures of Modern React.js Course: AI, Hooks & Real Projects for Software Development Exam
Watch free video lectures for Modern React.js Course: AI, Hooks & Real Projects covering all chapters/topics as per the latest syllabus in 2026. These concept videos, recorded lectures, and audio notes are designed to help Software Development students understand every topic clearly — anytime, anywhere. Start learning on EduRev.
Introduction & Setup
| Introduction To ReactJS 15:58 min |  |
| Installing Required Tools 03:49 min | |
| Create React App Using VITE 05:25 min | |
| How React App Works 09:39 min | |
Components & JSX
| Creating A Component In React 09:04 min | |
| Auto Format React Code With Prettier 02:55 min | |
| What Is JSX In React 05:18 min | |
| Reusability of Components In React 06:29 min | |
Props
| What are Props In React 07:24 min | |
| Destructuring Props 04:13 min | |
| Immutability of Props 03:19 min | |
| Passing Arrays & Objects To Components Using Props 06:30 min | |
Rendering Lists
| Rendering Arrays Or Lists In React 10:39 min | |
| Rendering Array Of Objects In React 07:52 min | |
| Rendering Components Inside A Loop 07:08 min | |
Conditional Rendering
| Conditionally Rendering JSX & Components 07:13 min | |
| Conditional Rendering Using Element Variables 04:09 min | |
| Using Ternary Operators In React 06:09 min | |
| Conditionally Rendering List Items 06:33 min | |
| Conditionally Rendering A Message Using Ternary 04:42 min | |
Event Handling & State
| Event Handling In React 06:00 min | |
| State In React, Props V/S State In React 03:44 min | |
| Creating Multiple States In React 07:01 min | |
Forms & Input Handling
| Handling Input Fields In React 15:47 min | |
| Handling Multiple Inputs In React 07:45 min | |
| Handling Form Submission In React 04:23 min | |
Project - Todo App
| Todo App Part 1 Setting Up The App 03:29 min | |
| Todo App Part 2 Preview Of The App 02:01 min | |
| Todo App Part 3 Creating Input Component 05:38 min | |
| Todo App Part 4 Submitting Todo Items 09:37 min | |
| Todo App Part 5 Displaying Todos 08:25 min | |
| Todo App Part 6 Inline Styling In React Components 06:56 min | |
| TodoApp Part 7 CSS Stylesheets To Style Components 04:22 min | |
| Todo App Part 8 CSS Modules For Styling 09:18 min | |
| Todo App Part 9 Creating Header & Styling It 07:44 min | |
| Todo App Part 10 Separating JSX Into Components 10:55 min | |
| Todo App Part 11 Styling The Form 10:13 min | |
| Todo App Part 12 Styling Todo Items 08:46 min | |
| Todo App Part 13 Adding A Delete Button 03:47 min | |
| Todo App Part 14 Delete Functionality In React 11:23 min | |
| Todo App Part 15 Adding Complete Task Functionality 06:27 min | |
| Marking Todo Items As Complete 17:41 min | |
| Counting Completed & Total Todos 09:36 min | |
| Sorting Items In A Todo List 05:40 min | |
Project -Recipe App & useEffect
| Recipe App Introduction 03:13 min | |
| Setting Up Project & Making API Calls Using Postman 13:25 min | |
| useEffect Hook In React 13:04 min | |
| Making API Call In React 10:18 min | |
| Creating State To Save Food Data 06:46 min | |
| Building The Food List Component 02:41 min | |
| Food Item Component 04:21 min | |
| Creating The Nav Component 06:52 min | |
| Creating The Search Component 05:02 min | |
| Styling The Food Item Component 12:18 min | |
| Outer Container Component 06:47 min | |
| Creating The Inner Container Component 03:44 min | |
| Creating The Food Detail Component 11:38 min | |
| Fetching Recipes From API 12:24 min | |
| Fetching Recipe Instructions 16:40 min | |
| Designing The Recipe Detail Component 12:49 min | |
| Fetching Ingredients 05:59 min | |
| Splitting Items Into Multiple Components 05:17 min | |
| Styling Items Container 08:58 min | |
useReducer Hook
| useReducer Hook In React 15:10 min | |
| Using Object As State In useReducer 07:34 min | |
| Using Complex Object As State In useReducer 06:20 min | |
| Understanding Reducer Using Bank Account Example 07:29 min | |
React Router
| React Router Part 1 Server Side Rendering v/s Client Side Rendering 03:29 min | |
| React Router Part 2 Creating Routes 10:38 min | |
| React Router Part 3 Link Component In React 06:18 min | |
| React Router Part 4 Nesting Routes 07:42 min | |
| React Router Part 5 Dynamic Routes 06:30 min | |
| React Router Part 6 useNavigate Hook In React 08:05 min | |
Context API
| Context API In React 23:02 min | |
| Separating Context Into Its Own File In React 06:03 min | |
| Sharing Context With Other Components In React 03:31 min | |
| Using Reducer With Context Provider In React 07:11 min | |
| Passing Complex State To Reducer 05:39 min | |
Custom Hooks
| Creating Custom Hooks In React 11:24 min | |
| Creating Our Own useLocalStorage Hook In ReactJS 16:02 min | |
| Using State In A Functional Component 12:31 min | |
Advance Concepts
| Introduction To Map 05:54 min | |
| Understanding Keys 03:43 min | |
| Handling User Input Part 1 13:22 min | |
| Handling User Input Part 2 03:06 min | |
Capstone Project
| Real Time AI Face Landmark Detection in 20 Minutes with React.JS and Tensorflow JS 27:42 min | |
| Real Time AI HAND POSE Estimation with React.JS 34:57 min | |
| Real Time Body Segmentation Tutorial with React.JS 24:10 min | |
