Initialisation d'un projet React Router 7

Nous allons initialiser notre premier projet React Router 7 ! La commande npm est disponible dans la documentation.

1
npx 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.

On répond Yes aux deux questions :

• Télécharger les modules sur NPM (présents dans le package.json
• Initialiser un nouveau repository Github

Aprè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 !