Chapters

← Back to Subjects

React JS - Chapters

React Fundamentals

React Overview & Features

React vs Traditional DOM

Setting Up Environment

React Folder Structure & Entry Point

Rendering Elements in React

Virtual DOM & Reconciliation

React.StrictMode and Warnings

Unmounting Components

JSX (JavaScript XML)

JSX Syntax & Rules

Embedding Expressions in JSX

JSX Attributes & className

JSX Nesting & Parent Wrapping Rules

Conditional Rendering in React

React Fragments

Escaping and Sanitization in React JSX

React Components

Component Definition

Component Composition

Default and Named Exports

Props and Props Validation

Default Props in React

Children (props.children)

State in Function Components

State in Class Components

Controlled vs Uncontrolled Components

Re-render Triggers

React Component Lifecycle

Pure Components and React.PureComponent

Props & State Deep Dive

Passing Data with Props

Destructuring Props in React

State Initialization in React

Updating State Safely

Lifting State Up in React

State Immutability in React

React 18 State Batching

React Event Handling

Handling Events in React

Synthetic Events in React

Passing Arguments to Event Handlers

PreventDefault & StopPropagation

Inline vs Handler Functions

Conditional Rendering

If-Else Rendering

Short-circuit Rendering

React Ternary Operator

Return Null Pattern in React

Conditional Components

React Lists & Keys

Rendering Lists with map()

Using Keys in React

Dynamic Lists and Filtering

Forms Handling in React

Controlled Components in React

Uncontrolled Components with useRef

Handling Input, Textarea & Select in React

Checkbox and Radio Buttons in React

Multiple Input Fields

Form Submission in React

Validation Basics

Reset & Clear Functions in React Forms

Styling in React

Inline CSS in React

External CSS Files in React

Conditional Class Names

Dynamic Styles with State

Introduction & Rules of React Hooks

React useState() Hook

useEffect() Hook

useContext() Hook

React useRef() Hook

React useMemo() Hook

React useLayoutEffect() Hook

useImperativeHandle() Hook

Custom Hooks in React

Hook Dependency Arrays

React Context API

Creating Context

Context: Provider & Consumer

useContext() Hook

React Context Default Values

Nested Contexts

Avoiding Prop Drilling

Advanced React Concepts

React Fragments

Error Boundaries

Higher-Order Components

Render Props Pattern

Forwarding Refs in React

Refs & DOM Manipulation

Controlled vs Uncontrolled Inputs

React Memoization

React Strict Mode

React Keys & Re-renders

React Router — Installation & Setup

BrowserRouter, Routes & Route

React Router: Link, NavLink & Active Links

useNavigate, useLocation & useParams

Route Parameters

404 – Not Found Routes

React Router Redirects

Protected Routes

Lazy Loading Routes

React Suspense & Lazy Loading

Suspense and Fallback

Suspense for Data Fetching

Loading States and Fallback UI

Performance Optimization

Rendering Performance Concepts

useMemo() and useCallback()

Avoiding Unnecessary Re-renders

Virtualization Concepts

React Profiler Tool

React 18+ Features

Automatic Batching

Concurrent Rendering

Transitions (useTransition)

Deferred Values (useDeferredValue)

Suspense for Data

Streaming Server Rendering

React Miscellaneous & Utilities

React StrictMode

Default Exports vs Named Exports

Hydration & Client Rendering

createRoot() vs render()

Unmounting Components

React DevTools Usage

Accessibility (ARIA Roles in React)

Internationalization Basics

Internationalization Basics