Améliorez vos applications React avec les utilitaires et composants ShadCn —

Dans cet article, nous expliquerons comment intégrer ShadCn dans les applications React. Apprenez à mettre en place un nouveau projet React, à installer et configurer ShadCn et à tirer le meilleur parti de ses fonctionnalités. Que vous soyez débutant ou développeur expérimenté, découvrez des informations pour rationaliser votre développement avec ShadCn dans une application React.

Vous pouvez consulter le code source complet sur GitHub.

Qu’est-ce que ShadCn ?

ShadCn est une bibliothèque polyvalente qui fournit une large gamme d’utilitaires et de composants pour améliorer vos applications React. Il est conçu pour simplifier le processus de développement, améliorer l’efficacité des applications et créer une expérience plus conviviale. ShadCn est construit sur CSS vent arrière et Radix UIpermettant une grande personnalisation et une intégration transparente avec l’approche utilitaire d’abord de Tailwind.

Conditions préalables à l’installation de ShadCn

Avant de commencer l’installation de ShadCn, assurez-vous d’un environnement bien préparé. Avoir une compréhension fondamentale de Javascript et Réagir.jsavec Noeud.js installé sur votre machine. La familiarité avec CSS et HTML est bénéfique pour une utilisation efficace de ShadCn. Puisque ShadCn s’intègre à Tailwind CSS, une compréhension de base de Vent arrière sera également utile.

Configuration d’une nouvelle application React

Pour lancer votre projet, commencez par configurer une nouvelle application React. Pour cela, exécutez la commande suivante sur votre terminal :

npm create vite@latest

Nommez ensuite le projet et sélectionnez votre langage (de préférence TypeScript, car ShadCn fonctionne immédiatement avec TypeScript).

Ensuite, déplacez-vous dans le dossier de votre projet et exécutez la commande d’installation :

npm install

Enfin, démarrez votre serveur de développement en exécutant la commande :

npm run dev

Configuration du CSS Tailwind

Pour personnaliser les composants ShadCn, vous devrez installer et configurer Tailwind CSS. Tailwind est un framework CSS axé sur les utilitaires qui fonctionne de manière transparente avec ShadCn, vous permettant de modifier et de styliser facilement les composants pour les adapter aux exigences de votre projet. Pour installer Tailwind, exécutez la commande :

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

Collez ensuite ce qui suit dans votre index.css déposer:

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

Après cela, rendez-vous à votre tsconfig.json fichier et modifiez les chemins:

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

En ajoutant le baseUrl et paths sections sous compilerOptionsle modifié tsconfig.json Le fichier permet la résolution du chemin pour les importations commençant par @/qui correspond au ./src/ répertoire dans votre projet.

Enfin, installez des nœuds dans votre projet, pour éviter les erreurs de chemin :

npm i -D @types/node

Modifiez ensuite votre vite.config.ts:

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

Mise à jour du vite.config.ts avec la configuration de résolution de chemin garantit que votre application peut résoudre les chemins correctement, vous permettant d’importer des modules à l’aide des alias définis. Cette étape est importante pour une expérience de développement fluide et pour éviter toute erreur d’importation liée à la résolution du chemin.

Installation et configuration de ShadCn

Une fois votre application React configurée, il est temps d’installer ShadCn. Vous pouvez le faire en utilisant npm avec la commande suivante :

npx shadcn-ui@latest init

L’invite affiche quelques options parmi lesquelles vous pouvez choisir.

Utiliser ShadCn dans votre application React

Après l’installation et la configuration réussies de ShadCn, vous pouvez maintenant commencer à l’utiliser dans votre application React. À titre d’exemple, utilisons le composant hover-card. Rendez-vous au Documents Shadcn et récupérez l’invite pour la carte de survol :

npx shadcn-ui@latest add hover-card

Importez-le ensuite dans votre application et utilisez-le :

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

export default function App() {
  return (
    <div className="flex justify-center  items-center h-screen">
      <HoverCard>
        <HoverCardTrigger>First Shadcn Component</HoverCardTrigger>
        <HoverCardContent>My first of many components</HoverCardContent>
      </HoverCard>
    </div>
  );
}

Cela donne le résultat indiqué ci-dessous.

Modification d’un composant Shadcn

Pour modifier un composant ShadCn, vous pouvez exploiter la puissance de Tailwind CSS pour personnaliser son apparence et son comportement. Par exemple, vous pouvez utiliser Tailwind pour modifier l’apparence du composant hover-card en passant des styles via la prop classname :

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

Cela fait apparaître le composant comme indiqué ci-dessous.

Conclusion

L’intégration de ShadCn dans vos applications React ne doit pas nécessairement être un processus compliqué. Avec une compréhension claire des prérequis, une application React fonctionnelle et la bonne configuration, vous êtes sur la bonne voie. La grande variété d’utilitaires et de composants de ShadCn en fait un excellent outil pour améliorer vos applications React, simplifier le processus de développement et rendre vos applications plus efficaces et conviviales.