React

Bolt.new

Bolt.new is a browser-based AI app builder from StackBlitz that generates, runs, and edits full-stack web applications entirely in the browser using WebContain…

TypeScript

TypeScript is a typed superset of JavaScript, developed and maintained by Microsoft, that adds optional static typing and compiles down to plain JavaScript tha…

HTML

HTML (HyperText Markup Language) is the standard markup language for structuring content on the web. It uses a system of nested elements and tags to define tex…

React

React is a declarative, component-based JavaScript library created by Meta for building interactive user interfaces, using a virtual DOM to efficiently update…

Next.js

Next.js is a React framework for building production web applications, adding server-side rendering, static site generation, routing, and API endpoints on top…

Angular

Angular is a TypeScript-based, component-driven web application framework developed and maintained by Google, providing a full-featured platform for building l…

Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces, designed with a gentle learning curve and the flexibility to be adopted incrementall…

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 engine that lets JavaScript run outside the browser, enabling scalable, event-driven server-side applicati…

GraphQL

GraphQL is a query language and runtime for APIs that lets clients request exactly the data they need, in a single request, rather than relying on fixed endpoi…

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a large set of low-level, single-purpose utility classes for building custom user interfaces direct…

Bootstrap

Bootstrap is a popular open-source CSS framework that provides a responsive grid system, prebuilt UI components, and utility classes for building mobile-first…

Adobe Dreamweaver

Adobe Dreamweaver is a web-design and development application that combines a visual (WYSIWYG) editor with direct code editing for HTML, CSS, and JavaScript, a…

Webpack

Webpack is an open-source static module bundler for JavaScript applications that traces a project's dependency graph and packages modules and their assets into…

WooCommerce

WooCommerce is a free, open-source e-commerce plugin for WordPress that turns a WordPress site into a fully functional online store with product catalogs, cart…

WordPress

WordPress is an open-source content management system (CMS) that powers a large share of websites worldwide, letting users create and manage websites, blogs, a…

XState

XState is a JavaScript and TypeScript library for creating, interpreting, and visualizing state machines and statecharts, providing a robust model for managing…

Zod

Zod is a TypeScript-first schema declaration and validation library that lets developers define a schema once and use it for both runtime validation and static…

Chakra UI

Chakra UI is an accessible, modular component library for React that provides a set of pre-built, themeable UI building blocks and a composable style-prop syst…

Clerk

Clerk is a developer-first authentication and user management platform that provides pre-built, embeddable UI components and APIs for sign-up, sign-in, user pr…

CodeSandbox

CodeSandbox is a cloud-based development environment for rapidly prototyping, sharing, and collaborating on code directly in the browser, with ready-made templ…

Convex

Convex is a reactive backend-as-a-service platform that combines a real-time database, serverless functions, and file storage into a single TypeScript-native b…

Hasura

Hasura is an open-source engine that instantly generates a GraphQL and REST API over new or existing databases, letting developers query and mutate data withou…

Jest

Jest is a JavaScript testing framework, originally built by Meta, focused on simplicity and zero-configuration setup, widely used for testing React and Node.js…

JSON Server

JSON Server is a zero-configuration tool that spins up a full REST API from a single JSON file, making it a fast way to mock a backend during frontend prototyp…

Testing React Components with React Testing Library

Learn how to test React components the way a user experiences them, using render, screen queries, userEvent, and async assertions.

Socket.IO with React

Integrate Socket.IO cleanly into React using a context provider, custom hooks, and correct connection lifecycle management.

What Is Next.js?

An introduction to Next.js, the React framework for production that adds routing, rendering strategies, and full-stack capabilities on top of React.

Class Components in React

Learn the legacy class-based approach to building React components, including lifecycle methods and state.

Code Splitting and Lazy Loading

Reduce initial bundle size in React apps using React.lazy and Suspense to load components on demand.

Common React Pitfalls

Frequent React mistakes — direct state mutation, bad dependency arrays, index keys, and more — with fixes.

Component Composition in React

Learn how to build complex UIs by combining small, reusable components using composition patterns.

Conditional Rendering in React

Learn the common patterns for showing or hiding UI elements based on conditions in React components.

Context API for State Management

Learn how React's built-in Context API lets you share state across components without prop drilling.

Controlled vs Uncontrolled Components

Compare controlled components, where React state drives form values, with uncontrolled components that rely on the DOM and refs.

Custom Hooks in React

Learn how to extract reusable stateful logic into your own custom hooks that follow the rules of hooks.

Dynamic Routing in React

Use URL parameters and the useParams and useNavigate hooks to build dynamic, data-driven routes in React Router.

Error Boundaries in React

Catch JavaScript errors in a component tree using class-based error boundaries and display a fallback UI instead of crashing.

Event Handling in React

Learn how React wraps native DOM events into SyntheticEvents and how to attach handlers to elements.

Form Validation in React

Implement client-side validation logic for React forms, including error state and submit-time checks.

Forms in React

Understand controlled and uncontrolled form inputs and how to manage form state in React.

Functional Components in React

Understand how to define and use functional components, the modern default building block of React apps.

History and Evolution of React

A look at how React was created at Facebook, its major milestones, and how it evolved into the modern hooks-based library it is today.

Introduction to React

A beginner-friendly overview of what React is, why it exists, and how it lets you build UIs from reusable components.

Introduction to React Hooks

Learn what React Hooks are, why they were introduced in React 16.8, and how they let function components use state and lifecycle features.

JSX Syntax and Expressions

Learn how JSX blends HTML-like markup with JavaScript to describe React UI declaratively.

Lifting State Up in React

