Améliorez vos applications React avec des utilitaires et composants Shadcn

Ce tutoriel vous guide à travers l'intégration de Shadcn, une bibliothèque de composants réagissables polyvalente, dans vos projets. Nous couvrirons la configuration, la configuration et la personnalisation, adaptées aux débutants et aux développeurs expérimentés. Le code source complet est disponible sur github.

Comprendre Shadcn

shadcn propose une riche collection de composants et utilitaires prédéfinis, rationalisant le développement de React. Construit sur CSS et UI Radix de Tailwind, il offre une personnalisation élevée et une intégration transparente avec l'approche utilitaire de Tailwind.

Prérequis

Avant de commencer, assurez-vous d'avoir une prise solide de JavaScript et React.js, avec Node.js installé. La familiarité avec CSS, HTML et CSS du vent arrière est bénéfique.

Création d'une nouvelle application React

Commencez par créer un nouveau projet React à l'aide de Vite:

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

Choisissez un nom de projet et sélectionnez TypeScript (recommandé pour une compatibilité OBSHCN optimale). Après la création du projet, accédez au répertoire du projet et exécutez:

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

Intégration de CSS de vent arrière

shadcn exploite le vent arrière CSS pour le style. L'installez en utilisant:

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

Importez des directives de vent arrière dans votre index.css:

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

Configurer les alias de chemin dans tsconfig.json:

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

Installez les types de nœuds et mettez à jour vite.config.ts:

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

<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>

Installation et configuration de shadcn

Installez Shadcn:

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

Sélectionnez vos options préférées pendant le processus d'installation.

en utilisant des composants shadcn

Utilisons le composant hover-card comme exemple. Ajoutez-le en utilisant:

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

Importez et utilisez-le dans votre composant React:

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

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

Personnalisation des composants shadcn

Utilisez des classes CSS de vent arrière pour personnaliser les composants shadcn:

<code class="language-javascript"><hovercard>
  <hovercardtrigger classname="rounded-xl text-white py-2 px-4 bg-slate-500">First Shadcn Component</hovercardtrigger>
  <hovercardcontent classname="font-bold text-slate-500 w-max">My first of many components</hovercardcontent>
</hovercard></code>

Conclusion

L'intégration de Shadcn dans votre flux de travail React est simple. Avec les étapes décrites ci-dessus, vous pouvez tirer parti de ses puissants composants et utilitaires pour créer des applications efficaces et conviviales. Explorez la documentation Shadcn et envisagez d'utiliser des plaques de chaudières React prédéfinies pour un démarrage plus rapide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!