Primeros pasos
Crea una app, renderiza tu primera página y responde a una tecla.
En este capítulo
- Crear la app
- Tu primera página
- Responder a una tecla
A lo largo de diez capítulos crearás Acme Deploys, un panel de despliegues que se renderiza en la consola de DevTools. Cada capítulo termina con la app exactamente como la deja tu código, ejecutándose en directo en la consola de esta página.
Crear la app
create-text-app genera la estructura de un proyecto con App Router, TypeScript y la CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devAbre http://localhost:3000 y después abre la consola del navegador. La página muestra un panel de foco. Tu app se renderiza en la consola.
Tu primera página
Cada ruta es un archivo page.tsx en app/. Sustituye la página inicial por la tarjeta de título del panel:
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> );}Guarda el archivo. Fast Refresh vuelve a dibujar el fotograma y conserva el estado de tu componente.
Responder a una tecla
useInput recibe cada pulsación de tecla mientras la página tiene el foco. Cuenta los saludos:
Eliminado: import { Box, Text } from "@textjs/app";Añadido: import { useState } from "react";Añadido: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Añadido: const [hellos, setHellos] = useState(0);Añadido: Añadido: useInput((e) => {Añadido: if (e.key === "return") setHellos((n) => n + 1);Añadido: if (e.input === "r") setHellos(0);Añadido: });Añadido: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Eliminado: <Text color="muted">Hello, console.</Text>Añadido: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Eso es una app completa de Text.js. Tiene estado de React, una caja de layout y un console.log por cada fotograma modificado, y no registra nada mientras está inactiva.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa Enter.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.