Javascript & React Full Course for New Learners with Frontend Master

Frontend Master .

profile
5

Javascript & React Full Course for New Learners

profile
Courses

About this product

[[ This is Recording of my course with all the questions discussions that happened ]]


This Course focues on building right mental model around javascript and React. Whatever is there in the course is the foundational things that everyone should know.

These are not everything, but these are mandatory thing, the first steps.


Language: HINDI


What it contains:


🧠 JavaScript Full Course Outline


📘 Part 1: Foundations

  1. Day 1: Course Intro, Path to Success
  2. Day 2: JavaScript Introduction, Data Types
  3. Day 3: Objects, Symbols, Truthy and Falsy Values
  4. Day 4 (Part 1): Loops and Functions
  5. Day 4 (Part 2): Functions Continued (return, parameters, scope, pure vs impure)



⚙️ Part 2: Core Concepts

  1. Day 5: JavaScript Classes
  2. Day 6: Hoisting, == vs ===, Shallow and Deep Copy
  3. Day 7: Coercion, Scope, Lexical Scope
  4. Day 8: Closures
  5. Day 9: this, call, bind, apply



🌐 Part 3: Asynchronous JavaScript

  1. Day 10: Callbacks, Promises (Part 1)
  2. Day 11: Promise Chaining (Part 2)
  3. Day 12: async / await, Promise.all()



🔄 Part 4: Event System & Browser Interaction

  1. Day 13: Event Loop (Microtask, Macrotask, Queue)
  2. Day 15: DOM Manipulation, Event Bubbling, Capturing, Delegation, Debouncing
  3. Day 16: Currying, Throttling, Prototypal Inheritance



🧩 Part 5: Advanced Objects & Data Structures


  1. Day 17: Prototypes (in depth)
  2. Day 18: Maps and WeakMaps

  • What is a Map?
  • Difference between Map and Object
  • When to use Map
  • Iterating over a Map
  • Practical examples (e.g., caching results, counting frequency)
  • What is a WeakMap?
  • Key characteristics (keys must be objects, garbage collection)
  • Real-world use cases (private data storage for objects, memory-efficient caches)
  1. Day 19: Sets and WeakSets
  • What is a Set?
  • Difference between Set and Array
  • Built-in methods: add(), has(), delete(), size, forEach()
  • Modern Set methods: union, intersection, difference, symmetricDifference, isSubsetOf, isSupersetOf
  • What is a WeakSet?
  • Use cases (tracking object presence, memory-safe object collections)



🧰 Part 6: Utilities and Patterns

Day 20:

  • Currying
  • Memoization using Map/WeakMap
  • Event Delegation patterns



React Content


📅 Day 1 – Intro Session


  • What is React?
  • History & evolution of frontend frameworks
  • Course structure & expectations
  • What you need to know before learning React



📅 Day 2 – Why React? and Why Not React?


  • Problems React solves vs traditional DOM manipulation
  • SPA vs MPA architecture
  • Pros & cons of React in real projects
  • When NOT to use React



📅 Day 3 – Why we need Server, devDeps, Vite?


  • Why frontend apps need servers
  • Local dev server vs production build
  • What devDependencies are and why they matter
  • Introduction to Vite (why it’s faster than CRA/Webpack)



📅 Day 4 – JSX


  • What is JSX and why React uses it
  • JSX vs JavaScript
  • Rules of JSX (expressions, fragments, return, wrapping)
  • Common JSX gotchas



📅 Day 5 – Components


  • Function & class components (brief intro)
  • Component naming rules
  • Reusability & composition
  • Props vs hardcoded data



📅 Day 6 – useState (Part 1)


  • Introducing state in React
  • useState syntax & working
  • Initial state, updating state, async updates
  • Primitive vs object/array state



📅 Day 7 – useState and Props


  • Component communication
  • Passing data via props
  • Parent → child and child → parent state flow
  • State lifting patterns



📅 Day 8 – useEffect and useLayoutEffect


  • Why effects are needed
  • Side effects: API calls, listeners, timers
  • Dependency array rules
  • useLayoutEffect vs useEffect



📅 Day 9 – useRef and Custom Hooks


  • When to use refs (DOM access, storing mutable values)
  • useRef vs useState
  • Extracting logic into a custom hook
  • Creating reusable data + UI logic



📅 Day 10 – Context API, Provider, and Custom Hooks


  • Prop drilling problem
  • Creating and consuming context
  • Context Provider pattern
  • Using custom hooks to access context



📅 Day 11 – Component Communication


  • Parent → Child, Child → Parent, Sibling communication
  • Using callbacks for event bubbling
  • Using context vs props for communication
  • When to choose what



📅 Day 12 – Memoization (memo, useCallback, useMemo)


  • Why React re-renders
  • Preventing unnecessary re-renders
  • Using memo for component caching
  • useCallback vs useMemo difference & real use cases



📅 Day 13 – Lazy Loading, Code Splitting, Suspense


  • React.lazy & dynamic imports
  • Route-based vs component-based code splitting
  • Suspense boundaries
  • Performance benefits & bundle size reduction



📅 Day 14 – React Router


  • SPA navigation
  • Basic routing (Route, Link, BrowserRouter)
  • Dynamic routes, useParams, nested routes



₹499₹2,999