入门
创建应用，渲染第一个页面并响应按键。
本章内容
- 创建应用
- 你的第一个页面
- 响应按键
你将在 10 章中构建 Acme Deploys，一个在 DevTools 控制台中渲染的部署仪表盘。每章结束时，应用都会以你的代码所定义的状态，在本页的控制台中实时运行。
创建应用
create-text-app 会生成包含 App Router、TypeScript 和 text CLI 的项目骨架。
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun dev打开 http://localhost:3000，然后打开浏览器控制台。页面会显示一个焦点区。你的应用在控制台中渲染。
你的第一个页面
每个路由都是 app/ 中的一个 page.tsx。将初始页面替换为仪表盘的标题卡片：
app/page.tsxtsx
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> );}保存文件。Fast Refresh 会重绘帧，并保留组件状态。
响应按键
页面获得焦点时，useInput 会接收每次按键。统计问候次数：
app/page.tsx+10-2tsx
移除：import { Box, Text } from "@textjs/app";新增：import { useState } from "react";新增：import { Box, Text, useInput } from "@textjs/app";export default function Page() {新增： const [hellos, setHellos] = useState(0);新增：新增： useInput((e) => {新增： if (e.key === "return") setHellos((n) => n + 1);新增： if (e.input === "r") setHellos(0);新增： });新增： return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>移除： <Text color="muted">Hello, console.</Text>新增： <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}这就是一个完整的 Text.js 应用。它包含 React 状态和布局框，每个发生变化的帧调用一次 console.log，空闲时不输出日志。
试用
这是本章结束时的 Acme Deploys，正在 DevTools 中运行。点击输入区，然后使用下列按键。
▼ 01 · 入门
打开控制台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
应用在 DevTools 中渲染。先在 Safari 设置 → 高级中开启“显示网页开发者功能”。 然后点击这里并按 Enter。
在桌面端打开
此应用在 DevTools 控制台中渲染，需要桌面浏览器。
测验
2 个问题回答所有问题以完成本章。