Cómo crear una nueva página

Esta misión de aprendizaje le muestra cómo crear una nueva página en la aplicación de Jutro y agregarla a la navegación.

Agregar una página a una aplicación es un proceso de dos fases. En primer lugar, debe crear el archivo de página y, luego, debe actualizar la configuración de la aplicación para crear reglas de enrutamiento a la nueva página.

Note: Nuestra aplicación de aprendizaje de espacio aislado se basa en React y utiliza archivos TypeScript tsx para definir páginas. Si utiliza un marco diferente, los pasos de creación e importación del archivo pueden variar.

Actividad: crear una nueva página

1. Cree una carpeta nueva en src/pages. A los efectos de las siguientes misiones de aprendizaje, asigne un nombre a su carpeta NewPage.

1. Cree un archivo en su carpeta NewPage llamado NewPage.tsx y pegue las siguientes líneas de código:

   NewPage.tsx

   import React from 'react';
   
   export const MyNewPage: React.FC = () => <h2>Under construction</h2>;

2. Abra su archivo App.config.tsx e importe su nueva página. En primer lugar, agregue la siguiente línea a las instrucciones de importación:

   App.config.tsx

   ...
   import { MyNewPage } from '../pages/NewPage/NewPage';
   ...

3. Agregue su nueva página a la configuración de rutas:

   App.config.tsx

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

5. Guarde los cambios y ejecute npm start. La nueva página debería verse así: