Erste Schritte
Erstelle eine App, rendere deine erste Seite und reagiere auf einen Tastendruck.
In diesem Kapitel
- Die App erstellen
- Deine erste Seite
- Auf einen Tastendruck reagieren
In zehn Kapiteln baust du Acme Deploys, ein Deploy-Dashboard, das in der DevTools-Konsole rendert. Jedes Kapitel endet mit der App genau in dem Zustand, den dein Code vorgibt, live in der Konsole auf dieser Seite.
Die App erstellen
create-text-app erstellt ein Projektgerüst mit dem App Router, TypeScript und der text-CLI.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devÖffne http://localhost:3000 und dann die Browser-Konsole. Die Seite zeigt ein Fokusfeld. Deine App rendert in der Konsole.
Deine erste Seite
Jede Route ist eine page.tsx im app/-Ordner. Ersetze die Startseite durch die Titelkarte des Dashboards:
import { Box, Text } from "@textjs/app";export default function Page() { return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text> <Text color="muted">Hello, console.</Text> </Box> );}Speichere die Datei. Fast Refresh zeichnet den Frame neu und behält den Zustand deiner Komponenten bei.
Auf einen Tastendruck reagieren
useInput empfängt jeden Tastendruck, solange die Seite den Fokus hat. Zähle die Begrüßungen:
Entfernt: import { Box, Text } from "@textjs/app";Hinzugefügt: import { useState } from "react";Hinzugefügt: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Hinzugefügt: const [hellos, setHellos] = useState(0);Hinzugefügt: Hinzugefügt: useInput((e) => {Hinzugefügt: if (e.key === "return") setHellos((n) => n + 1);Hinzugefügt: if (e.input === "r") setHellos(0);Hinzugefügt: });Hinzugefügt: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Entfernt: <Text color="muted">Hello, console.</Text>Hinzugefügt: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Das ist eine vollständige Text.js-App. Sie hat einen React-Zustand, eine Layout-Box und einen console.log-Aufruf pro geändertem Frame und protokolliert im Leerlauf nichts.
Ausprobieren
Das ist Acme Deploys am Ende des Kapitels, ausgeführt in DevTools. Klicke auf das Pad und nutze dann die Tasten unten.
Die Konsole öffnen
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke Enter.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.
Quiz
2 FragenBeantworte jede Frage, um das Kapitel abzuschließen.