React Js – A Deep Dive

Learn React JS from Scratch — No Prior Experience Required, Explained in a Simple and Clear Manner.

What you'll learn

This course starts from scratch — from installation to real-time coding. Each concept is taught practically with a supporting program and easy-to-follow videos.

Covers 22 topics with 320+ concepts, 500+ quiz questions, 3 CRUD apps, and one detailed project. All source code and materials are included.

Each concept includes theory, practicals, quizzes, and separate study material. Content is in simple Indian English, easy for students and professionals alike.

Concepts are broken into small parts and explained in short, clear videos. Perfect for self-paced learning with complete support materials.

Requirements

No prior programming experience is required to take this course. You don’t need to know JavaScript beforehand—we’ve carefully included only the JavaScript that’s essential for understanding the course content. The required JavaScript is explained in three simple, well-structured parts, introduced only when needed, and in a way that’s easy for beginners to follow. You just need to know very basic HTML, like creating headings, paragraphs, and simple page structure. That’s enough to get started confidently with the course. Our goal is to make learning smooth and accessible—even for complete beginners—by breaking down each concept into digestible, step-by-step explanations.

Description

React JS Course: From Fundamentals to Real-World ProjectThis course is carefully designed to guide learners from the very basics of web development to building a fully functional full stack application using React JS and Spring Boot. With a focus on practical implementation, the course is structured to be accessible to learners from all backgrounds — whether you are a student, job seeker, freelancer, or working professional.Course Highlights1. Comprehensive Beginner-Friendly ApproachThe course starts from the absolute basics, including downloading and installing necessary tools. No prior programming knowledge is required. A basic understanding of HTML is sufficient to begin.2. Detailed JavaScript CoverageJavaScript is taught in a structured and in-depth manner across three dedicated sections. The content is designed to help learners gradually build a solid understanding of JavaScript, from core principles to advanced functionality.3. Concept-Based Learning with Practical ExamplesEvery concept is taught with clear, real-time examples that demonstrate how it is used in actual development scenarios. This ensures not just theoretical understanding but also practical application.4. Reinforcement Through Quizzes and MaterialsEach concept is accompanied by a set of quiz questions to test comprehension. Additionally, well-prepared supporting materials are provided for all topics to aid in revision and deeper learning.5. Extensive Hands-On PracticeOver 320 individual concepts are covered with hands-on demonstrations. The course includes practical exercises, coding challenges, and detailed walkthroughs to help solidify learning.6. Complete CRUD Operations Explained from ScratchThree full CRUD (Create, Read, Update, Delete) operations are covered in detail, helping learners understand the structure and flow of web applications from the ground up.7. Backend Development with Spring BootThe course provides step-by-step guidance on creating RESTful APIs using Spring Boot. From setup to deployment, every aspect is covered with clarity and depth.8. Seamless Frontend and Backend IntegrationThe frontend, developed using React JS, is fully integrated with the backend services developed in Spring Boot. This full stack development approach enables learners to understand the interaction between client and server in real-world applications.9. Real-Time Project: Lead Management SystemA complete project is developed from scratch to apply everything learned throughout the course. Both frontend and backend components are built, connected, and deployed as part of a fully functional Lead Management System.10. Efficient and Structured Video ContentAll videos are concise, averaging 3 to 4 minutes in length. This allows learners to absorb complex topics in manageable segments without feeling overwhelmed.11. Practical Skills for Real-World ApplicationsBy the end of the course, learners will be equipped with the skills required to build complex frontend applications, connect them to backend systems, and manage real-world application logic.Who Should Enroll?College students (from first year to final year) seeking practical exposureJob seekers aiming to build job-ready development skillsWorking professionals looking to upskill or switch to full stack developmentFreelancers interested in delivering complete web applications independentlyTeaching PhilosophyThe course is taught in a programmatic, example-driven style to keep learners actively engaged. Emphasis is placed on simplifying complex topics, making them accessible to learners at all levels — even those with minimal technical background.

Overview

Section 1: Setup

Lecture 1 Introduction

Lecture 2 Software folder creation and Browser settings

Lecture 3 Downloading node software

Lecture 4 Downloading Visual Studio (VS) code software

