Memulai
Buat aplikasi, render halaman pertama Anda, dan tanggapi penekanan tombol.
Dalam bab ini
- Membuat aplikasi
- Halaman pertama Anda
- Merespons tombol
Dalam sepuluh bab, Anda akan membangun Acme Deploys, dasbor deploy yang di-render di konsol DevTools. Setiap bab diakhiri dengan aplikasi yang persis sesuai hasil kode Anda, berjalan langsung di konsol pada halaman ini.
Membuat aplikasi
create-text-app menyiapkan kerangka proyek dengan App Router, TypeScript, dan CLI text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devBuka http://localhost:3000, lalu buka konsol browser. Halaman menampilkan focus pad. Aplikasi Anda di-render di konsol.
Halaman pertama Anda
Setiap route berupa page.tsx di app/. Ganti halaman awal dengan kartu judul dasbor:
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> );}Simpan berkas. Fast Refresh menggambar ulang frame dan mempertahankan state komponen Anda.
Merespons tombol
useInput menerima setiap penekanan tombol selama halaman memiliki fokus. Hitung jumlah sapaan:
Dihapus: import { Box, Text } from "@textjs/app";Ditambahkan: import { useState } from "react";Ditambahkan: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Ditambahkan: const [hellos, setHellos] = useState(0);Ditambahkan: Ditambahkan: useInput((e) => {Ditambahkan: if (e.key === "return") setHellos((n) => n + 1);Ditambahkan: if (e.input === "r") setHellos(0);Ditambahkan: });Ditambahkan: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Dihapus: <Text color="muted">Hello, console.</Text>Ditambahkan: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Itulah aplikasi Text.js yang lengkap. Aplikasi ini memiliki state React, kotak layout, dan satu console.log untuk setiap frame yang berubah, serta tidak mencatat apa pun saat idle.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan Enter.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.