İlk adımlar
Bir uygulama oluşturun, ilk sayfanızı render edin ve bir tuşa yanıt verin.
Bu bölümde
- Uygulamayı oluşturma
- İlk sayfanız
- Bir tuşa yanıt verme
On bölüm boyunca DevTools konsolunda render edilen bir dağıtım panosu olan Acme Deploys uygulamasını oluşturacaksınız. Her bölümün sonunda uygulama, kodunuzun bıraktığı haliyle bu sayfanın konsolunda canlı olarak çalışır.
Uygulamayı oluşturma
create-text-app, App Router, TypeScript ve text CLI içeren bir proje iskeleti oluşturur.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devhttp://localhost:3000 adresini açın, ardından tarayıcı konsolunu açın. Sayfada bir odak alanı görünür. Uygulamanız konsolda render edilir.
İlk sayfanız
Her rota, app/ dizinindeki bir page.tsx dosyasıdır. Başlangıç sayfasını panonun başlık kartıyla değiştirin:
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> );}Dosyayı kaydedin. Fast Refresh kareyi yeniden çizer ve bileşeninizin durumunu korur.
Bir tuşa yanıt verme
Sayfa odaktayken useInput her tuş vuruşunu alır. Selamları sayın:
Kaldırılan: import { Box, Text } from "@textjs/app";Eklenen: import { useState } from "react";Eklenen: import { Box, Text, useInput } from "@textjs/app";export default function Page() {Eklenen: const [hellos, setHellos] = useState(0);Eklenen: Eklenen: useInput((e) => {Eklenen: if (e.key === "return") setHellos((n) => n + 1);Eklenen: if (e.input === "r") setHellos(0);Eklenen: });Eklenen: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Kaldırılan: <Text color="muted">Hello, console.</Text>Eklenen: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}Bu, eksiksiz bir Text.js uygulamasıdır. React durumu, bir layout kutusu ve değişen her kare için bir console.log çağrısı içerir; boşta beklerken hiçbir şey günlüğe yazmaz.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve Enter tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.