47 docs tagged with "react"

This book is an introduction to learning modern React development systematically from the ground up. From JavaScript basics to advanced React topics, you can build practical skills step by step.

A chapter that applies the cva, cn, Slot, and design-token patterns learned with Button to Badge, Input, Card, and Alert. We summarize a pattern-selection guide per component and design best practices.

In this chapter, you build a backend API for a React SPA using NestJS and Prisma.

In this chapter, you learn about React class components. Function components are the mainstream in modern React development, but you still need this knowledge to understand existing codebases and to implement Error Boundaries.

In this chapter, you learn about components, the basic unit of React.

In this chapter, you learn about rendering based on conditions and displaying array data as lists.

In this chapter, you learn about custom hooks, which extract logic in a reusable form.

In this chapter, you learn declarative management of style variants with cva (class-variance-authority). You understand what cva does internally, including what it "does not do" (conflict resolution).

In this chapter, you learn "TanStack Query," the de facto standard for server-state management.

In this chapter, you learn debugging techniques for React applications and how to use the React Developer Tools.

A chapter that explains where the color of bg-primary comes from. You learn the two layers of design tokens (primitive / semantic), OKLCH colors, token definitions with Tailwind v4's @theme inline, and how light / dark themes work.

Targets React 19 / Tailwind CSS v4 / the latest shadcn/ui. A 13-chapter guide that uses the Button to teach reusable component design aligned with a design system through design tokens, cva, cn, and Radix Slot.

In this chapter, you learn about designing and implementing authentication in a single-page application (SPA).

A chapter on building a development environment for learning the shadcn/ui Button with Vite + React 19 + TypeScript + Tailwind CSS v4. It walks through installing cva, clsx, tailwind-merge, and radix-ui, creating the cn function, and configuring path aliases.

In this chapter, you learn about event handling in React.

In this chapter, you learn how to handle forms in React.

In this chapter, you learn how to access DOM elements using ref. We focus on the new React 19 style where ref is a normal prop, and also cover the traditional forwardRef.

The final chapter that brings the design-token, cva, cn, Slot, and type patterns learned with Button into a single design system made of three layers (design tokens / primitives / patterns). It also introduces points for team operation and the next steps.

A hub for the domain that collects notes on frontend development, such as React, Tailwind CSS, and shadcn/ui. It covers UI construction, styling, and component design.

In this chapter, you integrate all the knowledge you have learned so far and build a project management app (Trello-like) with React + NestJS + Prisma.

A hands-on exercise that starts from a plain button and stacks Tailwind design tokens, cva, cn, asChild (Slot), and TypeScript types one step at a time to complete a shadcn/ui-style Button component from scratch. It includes bonus exercises for adding a success variant and a loading state.

A chapter that digs into the internal behavior of clsx and tailwind-merge, which make up the shadcn/ui cn function, along with actual results. You learn about excluding falsy values, conflict resolution via conflict groups, and why the order is clsx then twMerge.

In this chapter, you learn about Next.js, React's full-stack framework.

A 30-chapter guide that teaches modern React development (Vite + TypeScript + Tailwind CSS) systematically from the ground up. You can work through it step by step, from JavaScript prerequisites to Hooks, state management, performance, Next.js, and a full-stack implementation.

Before learning React, let's review the important features of modern JavaScript (ES6 and later). You use this knowledge frequently in React development.

In this chapter, you learn techniques for optimizing the performance of React applications.

In this chapter, you learn how to implement modals using React's createPortal.

In this chapter, you leverage the knowledge you have learned so far to build a practical task management app.

In this chapter, you learn about Props, the mechanism for passing data to components.

In this chapter, you learn about radix-ui's Slot and the asChild pattern. We explain the idea of "composition", which swaps the rendered HTML element while preserving the styling.

In this chapter, you learn type-safe frontend development that combines React and TypeScript.

In this chapter, you learn SPA routing with React Router.

Define schemas with Zod and learn type inference, React Hook Form integration, and runtime validation of API responses.

In this chapter, you set up the Vite + React + TypeScript development environment.

In this chapter, you learn about State, which manages a component's state.

In this chapter, you learn "Zustand," a popular state management library in React development.

In this chapter, you get an overview of styling approaches in React and learn the characteristics of each approach and how to choose between them.

A chapter for using Tailwind CSS, which has become the de facto standard in React development, practically in React. Setup and basics are left to a separate guide; this chapter covers patterns specific to React integration, such as variant design, the clsx / tailwind-merge / cn utilities, and integration with shadcn/ui.

A chapter that teaches the utility-first idea of Tailwind CSS by breaking down the actual class list of the shadcn/ui Button. It explains layout, state modifiers (hover / focus-visible / disabled), the spacing scale, and an entry point into design tokens.

A chapter that previews the finished form of the shadcn/ui Button component you build in this book. You grasp the big picture and basic usage of the techniques in play, such as cva, cn, Radix Slot, design tokens, and React 19's ref.

In this chapter, you learn JSX, the syntax for describing React's UI.

The introductory chapter of a guide that teaches design system design using the shadcn/ui Button. It explains the book's goal, who it is for, the structure of all 13 chapters, and why the Button is the ideal subject for component design.

In this chapter, you learn about the TypeScript types that power the shadcn/ui Button. We cover props definitions using React.ComponentProps, VariantProps, and intersection types, and why React 19 no longer needs forwardRef generics.

In this chapter, you learn about the `useContext` hook, used to share data across the entire component tree.

In this chapter, you learn about the `useEffect` hook, which handles side effects.

In this chapter, you learn about the `useReducer` hook, used to manage complex state logic.

In this chapter, you learn about the `useRef` hook, used for direct DOM access and holding values, and related APIs.