📆 2-Week JavaScript Learning Plan for React.
js
🕒 Time Required: 2–3 hours/day
📅 Week 1: JavaScript Core Foundations
Day 1: JS Basics + Variables + Data Types
● Difference between var, let, and const
● Primitive types: string, number, boolean, undefined, null
● Dynamic typing
● typeof operator
🔗 Practice: Write a calculator using basic variables.
Day 2: Operators + Control Flow
● Arithmetic, assignment, comparison, and logical operators
● if, else if, else, switch statements
● Ternary operator (condition ? true : false)
🔗 Practice: Build a simple grading system (if-else based).
Day 3: Loops and Iteration
● for, while, do...while
● for...in, for...of
● Break & continue
🔗 Practice: FizzBuzz, reverse a string, find even/odd numbers in a list.
Day 4: Functions (Normal + Arrow)
● Function declaration vs expression
● Parameters, return values
● Arrow functions
● Higher-order functions
🔗 Practice: Create a custom function that filters even numbers from an array.
Day 5: Arrays and Array Methods
● CRUD on arrays
● .map(), .filter(), .reduce(), .find(), .some(), .every()
🔗 Practice: Build a to-do list array and implement filter and map logic.
Day 6: Objects and Destructuring
● Object creation, nested objects
● Accessing and modifying properties
● Object destructuring
● Array destructuring
🔗 Practice: Create a user profile object and display data using destructuring.
Day 7: Revision + Mini Project
● Review all topics from Days 1–6
● Mini Project: User Profile Dashboard
○ Input user data
○ Display summary using functions and destructuring
📅 Week 2: ES6+, Asynchronous JS & DOM Basics
Day 8: ES6 Features (Part 1)
● Template literals
● Default parameters
● Spread/rest operators
● Short syntax in objects
🔗 Practice: Write reusable functions with default/rest/spread usage.
Day 9: ES6 Features (Part 2)
● Destructuring deeply
● Optional chaining ?.
● Nullish coalescing ??
🔗 Practice: Access nested user data safely.
Day 10: Scope, Hoisting & Closures
● Function scope vs block scope
● Lexical scope
● Hoisting of var, let, const, and functions
● Closures and practical use
🔗 Practice: Counter with closures
Day 11: this Keyword + Arrow Function Context
● Global vs local this
● Arrow function binding
● Use inside object methods
🔗 Practice: Build an object with a method that uses this.
Day 12: Asynchronous JavaScript
● Callback functions
● Promises
● async/await
● fetch() basic usage
🔗 Practice: Fetch users from an API and display their names.
Day 13: DOM Basics
● Selecting elements: querySelector, getElementById
● Handling events
● Changing content/style dynamically
🔗 Practice: Create a simple counter app (buttons + display using DOM)
Day 14: Recap + Mini Project
● Review all topics
● Mini Project: To-Do List App with DOM
○ Add, delete, and filter tasks
○ Store data in memory (no backend)
📆 React.js Learning Plan (4 Weeks)
Time Needed: 2–3 hours/day
✅ Week 1: React Fundamentals
Day 1: Introduction to React
● What is React?
● Setting up with Create React App
● Folder structure overview
● Writing your first component
🔗 Practice: Create a “Hello World” app
Day 2: JSX and Rendering
● Understanding JSX syntax
● Embedding expressions in JSX
● Rendering elements conditionally
🔗 Practice: Create a user card with dynamic content
Day 3: Functional Components & Props
● Writing functional components
● Passing data using props
● Props destructuring
🔗 Practice: Create a ProfileCard component using props
Day 4: State & useState Hook
● What is state?
● Using useState to manage local state
● Updating state based on user input
🔗 Practice: Build a like button or counter
Day 5: Handling Events
● React event system
● Handling button clicks and form inputs
● Synthetic events
🔗 Practice: Build a toggle switch component
Day 6: Conditional Rendering
● if/else logic in JSX
● Ternary operators
● Logical AND (&&) expressions
🔗 Practice: Show/hide a message based on button click
Day 7: Project Day – Mini Project
🎯 Build: Simple Feedback App
● Collect feedback and show a count
● Use useState for managing responses
✅ Week 2: Intermediate Concepts
Day 8: Lists and Keys
● Rendering lists with .map()
● Assigning unique keys
● Conditional lists
🔗 Practice: Build a task list (without delete yet)
Day 9: Forms and Controlled Components
● Controlled vs uncontrolled inputs
● Handling forms and validation
● Submitting form data
🔗 Practice: Create a contact form
Day 10: useEffect Hook
● What is useEffect and why use it?
● Running effects on mount and update
● Cleanup functions
🔗 Practice: Log window size or current time
Day 11: Lifting State Up
● Sharing state between components
● Props drilling basics
🔗 Practice: Create a parent component that manages a child’s state
Day 12: Basic Routing with React Router
● Installing and using React Router
● Routes, Route, and Link
● Route parameters
🔗 Practice: Build a simple blog with dynamic post pages
Day 13: Styling in React
● Inline styles vs CSS files vs CSS Modules
● Using Tailwind or Styled Components (optional)
🔗 Practice: Style your contact form from Day 9
Day 14: Project Day – Mini Project
🎯 Build: User Directory
● Fetch users from API
● Display profiles, handle loading/error
● Navigate to detail view using React Router
✅ Week 3: Advanced Concepts
Day 15: Context API
● Avoiding prop drilling
● Creating and using context
● useContext hook
🔗 Practice: Theme toggler with Context
Day 16: Custom Hooks
● Why use custom hooks?
● Creating your first custom hook
🔗 Practice: Build a useWindowWidth hook
Day 17: Performance Optimization
● React.memo
● useMemo and useCallback
● Avoiding unnecessary renders
🔗 Practice: Optimize a component with heavy calculation
Day 18: React Forms with Validation Libraries
● Formik + Yup or React Hook Form
● Managing complex forms with validation
🔗 Practice: Create a multi-step registration form
Day 19: Working with APIs
● Fetching data using fetch or Axios
● Async/await in useEffect
● Handling loading and errors
🔗 Practice: Build a weather search app
Day 20: Error Boundaries & Fallbacks
● Using componentDidCatch (class-based)
● Fallback UI with Suspense or custom components
🔗 Practice: Create a fallback wrapper for your components
Day 21: Project Day – Intermediate Project
🎯 Build: Task Manager App
● Add/edit/delete tasks
● Persist with localStorage or mock API
● Filter and categorize tasks
✅ Week 4: Final Projects & Deployment
Day 22: Animations with Framer Motion
● Basic animation
● Animate on mount/unmount
🔗 Practice: Animate list or modal component
Day 23: Reusable Components & Best Practices
● Component organization
● Folder structure
● Reusability and separation of concerns
Day 24: Testing Basics
● Intro to React Testing Library
● Writing simple tests for components
Day 25: Build Tools & Environment Variables
● Understanding React build process
● Setting up .env variables
● Debugging tips
Day 26: Hosting & Deployment
● Building for production
● Deploy on Vercel/Netlify
● Configure custom domains
