Explorar la estructura de la aplicación de inicio

En esta misión, examinaremos el contenido de la aplicación de inicio y nos centraremos en el contenido que se utilizará en las siguientes misiones de aprendizaje.

Paquetes instalados

Hay dos carpetas cerca de la parte superior de la lista que contienen código de paquetes de Guidewire: @jutro y @digitalsdk. El archivo package.json está configurado para extraer paquetes relevantes de estos archivos, mientras que el resto se instala desde un repositorio de paquetes de nodo. Encontrará todos los paquetes instalados en la carpeta node_modules.

Puede verificar las carpetas @jutro o @digitalsdk al nivel raíz o verificar la carpeta node_modules para examinar el código fuente de estos paquetes.

Carpeta de páginas

La carpeta src/pages se utiliza para almacenar páginas para la aplicación. Es una práctica normal crear una subcarpeta dentro de src/pages para cada página de la aplicación. Una página simple puede tener solo un archivo PageName.tsx dentro de la carpeta que contiene el código de TypeScript de la página. Las páginas más complejas pueden tener archivos adicionales para CSS, traducciones, así como subcarpetas para componentes personalizados.

Por ejemplo, la carpeta Settings tiene el siguiente contenido:

• Un archivo Settings.tsx que define el JSX.Element que se renderizará para crear la página de configuración.
• Un archivo Settings.messages.ts que se utiliza con la traducción de mensajes de componentes.
• Un archivo Settings.module.scss que define las instrucciones de formato CSS.
• Un archivo Settings.test.tsx que se puede utilizar para realizar pruebas unitarias en la página y advertir sobre cualquier problema con cambios futuros.
• Una carpeta components que contiene subcarpetas con archivos similares que definen cada uno de los componentes dentro de la página Configuración.

Enrutamiento

El enrutamiento determina qué contenido se muestra para qué URL. El enrutamiento de la aplicación de inicio se configura de modo que la URL de su página de inicio sea similar a http://localhost:3000/Settings y renderice los elementos definidos en src/pages/Settings/Settings.tsx.

El enrutamiento se define en el archivo src/app/App.config.tsx. Este archivo exporta un objeto que contiene una serie de propiedades importantes, muchas de las cuales no son relevantes para esta misión de aprendizaje. La sección correspondiente es esta:

...
import { Settings } from '../pages/Settings/Settings';
import messages from './App.messages';

export default {
    'floorplan.default': {
        ...
        routes: [
            {
                path: '/',
                exact: true,
                showOnNavBar: false,
                redirect: '/Settings',
            },
            {
                title: messages.pagesSettingsTitle,
                path: '/settings',
                exact: true,
                component: Settings,
            }
        ],
        ...
    }
}

El primer elemento de la lista de rutas define lo que sucede cuando visita la URL base, específicamente que redirige a la página /Settings.

Note: Las rutas no distinguen entre mayúsculas y minúsculas de forma predeterminada, por ello, /Settings es idéntico a /settings.

El segundo elemento enruta la ruta /settings para renderizar el archivo src/pages/Settings/Settings.tsx. Sus propiedades determinan las siguientes acciones:

• title rellena el string del título en función de messages.pagesSettingsTitle: esto permite que el título se traduzca fácilmente a otros idiomas.
• path define la ruta URL; indica que http://localhost:3000/settings se refiere a este elemento en la lista de enrutamiento.
• exact indica que solo coincidirá si la ruta coincide exactamente, esto significa que solo http://localhost:3000/settings sigue esta instrucción de enrutamiento. Si esto fuera falso, las rutas que contienen settings también irían aquí, por ejemplo http://localhost:3000/settings/foo
• component indica qué componente JSX se utiliza para renderizar la página. El componente Settings de Settings.tsx se importa mediante import { Settings } from '../pages/Settings/Settings';.

Encontrará más detalles sobre la definición de rutas en Configuración de rutas.