PART 1: JavaScript (ES6+) for React

 1. JavaScript Basics

• Variables: var, let, const

• Data Types: String, Number, Boolean, Null, Undefined, Symbol

• Type Coercion & Type Conversion

• Operators: Arithmetic, Comparison, Logical

• Control Flow:

  • if, else, switch

  • for, while, do-while, break, continue

• Functions:

  • Declaration, Expression, Arrow Functions

  • Parameters vs Arguments

  • Callback functions

 2. Working with Data

• Arrays: push, pop, map, filter, reduce, forEach, find

• Objects: keys, values, accessing nested data

• Destructuring (Array & Object)

• Spread and Rest operators

 3. DOM Manipulation (for understanding)

• document.getElementById, querySelector, etc.

• Adding/removing/changing HTML elements dynamically

• Event handling: click, input, submit, etc.

 4. Modern JavaScript (ES6+)

• Template Literals

• Arrow Functions

• let vs const vs var

• Modules: import, export

• Object Literals & Shorthand

• Optional Chaining ?., Nullish Coalescing ??

• Ternary Operator

• Short-circuiting

 5. Async JavaScript

• setTimeout, setInterval

• Promises: .then(), .catch()

• async/await

• fetch() for API calls

• Error handling

 PART 2: React.js

 1. React Basics

• What is React?

• JSX Syntax

• Functional vs Class Components (focus on Functional)

• React App Structure

• create-react-app or Vite setup

 2. Core Concepts

• Components: Props & Children

• State: useState hook

• Event Handling in JSX

• Conditional Rendering (if, &&, ternary)

• List Rendering using .map()

• Keys in lists

 3. React Hooks

• useState – manage state

• useEffect – side effects & lifecycle

• useRef – DOM access, persistent values

• useContext – global state sharing

• (Later) useReducer, useMemo, useCallback

 4. Handling APIs in React

• Making API calls with fetch() or axios

• Loading, Error, and Success states

• useEffect + async calls

 5. Routing

• React Router:

  • BrowserRouter, Routes, Route

  • Link, useNavigate, useParams

  • 404 Not Found Route

  • Nested Routes

 6. Forms & Input Handling

• Controlled vs Uncontrolled components

• useState for form fields

• onChange, onSubmit

• Form validation basics

 7. Component Communication

• Props drilling

• Lifting State Up

• Using Context API for global state

 8. Styling in React

• CSS modules

• Inline styles

• Styled-components or Tailwind CSS (optional)

• ClassName binding

 9. Testing (Basic intro)

• React Testing Library (RTL) basics

• Unit vs Integration testing

• Snapshot testing

 10. Project Structure & Best Practices

• Folder structure

• Reusable components

• Clean code & naming

• Environment variables

 11. Build & Deploy

• Build React app using npm run build

• Hosting on:

  • Vercel

  • Netlify

  • GitHub Pages

Advanced Topics 

• useReducer hook

• useMemo & useCallback for performance

• Custom Hooks

• React Query / TanStack Query (for data fetching)

• Redux Toolkit (for global state)

• Next.js (React Framework)

Sample Mini Projects

Build these to solidify concepts:

1. Todo App

2. Weather App (with OpenWeather API)

3. Blog Post Viewer

4. Image Search App (Unsplash API)

5. React Form with Validation

6. CRUD app with backend (JSON Server or FastAPI)