Créer une nouvelle page

Cette mission d’apprentissage vous montre comment créer une nouvelle page dans votre application Jutro et comment l’ajouter à la navigation.

L’ajout d’une page à une application est un processus en deux étapes. Tout d’abord, vous devez créer le fichier de la page, puis mettre à jour la configuration de votre application pour créer des règles de routage vers la nouvelle page.

Note: Notre application d’apprentissage Sandbox est basée sur React et utilise des fichiers TypeScript tsx pour définir les pages. Si vous utilisez une structure différente, les étapes de création et d’importation de fichiers peuvent varier.

Activité pratique : créer une nouvelle page

Créez un nouveau dossier sous src/pages. Pour les missions d'apprentissage suivantes, nommez votre dossier NewPage.

Capture d’écran montrant le dossier NewPage mis en évidence dans le panneau de navigation de gauche

Créez un fichier dans votre dossier NewPage appelé NewPage.tsx et collez les lignes de code suivantes :
NewPage.tsx
```
import React from 'react';

export const MyNewPage: React.FC = () => <h2>Under construction</h2>;
```
Ouvrez votre fichier App.config.tsx et importez votre nouvelle page. Tout d’abord, ajoutez la ligne suivante aux instructions d’importation :
App.config.tsx
```
...
import { MyNewPage } from '../pages/NewPage/NewPage';
...
```

Ajoutez votre nouvelle page à la configuration des routes :

App.config.tsx
...
routes: [
...
   {
        title: "New Page",
        path: '/NewPage',
        component: MyNewPage,
    },
...
],
...

Capture d’écran montrant les instructions d’importation et la configuration des routes dans App.config.tsx

Enregistrez vos modifications et exécutez npm start. Votre nouvelle page devrait ressembler à ceci :

Capture d’écran de la nouvelle page affichant « En construction » dans le navigateur

Activité pratique : créer une nouvelle page​

Activité pratique : créer une nouvelle page