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:

npm create vite@latest

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:

npm install
npm run dev

Intégration de CSS de vent arrière

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Configurer les alias de chemin dans tsconfig.json:

/* Path resolution */
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

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

npm i -D @types/node

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"),
    },
  },
})

Installation et configuration de shadcn

Installez Shadcn:

npx shadcn-ui@latest init

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:

npx shadcn-ui@latest add hover-card

Importez et utilisez-le dans votre composant React:

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

// ... your component ...

Personnalisation des composants shadcn

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

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

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!