First Blood (First App)

Your First Page

The root component (App.tsx) sets up routing:

import { Page } from "@dynatrace/strato-components/layouts";
import { Route, Routes } from "react-router-dom";
import { Home } from "./pages/Home";

export const App = () => (
  <Page>
    <Page.Main>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Page.Main>
  </Page>
);

Creating a Page

// ui/app/pages/HostList.tsx
import { Flex, TitleBar } from "@dynatrace/strato-components/layouts";
import { Text } from "@dynatrace/strato-components/typography";

export const HostList = () => (
  <Flex flexDirection="column" gap={16} padding={32}>
    <TitleBar>
      <TitleBar.Title>Host Monitor</TitleBar.Title>
    </TitleBar>
    <Text>Host data coming in Module 4.</Text>
  </Flex>
);

Key Strato Components

Component	Import From	Purpose
Page, Page.Main, Page.Header	layouts	App shell and structure
Flex	layouts	Flexbox layout (gap, padding, direction)
TitleBar	layouts	Page header with title/subtitle
AppHeader, NavItem	layouts	Top navigation bar
Button	buttons	Actions and interactions
Text, Heading	typography	Text content

Adding Navigation

import { AppHeader, NavItem } from "@dynatrace/strato-components/layouts";
import { Link } from "react-router-dom";

// In App.tsx, before Page.Main:
<Page.Header>
  <AppHeader>
    <NavItem component={Link} to="/">Home</NavItem>
    <NavItem component={Link} to="/hosts">Hosts</NavItem>
  </AppHeader>
</Page.Header>

What's Next

Module 3 — Load DOOM inside your app. CSP configuration, iframe sandbox, static assets.