Comment configurer une application React avec Vite et Tailwind CSS : guide complet

Vite représente une avancée majeure par rapport aux outils de configuration traditionnels, car il sépare les modules de l’application en dépendances et code source, en utilisant esbuild pour un regroupement rapide des dépendances et en servant le code source via les Modules ECMAScript natifs (ESM). Cette approche permet des temps de démarrage et de mise à jour du serveur considérablement plus rapides, améliorant ainsi la productivité pendant le développement. Vite prend en charge la mise en place de différents types de projets, tels que Svelte, Preact, Solid.js et bien d'autres. Dans ce guide, nous allons nous concentrer sur la création d'une application React avec Vite et l'intégration de Tailwind CSS, un framework CSS très populaire pour sa simplicité et son efficacité.

Création d'une application React avec Vite

Tout d'abord, il vous faut créer un dossier de travail, comme par exemple chapter5, et le définir comme répertoire de travail à l'aide de la commande cd. Ensuite, utilisez la commande suivante pour créer un modèle React avec Vite :

bash
Copy code
npm create vite@latest frontend -- --template react

Contrairement à l'outil Create React App, Vite exige l'installation manuelle de toutes les dépendances Node.js. Une fois dans le répertoire /frontend, vous pouvez installer les dépendances nécessaires avec la commande :

bash
Copy code
npm install

Lorsque cette installation est terminée, vous disposez d'un projet React prêt à être développé.

Installation de Tailwind CSS

bash
Copy code
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

La première commande installe Tailwind CSS ainsi que les dépendances nécessaires pour le développement, tandis que la deuxième crée le fichier tailwind.config.js, où vous pourrez affiner la configuration de Tailwind selon vos besoins.

Configuration du fichier tailwind.config.js

Une fois Tailwind installé, vous devrez configurer le fichier tailwind.config.js afin qu'il fonctionne correctement avec React. Remplacez le contenu du fichier par le code suivant :

javascript
Copy code
/** @type {import('tailwindcss').Config} */

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Modification du fichier CSS

Vite crée un fichier src/index.css avec des styles par défaut, mais pour utiliser Tailwind, vous devez supprimer ces styles et ajouter les directives Tailwind nécessaires. Modifiez donc index.css comme suit :

css
Copy code
@tailwind base;
@tailwind components;
@tailwind utilities;

Cela garantit que votre projet utilise les classes utilitaires de Tailwind pour la mise en forme.

Configuration du fichier App.jsx

Il est maintenant temps de mettre en place la structure de votre application. Dans le fichier App.jsx, remplacez son contenu par le code suivant :

javascript
Copy code
export default function App() {

  return (
    <div className="bg-purple-800 text-white min-h-screen p-4 flex flex-col justify-center items-center">
      Hello FARM stack!
    </div>
  );
}

Ici, vous appliquez plusieurs classes Tailwind CSS pour définir l’apparence de votre page, telles que :

• bg-purple-800 pour un fond violet

• text-white pour un texte blanc

• min-h-screen pour que la hauteur de la page occupe tout l'écran

• p-4 pour ajouter des espacements internes

• flex et flex-col pour utiliser le modèle de mise en page Flexbox avec une direction verticale

• justify-center et items-center pour centrer le contenu

Lancement du projet

Pour démarrer votre application, il vous suffit d’exécuter la commande suivante dans le terminal :

bash
Copy code
npm run dev

Cela lancera le serveur de développement et vous pourrez voir votre application en accédant à http://localhost:5173/. Vous devriez voir un fond violet avec le texte "Hello FARM stack!" centré sur la page.

Structure du projet

Le répertoire de votre projet contient plusieurs dossiers et fichiers importants. Le dossier node_modules contient toutes les dépendances nécessaires au projet. Vous n'avez généralement pas besoin d'interagir directement avec ce dossier, sauf en cas de débogage avancé. Le dossier public contient des fichiers statiques qui ne seront pas traités par Vite, comme les images ou les fichiers de police. Ce dossier peut être utilisé pour ajouter des assets que vous souhaitez servir directement aux utilisateurs.

Le fichier index.html situé dans le répertoire /src est essentiel, car c’est là que React injecte toute l'application. Il contient un élément div avec l'ID root, qui servira de point d’ancrage pour votre application React. En modifiant le fichier App.jsx, vous mettrez à jour ce contenu, qui sera ensuite rendu dans ce div.

Conseils supplémentaires

Au-delà de la mise en place de React et Tailwind CSS, il est important de noter que React encourage une approche modulaire du développement. Vous pouvez créer des dossiers et des fichiers pour organiser vos composants et pages de manière plus cohérente et structurée. Par exemple, il peut être utile de regrouper les fonctionnalités par "features" ou d'implémenter une gestion de l'état avec des outils comme Redux ou Context API si votre application devient plus complexe.