Lecture 5 Uninstalling node software.

Lecture 6 Uninstalling VS code software

Lecture 7 Check the commands from node, npm and vs code

Lecture 8 Observe node and npm entries in the PATH under environment variables

Lecture 9 Installing node software and observing of Auto Path updating

Lecture 10 Check the node and npm entries in the PATH updation in the environment variables

Lecture 11 Checking versions of node and npm

Lecture 12 Observe VS Code entry in the PATH under environment variables

Lecture 13 Installing VS code software and observing of Auto PATH updating

Lecture 14 Check the VS Code entry in the PATH updation in the environment variables

Lecture 15 Checking versions of VS code

Lecture 16 Creating React project

Lecture 17 Opening a React project in the VS code

Lecture 18 Plugin CodeGeeX: AI Coding Assistant

Lecture 19 Starting React project

Lecture 20 Stopping React project

Section 2: Understanding the project content

Lecture 21 Introduction

Lecture 22 Walking through the default file and directories in the React project.

Lecture 23 Understanding about package.json

Lecture 24 Understanding software’s version numbers

Lecture 25 Understanding caret (^) symbol in the version

Lecture 26 Understanding node_modules

Lecture 27 Understanding package-lock.json

Lecture 28 Understanding .gitignore

Lecture 29 Triggering nmp install (or) npm i

Lecture 30 Triggering nmp install (or) npm i …

Lecture 31 Understanding about public folder

Lecture 32 Accessing files of public folder from the browser

Lecture 33 Create new files and folders in the public folder and then accessing

Lecture 34 What is the Welcome file

Lecture 35 Understanding index.html

Lecture 36 Making a request to un available resources

Lecture 37 Renaming project’s title

Lecture 38 Developer/Programmer code (src)

Lecture 39 Understanding index.js

Lecture 40 What is a component?

Lecture 41 Different features in the web component?

Lecture 42 Different files in the Web component

Lecture 43 Understanding default App component

Lecture 44 Modifying App component

Lecture 45 Using App component multiple times

Lecture 46 Understanding index.css

Lecture 47 Understanding usage of logo.svg through import in the App.js.

Lecture 48 Understanding Presentation portion in the App component.

Section 3: Essential concepts of JavaScript – part1:

Lecture 49 Introduction

Lecture 50 Creating new react application

Lecture 51 Javascript var variables

Lecture 52 Javascript let variable

Lecture 53 Javascript const declaration

Lecture 54 Javascript arrays

Lecture 55 JSON object

Lecture 56 Array of JSON objects

Lecture 57 Javascript events.

Lecture 58 event.preventÞfault()

Lecture 59 stopPropegation

Lecture 60 Javascript function through declaration

Lecture 61 Javascript functions through Expression

Lecture 62 Javascript functions through arrow

Lecture 63 Understanding export

Lecture 64 Understanding default

Lecture 65 Understanding import

Section 4: Implementing JavaScript code and CSS in the App component

Lecture 66 Introduction

Lecture 67 Understanding javascript (programming) portion in the app component

Lecture 68 Declaring and using javaScript variables inside App component

Lecture 69 Declaring , Defining and using javascript functions inside App component

Lecture 70 Declaring json object and using in the app component

Lecture 71 Declaring and using javascript arrays inside App component

Lecture 72 Using array’s map method

Lecture 73 Using array’s forEach method

Lecture 74 Using array of JSON objects

Lecture 75 Understanding the usage of styles in the App component from App.css

Lecture 76 Difference between index.css and App.css

Section 5: Component creation and usage

Lecture 77 Introduction

Lecture 78 Creating a new component and use the same in the App component

Lecture 79 Adding styles to new component

Lecture 80 Repeat usage of new component

Lecture 81 Understanding the order of considering css files

Lecture 82 Creating multiple components and using multiple times

Section 6: Essential React Hooks

Lecture 83 Introduction

Lecture 84 useState

Lecture 85 useEffect

Lecture 86 useEffect for the changes

Lecture 87 create json file

Lecture 88 access json file from the browser

Lecture 89 Load json file into the component

Lecture 90 print json objects from loaded json file

Section 7: Form Fields

Lecture 91 Introduction

Lecture 92 Differences between <input type=’button’ and <button tag with type

