Начало работы
Создайте приложение, отрендерите первую страницу и обработайте нажатие клавиши.
В этой главе
- Создать приложение
- Ваша первая страница
- Обработать нажатие клавиши
За десять глав вы создадите Acme Deploys, панель развёртываний, которая рендерится в консоли DevTools. В конце каждой главы приложение работает в консоли на этой странице именно в том виде, к которому его привёл ваш код.
Создать приложение
create-text-app создаёт заготовку проекта с App Router, TypeScript и CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devОткройте http://localhost:3000, затем откройте консоль браузера. На странице отображается панель фокуса. Ваше приложение рендерится в консоли.
Ваша первая страница
Каждый маршрут — это файл page.tsx в app/. Замените стартовую страницу карточкой с заголовком панели:
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: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите Enter.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.