はじめに
アプリを作成し、最初のページを描画して、キー入力に応答します。
この章の内容
- アプリの作成
- 最初のページ
- キー入力への応答
全10章で、DevToolsコンソールに描画するデプロイダッシュボード、Acme Deploysを作ります。各章の最後には、書いたコードの状態そのままのアプリが、このページのコンソールで実際に動作します。
アプリの作成
create-text-app は、App Router、TypeScript、text CLIを備えたプロジェクトのひな形を生成します。
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devhttp://localhost:3000 を開き、ブラウザーのコンソールを開きます。ページにはフォーカスパッドが表示されます。アプリはコンソールに描画されます。
最初のページ
各ルートは app/ 内の page.tsx です。スターターページをダッシュボードのタイトルカードに置き換えます。
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 は、ページにフォーカスがある間、すべてのキー入力を受け取ります。挨拶の回数を数えます。
削除：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で動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、Enterを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。