Lecture 93 Component with text fields

Lecture 94 onChange event

Lecture 95 onClick event and print the data in the console

Lecture 96 placeholder verses value?

Lecture 97 Component with the password field

Lecture 98 Component with the textarea

Lecture 99 Component with date field

Lecture 100 Component with datetime-local field

Lecture 101 Component with the select (drop down)

Lecture 102 Component with text, password, textarea and select

Lecture 103 Reading form data into json object

Lecture 104 Component with a simple signup form

Lecture 105 Component with a simple login form

Section 8: Essential concepts of JavaScript – part2

Lecture 106 Introduction

Lecture 107 javascript arrays revived

Lecture 108 JavaScript arrays map method

Lecture 109 JavaScript arrays filter function

Lecture 110 javascript arrays reduce method

Lecture 111 Numeric array sorting in the ascending order

Lecture 112 Numeric array sorting in the descending order

Lecture 113 String array sorting in the ascending order

Lecture 114 String array sorting in the descending order

Lecture 115 Search for elements in a string array

Lecture 116 Search for an element in the numeric array

Lecture 117 JSON object revived

Lecture 118 JSON.stringify()

Lecture 119 JSON.parse()

Lecture 120 Object.keys(obj)

Lecture 121 Object.values(obj)

Lecture 122 Object.entries(obj)

Lecture 123 Object.assign(target, source)

Lecture 124 Spread syntax: {…obj, newKey: 'value'}

Lecture 125 delete obj.key

Section 9: Complex form fields

Lecture 126 Introduction

Lecture 127 Component with the radio buttons

Lecture 128 Radio button with the reference data

Lecture 129 Radio button with the JSON object as a reference data.

Lecture 130 Component with the checkboxes

Lecture 131 Checkboxes with the common onChange function.

Lecture 132 Checkboxes with the reference data

Lecture 133 Checkboxes with JSON objects as a reference data

Lecture 134 Component with the multi select (drop down)

Lecture 135 Multi select box with the reference data.

Lecture 136 Multi select with json objects as a reference data

Lecture 137 Component with the file upload

Lecture 138 Component with the multiple files upload

Lecture 139 Component with the file upload through multiple keyword

Lecture 140 Component with the complex signup form

Section 10: Form validations

Lecture 141 Introduction

Lecture 142 text field validation

Lecture 143 assword field validation

Lecture 144 textarea field validation

Lecture 145 date field validation

Lecture 146 datetime field validation

Lecture 147 email field validation (required rule)

Lecture 148 email basic validation with a regex.

Lecture 149 radio button validation

Lecture 150 checkboxes validation

Lecture 151 select validation

Lecture 152 multi select validation

Lecture 153 file upload validation

Lecture 154 file with multiple validation

Lecture 155 simple signup form validation

Lecture 156 simple signup form validation with focus

Lecture 157 simple signup form validations, focus and errors object

Lecture 158 simple signup with validations, errors object and submit alert

Lecture 159 simple login form validation

Lecture 160 simple login form validation with the focus

Lecture 161 Complex signup form with the validation and the focus

Section 11: React Routers

Lecture 162 Introduction

Lecture 163 Install react router library

Lecture 164 Create multiple components. (CRUD)

Lecture 165 Setup the routers in the index.js

Lecture 166 Add few more components to the router

Lecture 167 Access the routes from a browser

Lecture 168 Navigations (using Link tag)

Lecture 169 Mapping App component to 404 (resource not found)

Lecture 170 Mapping New Component (NotFound) to 404

Lecture 171 Sending parameter to the route

Lecture 172 Sending multiple parameters to the route

Lecture 173 Navigate through button event

Section 12: Nesting a components

Lecture 174 Introduction

Lecture 175 A simple child inside a parent

Lecture 176 Child inside a Child

Lecture 177 Developing 4 levels of parent to child

Lecture 178 Sending parameter to the child from a parent

Lecture 179 Sending multiple parameters to the child from a parent

Lecture 180 Sending an array to the child

Lecture 181 Sending JSON object to the child

Lecture 182 Sending array of JSON objects to the child

Lecture 183 Sending function itself as an input to the child

Lecture 184 Sending state variable to a child (useState type)

