Primeiros passos
Crie um app, renderize sua primeira página e responda a uma tecla.
Neste capítulo
- Criar o app
- Sua primeira página
- Responder a uma tecla
Ao longo de dez capítulos, você vai construir o Acme Deploys, um painel de deploys que renderiza no console do DevTools. Cada capítulo termina com o app exatamente como seu código o deixa, rodando ao vivo no console desta página.
Criar o app
create-text-app gera a estrutura de um projeto com o App Router, TypeScript e a CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devAbra http://localhost:3000 e depois abra o console do navegador. A página exibe uma área de foco. Seu app renderiza no console.
Sua primeira página
Cada rota é um page.tsx em app/. Substitua a página inicial pelo cartão de título do painel:
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> );}Salve o arquivo. O Fast Refresh redesenha o quadro e mantém o estado do seu componente.
Responder a uma tecla
useInput recebe cada tecla pressionada enquanto a página está em foco. Conte os olás:
Removido: import { Box, Text } from "@textjs/app";Adicionado: import { useState } from "react";Adicionado: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Adicionado: const [hellos, setHellos] = useState(0);Adicionado: Adicionado: useInput((e) => {Adicionado: if (e.key === "return") setHellos((n) => n + 1);Adicionado: if (e.input === "r") setHellos(0);Adicionado: });Adicionado: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Removido: <Text color="muted">Hello, console.</Text>Adicionado: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Isso é um app Text.js completo. Ele tem estado React, uma caixa de layout e um console.log por quadro alterado, e não registra nada enquanto está ocioso.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione Enter.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.