Primi passi
Crea un’app, renderizza la prima pagina e rispondi a un tasto.
In questo capitolo
- Creare l’app
- La tua prima pagina
- Rispondere a un tasto
In dieci capitoli costruirai Acme Deploys, una dashboard di deploy visualizzata nella console DevTools. Ogni capitolo termina con l’app esattamente come la lascia il tuo codice, in esecuzione dal vivo nella console di questa pagina.
Creare l’app
create-text-app genera la struttura di un progetto con App Router, TypeScript e la CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devApri http://localhost:3000, poi apri la console del browser. La pagina mostra un pannello del focus. La tua app viene visualizzata nella console.
La tua prima pagina
Ogni route è un file page.tsx in app/. Sostituisci la pagina iniziale con il riquadro del titolo della dashboard:
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> );}Salva il file. Fast Refresh ridisegna il frame e mantiene lo stato del componente.
Rispondere a un tasto
useInput riceve ogni pressione di tasto mentre la pagina ha il focus. Conta i saluti:
Rimosso: import { Box, Text } from "@textjs/app";Aggiunto: import { useState } from "react";Aggiunto: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Aggiunto: const [hellos, setHellos] = useState(0);Aggiunto: Aggiunto: useInput((e) => {Aggiunto: if (e.key === "return") setHellos((n) => n + 1);Aggiunto: if (e.input === "r") setHellos(0);Aggiunto: });Aggiunto: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Rimosso: <Text color="muted">Hello, console.</Text>Aggiunto: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Questa è un’app Text.js completa. Ha uno stato React, un riquadro di layout e un console.log per ogni frame modificato, e non scrive nulla nel log quando è inattiva.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi Enter.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.