Lecture 185 Sending state and its setter to a child (useState type)

Lecture 186 Declare createContext() and useContext()

Lecture 187 Apply useContext in the child components

Lecture 188 Find the differences between useState() and useContext()

Section 13: CRUD operations by using Context API

Lecture 189 Introduction

Lecture 190 Create BookContext

Lecture 191 Initialize Data in the App component

Lecture 192 Configure the Data inside a Context

Lecture 193 Develop ReadAll component

Lecture 194 Implement structure for the Create operation in the ReadAll component

Lecture 195 Develop Create Component

Lecture 196 Implement structure for the Read operation in the ReadAll component.

Lecture 197 Develop Read Component

Lecture 198 Configure Update settings in the ReadAll Component

Lecture 199 Develop Update Component

Lecture 200 Configure Delete settings in the ReadAll component.

Lecture 201 Develop Delete Component

Section 14: CRUD operations by using sessionStorage

Lecture 202 Introduction

Lecture 203 Configure routes in the index.js

Lecture 204 Initialize the data inside an App component

Lecture 205 ReadAll Component

Lecture 206 Create component

Lecture 207 Read Component

Lecture 208 Update Component

Lecture 209 Delete Component

Section 15: Essential concepts of JavaScript – part3

Lecture 210 Introduction

Lecture 211 Synchronous operation

Lecture 212 Asynchronous operations

Lecture 213 Asynchronous operation with waiting time before starting the execution

Lecture 214 Multiple Asynchronous operations with waiting time before startingthe execu

Lecture 215 Asynchronous with time taking operation

Lecture 216 Time consuming operations in both synchronous and asynchronous operations

Lecture 217 Multiple times Time consuming operations in both synchronous and asynchrono

Lecture 218 Threads

Lecture 219 Function callback

Lecture 220 Function callback in two levels

Lecture 221 Function call back in 3 levels

Lecture 222 Function callback along with the input to the callback function

Lecture 223 Function callback along with the the input to the callback function (2 levels)

Lecture 224 Function callback along with the the input to the callback function (3 levels)

Lecture 225 Callback hell

Lecture 226 Promise

Lecture 227 Promise with only success

Lecture 228 Promise with errors

Lecture 229 Promise objects chain

Lecture 230 Promise objects with synchronous, macro and micro blocks

Lecture 231 Macro inside a promise

Lecture 232 Resolve inside a macro

Lecture 233 async and await

Lecture 234 Call fetch without async and await

Lecture 235 Call fetch with async and await

Lecture 236 Call axios without async and await

Lecture 237 Call axios with async and await

Section 16: Fetch API (To call to server side api’s)

Lecture 238 Introduction

Lecture 239 Eclipse download and setup for the development

Lecture 240 Setup the serverside Spring Boot Application

Lecture 241 Create React project

Lecture 242 Give a call to serverside API

Lecture 243 Get the raw message from the server

Lecture 244 Get a message from a server but inside a JSON object

Lecture 245 Get a raw array from the server

Lecture 246 Get an array content but inside a JSON object

Lecture 247 Get list content inside a JSON object

Lecture 248 Get set content inside a JSON object

Lecture 249 Get map content inside a JSON object

Lecture 250 Get Person object inside a JSON object

Lecture 251 Get array of Person objects inside a JSON object

Lecture 252 Get multiple Person objects inside a HashMap. This HashMap is in the JSON object

Lecture 253 Get a List which contains multiple HashMaps.. Return List in the JSON objec

Lecture 254 Post a simple form in the form of JSON to the serverside API

Lecture 255 Post a simple form in the form of JSON to the serverside API with validations

Lecture 256 Post a simple signup form in the form of JSON to the serverside API

Lecture 257 Post a simple signup form in the form of JSON to the serverside API with a valid

Lecture 258 Post a simple signup form in the form of FormData to the serverside API

Lecture 259 Post a simple signup form in the form of FormÚta to the serverside API with file

Lecture 260 Post a simple signup form in the form with a JSON content and a file

Lecture 261 Post a simple signup form in the form of FormData to the serverside API with val

Lecture 262 Post a simple Login form in the form of JSON to the serverside API

