Erkunden der Struktur der Starter-Anwendung

In dieser Mission werden wir den Inhalt der Starter-App untersuchen und uns dabei auf Inhalte konzentrieren, die in den folgenden Lernmissionen verwendet werden.

Installierte Pakete

Im oberen Bereich der Liste befinden sich zwei Ordner, die Code aus Guidewire-Paketen enthalten: @jutro und @digitalsdk. Die Datei package.json ist so eingerichtet, dass relevante Pakete aus diesen Dateien abgerufen werden, während die übrigen Pakete aus einem Node-Paket-Repository installiert werden. Alle installierten Pakete befinden sich im Ordner node_modules.

Sie können entweder die Ordner @jutro und @digitalsdk auf der Stammebene oder den Ordner node_modules zur Untersuchung des Quellcodes dieser Pakete überprüfen.

Seitenordner

Der Ordner src/pages wird zum Speichern von Seiten für Ihre App verwendet. Es ist gängige Praxis, für jede Seite in der App einen Unterordner in src/pages zu erstellen. Eine einfache Seite kann nur eine Datei PageName.tsx in dem Ordner enthalten, die den TypeScript-Code für die Seite enthält. Komplexere Seiten können zusätzliche Dateien für CSS, Übersetzungen sowie Unterordner für benutzerdefinierte Komponenten haben.

Der Ordner Settings hat beispielsweise den folgenden Inhalt:

• Eine Settings.tsx-Datei, die JSX.Element zum Rendern definiert, um die Einstellungsseite zu erstellen.
• Eine Settings.messages.ts-Datei zur Verwendung mit der Übersetzung von Komponentennachrichten.
• Eine Settings.module.scss-Datei, die CSS-Formatierungsanweisungen definiert.
• Eine Settings.test.tsx-Datei, die für Komponententests der Seite und für Warnungen bei Problemen mit zukünftigen Änderungen verwendet werden kann.
• Ein components-Ordner, der Unterordner mit ähnlichen Dateien enthält, mit denen die einzelnen Komponenten auf der Einstellungsseite definiert werden.

Routing

Mithilfe des Routings wird bestimmt, welcher Inhalt für welche URL angezeigt wird. Das Routing der Starter-App ist so eingerichtet, dass die Startseiten-URL den in definierten Elementen ähnelt http://localhost:3000/Settings und diese src/pages/Settings/Settings.tsxrendert.

Das Routing ist in der src/app/App.config.tsx-Datei definiert. Diese Datei exportiert ein Objekt, das eine Reihe wichtiger Eigenschaften enthält, von denen viele für diese Lernmission nicht relevant sind. Der relevante Abschnitt lautet wie folgt:

...
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,
            }
        ],
        ...
    }
}

Das erste Element in der Routenliste ist die Definition dessen, was passiert, wenn Sie die Basis-URL aufrufen, insbesondere, ob sie auf die Seite /Settings weiterleitet.

Note: Bei Pfaden wird standardmäßig nicht zwischen Groß- und Kleinschreibung unterschieden. Deshalb ist /Settings identisch mit /settings.

Das zweite Element ist das Routing des Pfads /settings zum Rendern der Datei src/pages/Settings/Settings.tsx. Die Eigenschaften bestimmen die folgenden Aktionen:

• title füllt die Titelzeichenfolge basierend auf messages.pagesSettingsTitle - dies dient dazu, dass der Titel leicht in andere Sprachen übersetzt werden kann.
• path definiert den URL-Pfad und gibt an, dass http://localhost:3000/settings auf dieses Element in der Routingliste verweist.
• exact gibt an, dass es nur dann eine Übereinstimmung gibt, wenn der Pfad genau übereinstimmt, d. h. nur http://localhost:3000/settings dieser Routing-Anweisung folgt. Wäre dies false, dann würden auch Pfade mit settings hierher führen, z. B. http://localhost:3000/settings/foo
• component gibt an, welche JSX-Komponente zum Rendern der Seite verwendet wird. Die Settings-Komponente aus Settings.tsx wird mit import { Settings } from '../pages/Settings/Settings'; importiert

Weitere Details zum Definieren von Routen finden Sie unter Konfigurieren von Routen.