Construire des interfaces utilisateur modernes et élégantes est l'un des principaux objectifs des développeurs front-end, et avec l'essor des bibliothèques de composants, cette tâche est devenue encore plus facile. Aujourd'hui, je vais vous présenter Shadcn/UI, une bibliothèque de composants puissante et personnalisable pour React.js. Que vous soyez nouveau sur React.js ou un développeur chevronné, Shadcn/UI peut améliorer la conception de votre application sans le gonflement habituel des frameworks plus volumineux. De plus, je vous guiderai pas à pas dans la configuration, y compris la façon d'exploiter les APIs et des outils comme Apidog pour faciliter le développement.
À la fin de cet article, vous aurez une compréhension claire de la façon d'utiliser Shadcn/UI dans votre projet React.js. Et, si vous créez votre propre API ou travaillez avec une, n'oubliez pas de télécharger Apidog gratuitement—c'est une bouée de sauvetage lors des tests et du développement d'API.
Commençons !
Qu'est-ce que Shadcn/UI ?
Avant de plonger dans la configuration, définissons d'abord ce qu'est Shadcn/UI et pourquoi c'est un choix judicieux pour votre projet React.js.
Shadcn/UI est une bibliothèque de composants personnalisable construite spécifiquement pour React.js. Contrairement aux frameworks plus volumineux comme Material UI ou Bootstrap, Shadcn/UI se concentre sur le fait de vous donner plus de contrôle sur l'apparence de vos composants. Il vous fournit des blocs de construction de base, vous permettant de créer une interface unique sans être lié à des thèmes prédéfinis.
Pourquoi Shadcn/UI ?
- Léger : contrairement aux bibliothèques lourdes qui regroupent des tonnes de composants que vous n'utiliserez jamais, Shadcn/UI ne fournit que ce dont vous avez besoin.
- Personnalisable : vous pouvez styliser et structurer les composants en fonction des exigences uniques de votre projet.
- Optimisé pour React.js : une intégration transparente avec React.js signifie que vous pouvez vous concentrer sur l'écriture de code plutôt que sur le réglage des configurations.
- APIs Prêt : la bibliothèque est compatible avec les outils API comme Apidog, ce qui facilite la gestion et le test des points de terminaison API dans votre application React.
Guide étape par étape : comment utiliser Shadcn/UI dans votre projet React.js
Maintenant que vous savez ce qu'est Shadcn/UI, passons en revue le processus étape par étape de son intégration dans un projet React.js. Ce guide suppose que vous avez déjà une compréhension de base de React et que vous avez Node.js installé sur votre machine.
1. Créer un nouveau projet React.js
Si vous avez déjà un projet React.js configuré, vous pouvez ignorer cette étape. Sinon, vous pouvez créer un nouveau projet à l'aide des commandes suivantes :
npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start
Cela créera un nouveau projet React.js nommé my-shadcn-ui-app et démarrera le serveur de développement. Maintenant, vous devriez voir l'application React par défaut en cours d'exécution.
2. Installer Shadcn/UI
Ajoutez des dépendances à votre projet manuellement.
Ajouter Tailwind CSS
Les composants sont stylisés à l'aide de Tailwind CSS. Vous devez installer Tailwind CSS dans votre projet.
Suivez les instructions d'installation de Tailwind CSS pour commencer.
Ajouter des dépendances
Ajoutez les dépendances suivantes à votre projet :
npm install tailwindcss-animate class-variance-authority clsx tailwind-mergeAjouter une bibliothèque d'icônes
Si vous utilisez le style default, installez lucide-react :
npm install lucide-reactSi vous utilisez le style new-york, installez @radix-ui/react-icons :
npm install @radix-ui/react-iconsConfigurer les alias de chemin
J'utilise l'alias @. Voici comment je le configure dans tsconfig.json :tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}L'alias @ est une préférence. Vous pouvez utiliser d'autres alias si vous le souhaitez.
Si vous utilisez un alias différent tel que ~, vous devrez mettre à jour les instructions d'importation lors de l'ajout de composants.
Vous pouvez maintenant commencer à ajouter des composants à votre projet.
3. Importer et utiliser les composants Shadcn/UI
Passons à la partie amusante : ajouter des composants Shadcn/UI à votre application React.js. Dans votre fichier src/App.js, vous pouvez commencer par importer et utiliser l'un des composants de Shadcn/UI, tel que le composant bouton.
Voici un exemple :
import React from 'react';
import { Button } from 'shadcn-ui';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Welcome to My Shadcn/UI App</h1>
<Button variant="primary">Click Me!</Button>
</header>
</div>
);
}
export default App;
Le composant Button de Shadcn/UI est importé et utilisé dans le composant App. Vous pouvez utiliser diverses props pour le personnaliser. Dans ce cas, nous utilisons la prop variant="primary" pour donner au bouton un style principal.
4. Personnaliser le thème Shadcn/UI
L'un des meilleurs aspects de Shadcn/UI est sa personnalisation. Vous pouvez modifier les composants pour qu'ils correspondent au langage de conception unique de votre application.
Shadcn/UI vous permet de définir un thème personnalisé qui peut être appliqué globalement. Voici comment faire :
a) Créer un fichier de thème personnalisé
Tout d'abord, créez un nouveau fichier appelé theme.js dans votre répertoire src. Dans ce fichier, vous définirez votre thème personnalisé comme suit :
const theme = {
colors: {
primary: '#ff6347', // Tomato color
secondary: '#4caf50', // Green color
},
fonts: {
body: 'Arial, sans-serif',
heading: 'Georgia, serif',
},
};
export default theme;
b) Appliquer le thème à vos composants
Maintenant que vous avez défini votre thème personnalisé, vous pouvez l'appliquer à vos composants à l'aide du composant ThemeProvider. Mettez à jour votre fichier src/App.js comme suit :
import React from 'react';
import { Button, ThemeProvider } from 'shadcn-ui';
import theme from './theme';
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<header className="App-header">
<h1>Welcome to My Shadcn/UI App</h1>
<Button variant="primary">Click Me!</Button>
</header>
</div>
</ThemeProvider>
);
}
export default App;
Dans ce code mis à jour, nous avons importé ThemeProvider de Shadcn/UI et enveloppé notre application à l'intérieur, en passant le theme personnalisé comme prop.
5. Gestion des API avec Apidog dans votre projet Shadcn/UI + React
Maintenant que votre front-end est magnifique avec Shadcn/UI, il est temps de le rendre fonctionnel en le connectant à une API. C'est là qu'Apidog entre en jeu. Si vous n'avez jamais entendu parler d'Apidog auparavant, il s'agit d'un outil de gestion d'API robuste qui simplifie les tests d'API, la documentation et la collaboration entre les développeurs.
Pourquoi utiliser Apidog avec votre application React.js ?
- Tests d'API simplifiés : vous pouvez tester vos points de terminaison API directement dans votre projet React.
- Collaboration transparente : Apidog vous permet de générer et de partager la documentation de l'API avec votre équipe.
- Accélérer le développement : simulez facilement les réponses de l'API pour accélérer le processus de développement.
Utilisation d'Apidog pour les appels d'API
Disons que vous créez une application React.js qui récupère des données à partir d'une API météorologique. Voici comment vous pouvez utiliser Apidog pour gérer les appels d'API :
Étape 1 : Ouvrez Apidog et créez une nouvelle requête.
Étape 2 : Dans l'éditeur de test, entrez l'URL de votre point de terminaison API, sélectionnez la méthode HTTP et ajoutez tous les en-têtes, paramètres ou données de corps dont vous avez besoin. Par exemple, vous pouvez tester l'itinéraire qui renvoie un message simple que nous avons créé précédemment :
Étape 3 : Cliquez sur le bouton Envoyer et voyez le résultat de votre test. Vous devriez voir le code d'état, le temps de réponse et le corps de la réponse de votre API. Par exemple, vous devriez voir quelque chose comme ceci :
Apidog est un excellent outil pour tester vos API, car il vous aide à garantir la qualité, la fiabilité et les performances de vos services Web. Il vous fait également gagner du temps et des efforts, car vous n'avez pas besoin d'écrire de code ni d'installer de logiciel pour tester vos API. Vous pouvez simplement utiliser votre navigateur et profiter de l'interface et des fonctionnalités conviviales d'Apidog.
6. Meilleures pratiques pour l'utilisation de Shadcn/UI et Apidog dans React.js
Voici quelques bonnes pratiques que vous devez suivre pour tirer le meilleur parti de Shadcn/UI et Apidog :
- Optimiser les performances : utilisez uniquement les composants Shadcn/UI dont vous avez besoin pour réduire la taille de votre bundle.
- Modulariser vos composants : divisez votre interface utilisateur en petits composants réutilisables.
- Testez vos API : utilisez Apidog pour tester minutieusement vos points de terminaison API et vous assurer qu'ils fonctionnent comme prévu.
- Utiliser le contrôle de version : validez régulièrement vos modifications pour éviter de perdre la progression et collaborer efficacement avec votre équipe.
Conclusion : création d'applications React.js avec Shadcn/UI et Apidog
Félicitations ! Vous avez maintenant toutes les connaissances dont vous avez besoin pour utiliser Shadcn/UI dans vos projets React.js. De la configuration de la bibliothèque à la personnalisation des composants, vous avez vu à quel point il est facile de créer de belles interfaces utilisateur. Et avec Apidog, la gestion de vos appels d'API devient un jeu d'enfant.
N'oubliez pas que, que vous construisiez un outil interne ou une application destinée aux clients, Shadcn/UI vous donne la flexibilité de créer quelque chose d'unique, tandis qu'Apidog vous aide à rationaliser votre flux de travail API.
P.S. Si vous travaillez sur des API, n'oubliez pas de télécharger Apidog gratuitement—cela vous fera gagner des heures de développement et de tests !
