Pierwsze kroki
Utwórz aplikację, wyrenderuj pierwszą stronę i obsłuż klawisz.
W tym rozdziale
- Tworzenie aplikacji
- Twoja pierwsza strona
- Reagowanie na klawisz
W ciągu dziesięciu rozdziałów zbudujesz Acme Deploys, panel wdrożeń renderowany w konsoli DevTools. Każdy rozdział kończy się aplikacją dokładnie w stanie wynikającym z twojego kodu, działającą na żywo w konsoli na tej stronie.
Tworzenie aplikacji
create-text-app tworzy szkielet projektu z App Router, TypeScript i interfejsem CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devOtwórz http://localhost:3000, a następnie otwórz konsolę przeglądarki. Na stronie znajduje się panel fokusu. Twoja aplikacja renderuje się w konsoli.
Twoja pierwsza strona
Każda trasa to plik page.tsx w katalogu app/. Zastąp stronę startową kartą tytułową panelu:
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> );}Zapisz plik. Fast Refresh przerysowuje klatkę i zachowuje stan komponentu.
Reagowanie na klawisz
useInput odbiera każde naciśnięcie klawisza, gdy strona ma fokus. Zliczaj powitania:
Usunięto: import { Box, Text } from "@textjs/app";Dodano: import { useState } from "react";Dodano: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Dodano: const [hellos, setHellos] = useState(0);Dodano: Dodano: useInput((e) => {Dodano: if (e.key === "return") setHellos((n) => n + 1);Dodano: if (e.input === "r") setHellos(0);Dodano: });Dodano: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Usunięto: <Text color="muted">Hello, console.</Text>Dodano: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}To kompletna aplikacja Text.js. Ma stan React, kontener layoutu i jedno wywołanie console.log na każdą zmienioną klatkę, a w bezczynności niczego nie loguje.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij Enter.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.