Learn the pattern of moving shared state to the closest common ancestor so sibling components can stay in sync.

Lists and Keys in React

Learn how to render lists of elements in React and why stable, unique keys are essential for correct updates.

Nested Routes and Layouts

Build shared layouts and nested UI in React Router v6 using nested Route definitions and the Outlet component.

Build a To-Do List App in React

A comprehensive guide to build a to-do list app in react — written for learners at every level.

Project: Build a Full-Stack To-Do App with React, Node.js and MongoDB

A full-stack to-do app is the perfect first MERN project — it covers every concept you'll use in production: REST APIs, database CRUD operations, JWT authentic…

React Hooks Explained: useState, useEffect, and Beyond

React Hooks replaced class components and changed how React developers think about state and side effects. This guide explains useState, useEffect, useContext,…

Learn React Through Game Development: Build a Chess Clock

A chess clock is the perfect React project — it's small enough to finish in an afternoon but teaches useState, useEffect, timer management, and conditional ren…

Learn React Through Building a Gaming Leaderboard

Gaming leaderboards are the perfect React learning project: they need real-time state updates, list rendering, sorting, filtering, forms, and optional API fetc…

React Cheat Sheet

React hooks, components, lifecycle methods, and common patterns.

Internationalization (i18n) Cheat Sheet

Covers locale handling, the Intl API, react-i18next setup, ICU pluralization syntax, and RTL/logical-CSS techniques for internationalized web apps.

Redux Toolkit Cheat Sheet

Covers Redux Toolkit's configureStore, createSlice reducers, createAsyncThunk for async logic, React-Redux hooks, and RTK Query data fetching.

What Is the Virtual DOM?

The virtual DOM is an in-memory, lightweight JavaScript representation of the real DOM that frameworks like React use to compute the minimal set of changes nee…

What Is Memoization in JavaScript?

Memoization is an optimization technique that caches the return value of an expensive, pure function keyed by its input arguments, so that calling the function…

How Does React Reconciliation Work?

Reconciliation is React’s algorithm for comparing a newly rendered element tree against the previous one and computing the minimal set of DOM mutations needed…

Why Does React Need Keys for List Items?

React needs a stable, unique `key` on list items so its reconciliation algorithm can tell which item in the new render corresponds to which item in the previou…

What Is Prop Drilling and How Do You Avoid It?

Prop drilling is passing a piece of data through several intermediate components via props purely so a deeply nested child can read it, even though those inter…

What Is React Fiber Architecture?

React Fiber is React’s internal reconciliation engine, introduced in React 16, that represents each component instance as a lightweight linked-list node so ren…

What Is Hydration in React?

Hydration is the process where React attaches event listeners and internal state to server-rendered HTML that is already sitting in the browser, turning static…

What Is React Suspense and How Does It Work?

React Suspense is a component that lets you declaratively show a fallback UI, like a spinner, while its children are not yet ready to render because they are w…

What Are Error Boundaries in React?

An error boundary is a React component that catches JavaScript errors thrown anywhere in its child component tree during rendering, in lifecycle methods, or in…

What Are React Portals and When Do You Use Them?

A React portal lets a component render its children into a DOM node that lives outside the parent component tree in the actual document, while the component st…

What Are the Main State Management Patterns in Frontend Apps?

Frontend state management patterns fall into a spectrum from local component state, through lifted/shared state via props and context, to centralized global st…

What Are Code-Splitting Strategies and Why Do They Matter?

Code splitting breaks a single large JavaScript bundle into smaller chunks that load on demand — by route, by component, or by vendor library — so the browser…

What Is List Virtualization and Why Use It?

List virtualization (or windowing) is a rendering technique that keeps only the small subset of list items currently visible within the scroll viewport mounted…

What Are React Server Components?

React Server Components (RSC) are components that render exclusively on the server, ship zero JavaScript to the browser, and can read data or the filesystem di…

What Are the Basics of the Next.js App Router?

The Next.js App Router is a file-system-based routing convention built on the `app/` directory where folders define URL segments, `page.tsx` files make a segme…

What Is React Concurrent Rendering?

Concurrent rendering is a React capability, enabled by createRoot, that lets React prepare multiple versions of the UI at once, interrupt a low-priority render…

How Does React Strict Mode Change Component Behavior?

React Strict Mode is a development-only wrapper component that intentionally double-invokes component function bodies, state initializers, and effect setup/cle…

What Is forwardRef in React and When Do You Need It?

forwardRef is a React API that lets a component receive a ref passed to it by a parent and forward that ref down to one of its own inner DOM nodes or child com…

How Do React.lazy and Suspense Enable Code Splitting?

React.lazy() defers loading a component`s code until it is actually rendered, and Suspense lets a parent declare a fallback UI to show while that lazily-loaded…

How Do You Design a Good Custom React Hook?

A well-designed custom hook extracts reusable stateful logic — not UI — behind a function starting with “use”, returning a small, purposeful API (values and fu…

What Are Higher-Order Components (HOCs) in React?

A higher-order component is a function that takes a component as an argument and returns a new component with added behavior or props, letting you reuse cross-…

What Is the Render Props Pattern in React?

The render props pattern is a technique where a component accepts a function as a prop — often literally named `render`, or passed as `children` — and calls th…

What Is the Compound Components Pattern in React?

Compound components is a pattern where several components work together to form one cohesive UI unit — like `<Select>`, `<Select.Option>` — sharing implicit st…

Controlled Forms in React: Performance Tradeoffs?

Controlled form inputs store every field’s value in React state and re-render on each keystroke, which gives predictable, single-source-of-truth data but can c…