Tailwind CSS est une excellente option pour les développeurs qui souhaitent une approche rapide et efficace pour définir des styles. Ce framework permet de créer des interfaces propres et élégantes sans perdre de temps à gérer des classes CSS complexes. Grâce à ses classes utilitaires, Tailwind facilite la personnalisation et le développement d’interfaces réactives, ce qui en fait un choix privilégié pour de nombreux développeurs React.

Comment bien modéliser les données avec MongoDB pour un projet d'envergure

Lors de l'introduction à MongoDB dans le Chapitre 2, "Mise en place de la base de données avec MongoDB", vous avez abordé les bases pour vous familiariser avec cet outil dans le cadre de projets simples. Cependant, MongoDB est un écosystème complexe utilisé par de grandes entreprises, et une compréhension approfondie de ses fonctionnalités et de ses modèles peut s’avérer cruciale pour le développement de solutions robustes. L’une des premières étapes pour exploiter MongoDB efficacement est de comprendre la modélisation des données ou la conception de schémas.

La modélisation des données dans MongoDB doit refléter la manière dont l'application percevra les données et leur flux. Cela commence par les requêtes que vous ferez. À cet égard, il existe des modèles de conception avancés qui s'appliquent aux schémas de MongoDB, bien au-delà de ce qui est abordé ici. Le Chapitre 2, par exemple, a couvert des pratiques populaires en matière de modélisation des documents MongoDB, mais il est essentiel de connaître quelques conseils supplémentaires pour aller plus loin dans l’optimisation.

Les objets qui sont destinés à être utilisés ensemble doivent être regroupés dans un même document. L’adage "Les données accédées ensemble, restent ensemble" guide cette approche. En d'autres termes, il est important de structurer vos données de manière à ce qu'elles soient faciles à récupérer lorsqu’elles sont souvent consultées ensemble. De plus, si vous séparez les objets en différents documents, il est préférable d'éviter les JOINs, bien que de simples LEFT JOINs soient possibles à travers le framework d’agrégation de MongoDB. Ce dernier peut être utilisé, mais il convient de limiter son usage lorsque cela est possible, pour ne pas sacrifier les performances.

En venant du monde des bases de données relationnelles, la modélisation des relations repose souvent sur un choix entre l’encapsulation et la référence. Dans l’exemple de l’application que vous avez réalisée dans les chapitres précédents, qui répertoriait des voitures d'occasion, vous avez opté pour la référence de l'ID utilisateur lors de la création de l’application CRUD avec les utilisateurs. Cela semble être une solution simple, mais dans un contexte réel, plusieurs facteurs doivent être pris en compte. Par exemple, si le côté "many" d’une relation un-à-plusieurs peut contenir plusieurs centaines d’éléments, l’encapsulation dans un document pourrait ne pas être la meilleure option.

Pour comprendre plus en détail la modélisation des données et découvrir des exemples concrets d'application, vous pouvez consulter la documentation officielle de MongoDB à l'adresse suivante : MongoDB Schema Design Best Practices.

Un projet intéressant à intégrer dans vos applications est Beanie, un ORM asynchrone pour MongoDB basé sur Motor et Pydantic. Ce dernier facilite la création d’applications CRUD de manière efficace et rapide. Il existe également Mongita, qui peut être comparé à SQLite pour MongoDB, et peut être utilisé comme une base de données embarquée pour des cas plus légers où les données doivent rester locales ou pour des prototypes avant de se lancer dans une configuration complète de MongoDB.

Lors de l’utilisation de MongoDB, vous devrez aussi prendre en compte des aspects importants concernant l’environnement de développement et la structuration du projet. Dans FastAPI, par exemple, il est essentiel de structurer votre application de manière logique et modulaire, notamment en séparant les modèles de données et les routeurs, pour garantir la lisibilité et la maintenabilité de votre code. Cette approche s’aligne parfaitement avec la manière dont MongoDB gère les données et vous permet de mieux gérer la complexité à mesure que votre projet se développe.

Un autre aspect clé est la mise en place de tests unitaires pour vos API. Cela est particulièrement important lorsque vous travaillez avec des bases de données asynchrones comme MongoDB via des bibliothèques comme Motor. Utiliser des outils tels que pytest et HTTPX pour tester de manière asynchrone garantit que votre application fonctionne comme prévu, même dans des conditions de charge ou de latence variées. FastAPI, avec sa documentation automatique, rend également ce processus beaucoup plus simple et intuitif.

Ainsi, bien que MongoDB offre une grande flexibilité, la clé pour l'utiliser efficacement dans des applications complexes réside dans une bonne conception des schémas et une gestion appropriée des relations entre les données. Une modélisation intelligente et une bonne structuration du projet sont essentielles pour maintenir des performances élevées tout en répondant aux besoins de l'utilisateur final.