👉 Commencez par cloner ce repo et vous y placer, puis installez les dépendances :
- soit via
npm install
ounpm i
, - soit en installant
pnpm
, alternative à NPM plus rapide :npm i -g pnpm
, puispnpm install
Objectif :
- Savoir installer et mettre en place React Router
- Associer un composant à un "path" (chemin relatif)
- Gérer les paramètres d'URL
Vous allez devoir créer un mini-blog contenant 3 routes :
-
une page d'accueil qui va afficher une liste d'articles (données fournies, voir plus loin).
- chemin :
/
- nom du composant :
HomePage
- chemin :
-
une page "à propos"
- chemin :
/about
- nom du composant :
About
- chemin :
-
une page "contact"
- chemin :
/contact
- nom du composant :
Contact
- chemin :
-
une page affichant les détails d'un article (à faire en dernier)
- chemin :
/posts/:id
- nom du composant :
PostDetails
- chemin :
En cas de coup dur, "RTFM" (ça veut dire "lisez la doc", je vous laisse chercher la signification du terme anglais...).
- Commencez par installer React Router dans le projet. Attention, comme mentionné dans la section Quick Start de la doc, c'est le module
react-router-dom
qu'il faut installer.⚠️ Vous n'avez pas besoin d'utilisercreate-react-app
, c'est déjà fait ! - Vous pouvez :
- soit suivre la doc et importer
BrowserRouter
depuisApp.jsx
(renommé dans l'exemple enRouter
lors de l'import) - soit l'importer depuis
index.jsx
, et alors entourer<App />
avec les balises<Router>
...</Router>
(ou<BrowserRouter>
...</BrowserRouter>
)
- Ecrivez les 4 composants, sous forme de fonctions, qui peuvent ne renvoyer qu'un contenu minimal pour l'instant (une "div" vide).
- Mettez en place la structure avec le
Switch
et à l'intérieur, lesRoute
, pour associer les composants aux chemins. - Testez en changeant l'URL dans la barre d'adresse
- Créez un composant
Navbar
que vous appellerez depuisApp
, mais en le plaçant en-dehors (au-dessus) duSwitch
. Vous utiliserez 3Link
pour mener à la homepage, à la page "à propos", à la page contact. - Dans le composant
HomePage
, importez les articles depuis le fichiersrc/data/posts.json
, puis faites unmap
pour afficher autant dediv
que d'articles. Pour chaque article, affichez sontitle
dans unh3
, et sonbody
dans unp
. - Dans le composant
PostDetails
, cherchez à afficher le paramètre d'URLid
. Pour tester, comme on n'a pas mis de lien vers cette page dans la navbar, essayez de mettre le chemin/posts/1
dans la barre d'adresse (après l'URL http://localhost:3000). Indice : examinez les props dePostDetails
dans les React Dev Tools. On y trouveparams
, un objet qui contient un autre objetmatch
, contenant les paramètres d'URL. - Comme dans HomePage, importez le fichier d'articles. Essayez de n'afficher que l'article correspondant au paramètre
id
passé via l'URL. Vous pouvez utiliserfilter
ou une variante ne renvoyant qu'un seul élément, find. Attention, vous aurez besoin de convertir le paramètre d'URLid
en nombre pour pouvoir utiliser filter ou find correctement.