Laravel + React で Shadcn/ui をインストール❤️

現在、Bootstrap、Bulma、Semantic UI などの CSS フレームワークがたくさんあります。これにより、ディスプレイ (ユーザー インターフェイス) の構築が高速化されます。今流行の CSS ツールの 1 つが Shadcn/ui です。以前は何でしたか?

公式ウェブサイト Shadcn/ui には次のように記載されています

「コピーしてアプリに貼り付けることができる再利用可能なコンポーネントのコレクション」

つまり、shadcn/ui は、TailwindCSS と RadixUI を使用して構築された、ビュー内の再利用可能なコンポーネントのコレクションです。現在、Next.js、Laravel などのいくつかのフレームワークをサポートしています。公式ウェブサイト Shadcn/ui でご覧いただけます。

サポートされている多くのフレームワークのうち。私たちの主な目標は、Laravel Breeze を使用して、Laravel React に Shadcn/ui をインストールする方法です。

最初のステップ: laravel プロジェクトをインストールします。

laravel new laravel-shadcn

ここでは、Laravel インストーラー (グローバル) を使用します。次の段階では、下の画像のようにオプションを選択するように求められます

プロジェクトのニーズに応じて入力してください。その場合は、インストールが完了するまで待ちます。インストール速度はインターネット接続によって異なります。

Laravel プロジェクトのインストールが完了しました。 OK 続けてください!

2 番目のステップ: Laravel プロジェクトに Shadcn/ui をインストールする

まだ同じターミナル内にあります。まず、以下のコマンドを入力します:

cd laravel-shadcn
npx shadcn-ui@latest init

その場合、リクエストが表示されるので、必要に応じて入力します。次の例のように。

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

typescript ユーザーの場合は、「はい」、「OK」、「次へ」を選択できます。 vscode に移動するか、お気に入りのコード エディターに移動します。ここでは vscode を使用し、次のコマンドを使用します

cd laravel-shadcn

code .

laravel プロジェクトだけでなく、vscode も自動的に開きます。その場合、次のステップは、resource/css/app.css フォルダー内の app.css ファイルを開いて、shadcnui が Laravel プロジェクトに正常にインストールされていることを確認することです。

上の図では、shadcn が Laravel プロジェクトに正常にインストールされています。

説明:

• Shadcn は app.css ファイルを自動的に更新します
• ボタン、アラート、テーブルなどのコンポーネントが必要な場合。次に、laravel プロジェクトのルートターミナル経由でインストールする必要があります。 (インターネット接続が必要です)
• 必要なコンポーネントはすべて、ShadcnUI の公式 Web サイトで確認できます。
• コンポーネントのインストールが完了すると、resources/js/Components/ui/Button.jsx フォルダーに新しいファイルが自動的に生成されます。必要に応じてこのファイルを変更することもできます。

3 番目のステップ: Shadcn がインストールされていることを確認します
ShadcnUI がインストールされていることを確認するには、ターミナルでコマンドを実行します。つまり、たとえば、ボタン コンポーネントをインストールします。コマンドは次のとおりです: npx shadcn-ui@latest 追加ボタンは下の画像に表示されます

次に、Welcome.jsx ファイルを開いて、以下の画像のように操作します。

そうであれば。同じディレクトリ、つまりlaravel-shadcn

ターミナル 1

npm run dev

第2ターミナル

php artisan serve

ブラウザで開くと、ボタンコンポーネントが表示されます。デフォルトは濃い色です。

以上がLaravel + React で Shadcn/ui をインストール❤️の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。