Lecture 263 Post a simple Login form in the form of JSON to the serverside API with validati

Lecture 264 Post a simple Login form in the form of FormData to the serverside API

Lecture 265 Post a simple Login form in the form of FormData to the serverside API with vali

Section 17: CRUD operations in Spring Boot

Lecture 266 Introduction

Lecture 267 Spring Boot Project

Lecture 268 Entity class development

Lecture 269 Repository interface development

Lecture 270 DTO Development for read all

Lecture 271 Service class development

Lecture 272 Controller Development

Section 18: Fetch API CRUD development

Lecture 273 Introduction

Lecture 274 Setup

Lecture 275 Define routes

Lecture 276 App.js

Lecture 277 Create.js:

Lecture 278 ReadAll.js

Lecture 279 Read.js

Lecture 280 Update.js

Lecture 281 Delete.js

Lecture 282 CRUD operations running

Section 19: axios library(To call to server side api’s)

Lecture 283 Introduction

Lecture 284 Install axios

Lecture 285 Give a call to serverside API.

Lecture 286 Get the raw message from the server

Lecture 287 Get a messagefrom a server but inside a JSON object

Lecture 288 Get a raw array from the server

Lecture 289 Get an array content but inside a JSON object

Lecture 290 Get list content inside a JSON object

Lecture 291 Get set content inside a JSON object

Lecture 292 Get map content inside a JSON object

Lecture 293 Get Person object inside a JSON object

Lecture 294 Get array of Person objects inside a JSON object

Lecture 295 Get multiple Person objects inside a HashMap. This HashMap is in the JSON object

Lecture 296 Get a List which contains multiple HashMaps.. Return List in the JSON object

Lecture 297 Post a simple form in the form of JSON to the serverside API

Lecture 298 Post a simple form in the form of JSON to the serverside API with validatio

Lecture 299 Post a simple signup form in the form of JSON to the serverside API

Lecture 300 Post a simple signup form in the form of JSON to the serverside API with a valid

Lecture 301 Post a simple signup form in the form of FormData to the serverside API

Lecture 302 Post a simple signup form in the form of FormÚta to the serverside API with file

Lecture 303 Post a simple signup form in the form with a JSON content and a file

Lecture 304 Post a simple Login form in the form of JSON to the serverside API

Lecture 305 Post a simple Login form in the form of JSON to the serverside API with val

Lecture 306 Post a simple Login form in the form of FormData to the serverside API

Lecture 307 Post a simple Login form in the form of FormData to the serverside API with vali

Section 20: CRUD operations by using axios Library

Lecture 308 Introduction

Lecture 309 Setup

Lecture 310 Define routes

Lecture 311 App.js

Lecture 312 Create.js

Lecture 313 ReadAll.js

Lecture 314 Read.js

Lecture 315 Update.js:

Lecture 316 Delete.js:

Lecture 317 CRUD operations running

Section 21: Revamping CRUD operations by using async and await with axios library

Lecture 318 Introduction

Lecture 319 Create operation

Lecture 320 ReadAll operation

Lecture 321 Read Operation

Lecture 322 Update operation

Lecture 323 Delete Operation

Lecture 324 Running CRUD operations

Section 22: Project development - Lead Management system from a scratch

Lecture 325 Introduction

Lecture 326 Overview of Project

Lecture 327 Create a Lead entity

Lecture 328 Create Interaction Entity

Lecture 329 Create LeadDTO

Lecture 330 Create Repository

Lecture 331 Create Service class

Lecture 332 Create Controller

Lecture 333 Configure the Leads which should load in the startup

Lecture 334 React Routes configuration

Lecture 335 App.js

Lecture 336 LeadService.js

Lecture 337 Create.js

Lecture 338 ReadAll.js

Lecture 339 Sorting Records

Lecture 340 Search Records

Lecture 341 ChangeStatus.js

Lecture 342 Add New Interaction description

This course is suitable for all types of learners: – College students from 1st year to final year, regardless of branch – Job seekers from any background, aiming to enhance their skillset – Working professionals at any level, looking to upskill or switch domains – Freelancers who want to independently take up and complete real projects Whether you're just starting out or looking to strengthen your practical skills, this course is designed to meet you where you are.