_Index

Preact Introduction and Installation — Lightweight React Alternative

Learn Preact: understand the 3kB React-compatible framework, install it, create a project, and explore the core concepts.

Preact JSX and Rendering — Components in 3kB

Learn how Preact handles JSX compilation, component rendering, and DOM updates with a minimal virtual DOM diffing algorithm.

Preact Components — Building Reusable UI With 3kB Footprint

Learn how to create functional and class components in Preact, compose them together, and manage component trees efficiently.

Preact Props and State — Managing Data in Preact Components

Learn how Preact manages data flow through props and state, with comparisons to React's model and Preact-specific considerations.

Preact Event Handling — Capturing User Interactions in 3kB

Learn how Preact handles DOM events, synthetic vs native events, event delegation, and custom event patterns for user interactions.

Preact Lifecycle Methods — Component Lifecycle in 3kB

Learn Preact class component lifecycle methods, their React equivalents, and Preact-specific differences in mounting, updating, and unmounting.

Preact Hooks Overview — useState, useEffect and More in 3kB

Learn Preact's hooks API: useState for state management, useEffect for side effects, and how Preact's hooks differ from React hooks.

Preact Advanced Hooks — useReducer, useRef, useMemo, useCallback Deep Dive

Learn advanced Preact hooks: useReducer for complex state, useRef for DOM access, useMemo for memoization, and useCallback for stable functions.

Preact Signals — Reactive State Management with @preact/signals

Learn Preact Signals: the reactive state primitive from @preact/signals that enables fine-grained reactivity without virtual DOM overhead.

Preact Computed Values and Effects — Advanced Signal Patterns

Learn advanced @preact/signals patterns: computed lazy evaluation, effect cleanup, batching, and integrating signals with external systems.

Preact Context — Sharing State Across the Component Tree

Learn Preact Context API to share state across components without prop drilling, using createContext and useContext in the 3kB framework.

Preact Refs and DOM Access — Direct Element Manipulation in 3kB

Learn how to use refs in Preact for direct DOM access, integrating with third-party libraries, managing focus, and measuring elements.

Preact Portals — Rendering Outside the Parent DOM Tree

Learn how to use portals in Preact to render components outside the parent DOM hierarchy for modals, tooltips, and overlays.

Preact Compatibility Layer — Using React Libraries with preact/compat

Learn how to use preact/compat to run React libraries and third-party components in Preact applications seamlessly.

Preact Routing — Client-Side Navigation with preact-router

Learn how to implement client-side routing in Preact using preact-router for single-page application navigation.

Preact Forms — Input Handling, Validation, and Submission

Learn how to handle forms in Preact: controlled inputs, validation patterns, form submission, and building reusable form components.

Preact Debugging and DevTools — Profiling 3kB Applications

Learn how to debug Preact applications using Preact DevTools, browser tools, and performance profiling techniques.

Preact Size Optimization — Minimizing 3kB Bundle Further

Learn how to optimize Preact bundle size: tree shaking, code splitting, lazy loading, and measuring bundle impact.

Preact Testing — Unit and Integration Tests for Preact Components

Learn how to test Preact components using preact-testing-library, vitest, and best practices for component testing.

Preact Mini Project — Build a Complete Preact Application

Build a complete Preact application from scratch: a task management dashboard combining components, hooks, signals, routing, and forms.