Dans cette leçon, nous allons configurer une nouvelle application React Router 7 et découvrir les APIs de ce framework.
avec React Router 7
Posez vos questions 24/7 à notre IA experte en React Router 7
Validez vos acquis avec des quiz personnalisés et un feedback instantané
Entrez votre email pour débloquer cette leçon gratuite
Nous allons initialiser notre premier projet React Router 7 ! La commande npm est disponible dans la documentation.
1npx create-react-router@latest cours-react-router
Lancer cette commande va générer la base de code d'un nouveau projet React Router 7, à l'emplacement actuel dans le terminal.
/dev que j'ai créé sur mon ordinateur. Il me suffit d'ouvrir un terminal, de cd dev, et de coller la commande de génération. Facile à retenir !On répond Yes aux deux questions :
package.jsonAprès le téléchargement, il nous reste plus qu'à ouvrir le projet.
Si tu utilises VSCode, tu peux ouvrir ton application avec code cours-react-router. Dans ce cours, je vais utiliser Cursor, et j'ouvre mon application avec la commande cursor cours-react-router (il faut au préalable ajouter la commande dans le path).
On confirme le téléchargement de la librairie et on initie un nouveau repository GitHub, tout en installant les dépendances avec NPM. Une fois le téléchargement terminé, on ouvre notre projet avec un éditeur de code, ici Cursor, et on explore les fichiers générés, notamment le package.json qui contient des scripts essentiels comme build, start, et dev.
On lance l'environnement de développement avec npm run dev, et notre application s'ouvre sur localhost:5173. On y trouve le logo de React Router et quelques liens. Pour tester, on modifie le fichier home.tsx dans le dossier app, qui contient notre composant Welcome. On change la description et la couleur de fond en bleu clair, grâce à Tailwind CSS, et tout se met à jour instantanément. Pas de panique, on ne va pas trop s'attarder sur le design pour l'instant. L'objectif est de maîtriser les bases du framework. Dans la prochaine leçon, on plongera plus en profondeur pour comprendre pourquoi tout fonctionne si bien. À très vite pour la suite !
Quelle est la principale différence entre les composants client et serveur dans React ?
Quelle technique est recommandée pour éviter les rendus inutiles dans React ?
Quel hook permet de gérer les effets de bord dans un composant React ?
Comment implémenter la gestion des erreurs pour les requêtes API dans React ?
Quelle est la meilleure pratique pour déployer une application React en production ?