「react」タグのついた47記事

Button で学んだデザイントークン・cva・cn・Slot・型のパターンを、デザイントークン / プリミティブ / パターンの 3 階層からなる 1 つのデザインシステムとしてまとめる最終章。チーム運用のポイントと次のステップも紹介します。

shadcn/ui の cn 関数を構成する clsx と tailwind-merge の内部挙動を、実際の動作結果とともに掘り下げる章。falsy の除外、conflict group による競合解決、clsx → twMerge の順序の理由を学びます。

この章では、cva（class-variance-authority）によるスタイルバリアントの宣言的な管理について学びます。cva が内部で何をしているのか、競合解決を「やらないこと」まで理解します。

Reactを学ぶ前に、モダンJavaScript（ES6以降）の重要な機能を確認しましょう。これらの知識はReact開発で頻繁に使用します。

この章では、ReactのUIを記述するための構文であるJSXを学びます。

この章では、NestJSとPrismaを使用して、React SPAのためのバックエンドAPIを構築します。

この章では、Reactのフルスタックフレームワークである Next.js について学びます。

この章では、ReactのcreatePortalを使用したモーダルの実装について学びます。

この章では、コンポーネントにデータを渡すためのPropsについて学びます。

この章では、radix-ui の Slot と asChild パターンについて学びます。スタイルを保ったままレンダリングされる HTML 要素を差し替える「合成（composition）」の考え方を解説します。

この章では、ReactとTypeScriptを組み合わせた型安全なフロントエンド開発について学びます。

モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ全 30 章のガイド。JavaScript の前提から Hooks・状態管理・パフォーマンス・Next.js・フルスタック実装までステップを踏んで進められます。

この章では、ref を使って DOM 要素にアクセスする方法について学びます。React 19 で ref が通常の prop になった新しい書き方を本筋に、従来の forwardRef も押さえます。

React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。Button を題材に、デザイントークン・cva・cn・Radix Slot を通じて、デザインシステムに沿った再利用可能なコンポーネント設計を学ぶ全 13 章のガイド。

この章では、シングルページアプリケーション（SPA）における認証の設計と実装について学びます。

この章では、コンポーネントの状態を管理するStateについて学びます。

React 開発でデファクトとなった Tailwind CSS を React で実用するための章。セットアップと基本は別ガイドに任せ、本章は variants 設計・clsx / tailwind-merge / cn ユーティリティ・shadcn/ui との連携など React 統合特化のパターンを扱います。

Tailwind CSS のユーティリティファーストの考え方を、shadcn/ui Button の実クラス列を分解しながら学ぶ章。レイアウト・状態修飾子 (hover / focus-visible / disabled)・スペーシングスケール・デザイントークンの入り口を解説します。

この章では、shadcn/ui の Button を支える TypeScript の型について学びます。React.ComponentProps・VariantProps・交差型による props 定義と、React 19 で forwardRef のジェネリクスが不要になった理由を解説します。

この章では、コンポーネントツリー全体でデータを共有するための`useContext`フックについて学びます。

この章では、副作用（Side Effect）を扱う`useEffect`フックについて学びます。

この章では、複雑な状態ロジックを管理するための`useReducer`フックについて学びます。

この章では、DOMへの直接アクセスや値の保持に使用する`useRef`フックと、関連するAPIについて学びます。

Zod でスキーマを定義し、型推論・React Hook Form 連携・API レスポンスの実行時検証までを学びます。

この章では、Reactでのイベント処理について学びます。

この章では、ロジックを再利用可能な形で抽出するカスタムフックについて学びます。

この章では、Reactのクラスコンポーネントについて学びます。現在のReact開発では関数コンポーネントが主流ですが、既存のコードベースの理解やError Boundaryの実装のために知識が必要です。

本書は、モダンな React 開発を基礎から体系的に学ぶための入門書です。JavaScriptの基礎からReactの高度なトピックまで、実践的なスキルを段階的に身につけることができます。

この章では、Reactの基本単位であるコンポーネントについて学びます。

この章では、Reactにおけるスタイリング手法の全体像を把握し、各アプローチの特徴と使い分けを学びます。

この章では、サーバー状態管理のデファクトスタンダードである「TanStack Query」を学びます。

bg-primary の色がどこから来るのかを解説する章。デザイントークンの 2 階層（プリミティブ / セマンティック）、OKLCH カラー、Tailwind v4 の @theme inline によるトークン定義、ライト / ダークテーマの仕組みを学びます。

この章では、Reactアプリケーションのデバッグ手法とReact Developer Toolsの使い方を学びます。

この章では、Reactアプリケーションのパフォーマンスを最適化するための手法を学びます。

この章では、Reactでのフォームの扱い方を学びます。

この章では、これまで学んだすべての知識を統合し、React + NestJS + Prismaによるプロジェクト管理アプリ（Trelloライク）を構築します。

React・Tailwind CSS・shadcn/ui などフロントエンド開発に関するノートをまとめるドメインのハブ。UI 構築・スタイリング・コンポーネント設計を扱う。

この章では、React RouterによるSPAのルーティングを学びます。

本書で組み立てる shadcn/ui Button コンポーネントの完成形を先に確認する章。cva・cn・Radix Slot・デザイントークン・React 19 の ref など、使われている技術の全体像と基本的な使い方をつかみます。

この章では、これまで学んだ知識を活かして、実践的なタスク管理アプリを構築します。

素の button から始めて、Tailwind のデザイントークン・cva・cn・asChild (Slot)・TypeScript の型を 1 ステップずつ重ね、shadcn/ui 流の Button コンポーネントをゼロから完成させる実践演習。success バリアントやローディング状態の追加課題つき。

shadcn/ui の Button を題材にデザインシステム設計を学ぶガイドの導入章。本書の目的・対象読者・全 13 章の構成と、なぜ Button がコンポーネント設計の題材として最適なのかを説明します。

この章では、条件に応じたレンダリングと、配列データのリスト表示を学びます。

この章では、React 開発で人気の状態管理ライブラリ「Zustand」を学びます。

Vite + React 19 + TypeScript + Tailwind CSS v4 で shadcn/ui Button 学習用の開発環境を構築する章。cva・clsx・tailwind-merge・radix-ui の導入、cn 関数の作成、パスエイリアスの設定までを手順で解説します。

Button で学んだ cva・cn・Slot・デザイントークンのパターンを Badge・Input・Card・Alert に応用する章。コンポーネントごとのパターン選択ガイドと設計のベストプラクティスをまとめます。

この章では、Vite + React + TypeScriptの開発環境を構築します。