Pour aller plus loin dans la pratique je vous propose de créer une "single page application". L'objectif est de créer un site multipage qui contiendra 4 pages :
- Une page d'accueil
- Une page qui liste des articles (on utilisera Json placeholder pour simuler une API)
- Une page article qui affichera un article en particulier.
- Une page contact
Sur la page d'un article on permettra l'édition d'un article à travers un formulaire qui sera disponible dans une boîte de dialogue.
Etapes
Pour vous donner un petit guide voici quelques étapes clef dans la réalisation de cet objectif.
- Créer un composant
<Header>qui permettra d'afficher l'en tête du site. - Créer une fonction composable
usePage()qui permet de déterminer la page à afficher à partir duhashde la page. - Créer un composant qui servira de page carrefour, et qui affichera le bon composant en fonction de la page renvoyée par
usePage(). - Pour la page articles, mettre en place un système qui permet de récupérer les articles depuis une API. Pour tester, on utilisera le chemin /posts de JSONPlaceholder.
- Pour la page d'article on utilisera un format d'URL particulier (le hash #post:3) et on modifiera
usePage()pour gérer les paramètres. - On récupèrera ensuite ce paramètre sur la page de l'article pour charger les données correspondant à l'article à afficher.
- Enfin, sur cette même page on mettra en place la boite de dialogue (en utilisant la balise
<dialog>).
