Bắt đầu
Tạo ứng dụng, render trang đầu tiên và phản hồi phím bấm.
Trong chương này
- Tạo ứng dụng
- Trang đầu tiên của bạn
- Phản hồi khi nhấn phím
Qua mười chương, bạn sẽ xây dựng Acme Deploys, một bảng điều khiển triển khai render trong console DevTools. Mỗi chương kết thúc với ứng dụng ở đúng trạng thái mà mã của bạn tạo ra, chạy trực tiếp trong console trên trang này.
Tạo ứng dụng
create-text-app tạo khung dự án với App Router, TypeScript và CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devMở http://localhost:3000, rồi mở console trình duyệt. Trang hiển thị một vùng focus. Ứng dụng của bạn render trong console.
Trang đầu tiên của bạn
Mỗi route là một tệp page.tsx trong app/. Thay trang khởi đầu bằng thẻ tiêu đề của bảng điều khiển:
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> );}Lưu tệp. Fast Refresh vẽ lại frame và giữ nguyên trạng thái component của bạn.
Phản hồi khi nhấn phím
useInput nhận mọi lần nhấn phím khi trang có focus. Đếm số lời chào:
Đã xóa: import { Box, Text } from "@textjs/app";Đã thêm: import { useState } from "react";Đã thêm: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Đã thêm: const [hellos, setHellos] = useState(0);Đã thêm: Đã thêm: useInput((e) => {Đã thêm: if (e.key === "return") setHellos((n) => n + 1);Đã thêm: if (e.input === "r") setHellos(0);Đã thêm: });Đã thêm: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Đã xóa: <Text color="muted">Hello, console.</Text>Đã thêm: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Đó là một ứng dụng Text.js hoàn chỉnh. Ứng dụng có trạng thái React, một hộp layout và một lần gọi console.log cho mỗi frame thay đổi, và không ghi gì khi nhàn rỗi.
Dùng thử
Đây là Acme Deploys ở cuối chương, đang chạy trong DevTools. Nhấp vào vùng focus, rồi dùng các phím bên dưới.
Mở console
Ứng dụng render trong DevTools.Trước tiên bật “Hiển thị tính năng cho nhà phát triển web” trong Cài đặt Safari → Nâng cao. Sau đó nhấp vào đây và nhấn Enter.
Mở trên máy tính
Ứng dụng này render trong console của DevTools, cần trình duyệt trên máy tính.
Bài trắc nghiệm
2 câu hỏiTrả lời mọi câu hỏi để hoàn thành chương.