ShadCNユーティリティとコンポーネントを使用して、Reactアプリを強化します

このチュートリアルは、汎用性の高いReactコンポーネントライブラリであるShadcnをプロジェクトに統合することをガイドします。 初心者と経験豊富な開発者の両方に適したセットアップ、構成、カスタマイズをカバーします。完全なソースコードはGitHubで利用できます

shadcn

を理解しています Shadcnは、事前に構築されたコンポーネントとユーティリティの豊富なコレクションを提供し、反応開発を合理化します。 Tailwind CSSとRadix UIの上に構築され、Tailwindのユーティリティファーストアプローチとの高いカスタマイズ可能性とシームレスな統合を提供します。

前提条件開始する前に、node.jsがインストールされたJavaScriptとReact.jsをしっかりと把握していることを確認してください。 CSS、HTML、およびTailwind CSSに精通していることが有益です

新しいReactアプリケーションの作成

Vite：

を使用して新しいReactプロジェクトを作成することから始めます

プロジェクト名を選択し、TypeScriptを選択します（最適なShadCN互換性に推奨）。 プロジェクトの作成後、プロジェクトディレクトリに移動して実行してください：

<code class="language-bash">npm create vite@latest</code>

<code class="language-bash">npm install
npm run dev</code>

Tailwind css

の統合 Shadcnは、スタイリングのためにTailwind CSSをレバレッジします。使用してインストールしてください：

Tailwindディレクティブを：

にインポートします

<code class="language-bash">npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p</code>

：

でパスエイリアスを構成します index.css

ノードタイプをインストールし、更新

<code class="language-css">@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";</code>

：

tsconfig.json

<code class="language-json">/* Path resolution */
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}</code>

shadcn vite.config.ts

のインストールと構成

<code class="language-bash">npm i -D @types/node</code>

shadcn：

<code class="language-javascript">import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})</code>

をインストールします

インストールプロセス中に優先オプションを選択します。

ShadCNコンポーネントを使用して

<code class="language-bash">npx shadcn-ui@latest init</code>

例として

コンポーネントを使用しましょう。使用して追加します：

反応コンポーネントにインポートして使用します：

hover-card

<code class="language-bash">npx shadcn-ui@latest add hover-card</code>

Shadcnコンポーネントのカスタマイズ

<code class="language-javascript">import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

// ... your component ...</code>

Tailwind CSSクラスを使用して、ShadCNコンポーネントをカスタマイズします

結論

ShadcnをReactワークフローに統合するのは簡単です。 上記の手順を使用すると、その強力なコンポーネントとユーティリティを活用して、効率的でユーザーフレンドリーなアプリケーションを構築できます。 ShadCNドキュメントを探索し、事前に構築されたReactボイラープレートを使用して、より迅速に開始することを検討してください。

以上がShadCNユーティリティとコンポーネントを使用して、Reactアプリを強化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。