開始使用
建立應用程式、渲染第一個頁面並回應按鍵。
本章內容
- 建立應用程式
- 你的第一個頁面
- 回應按鍵
在 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 個問題回答所有問題以完成本章。