⁦البدء | ⁦Learn Text.js⁩⁩

أنشئ تطبيقًا، واعرض صفحتك الأولى واستجب لضغطة مفتاح.

ستبني على مدى عشرة فصول ⁦Acme Deploys⁩، وهي لوحة تحكم للنشر تُعرض في وحدة التحكم في DevTools. ينتهي كل فصل بالتطبيق كما يتركه الكود تمامًا، ويعمل مباشرة في وحدة التحكم على هذه الصفحة.

إنشاء التطبيق

تنشئ الأداة create-text-app هيكل مشروع يتضمن ⁦App Router⁩ و TypeScript وواجهة سطر الأوامر text.

bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun dev

افتح http://localhost:3000، ثم افتح وحدة التحكم في المتصفح. تعرض الصفحة لوحة التركيز. يُعرض تطبيقك في وحدة التحكم.

صفحتك الأولى

كل مسار هو ملف page.tsx في app/. استبدل الصفحة الأولية ببطاقة عنوان لوحة التحكم:

app/page.tsxtsx

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 كل ضغطة مفتاح ما دام التركيز على الصفحة. احسب عدد التحيات:

app/page.tsx+10-2tsx

-المحذوف: 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 واحدًا لكل إطار يتغير، ولا يسجل شيئًا أثناء الخمول.

البدء

في هذا الفصل

إنشاء التطبيق

صفحتك الأولى

الاستجابة لضغطة مفتاح

جرّبه

فتح وحدة التحكم

الفتح على حاسوب مكتبي

اختبار

البدء

في هذا الفصل

#إنشاء التطبيق

#صفحتك الأولى

#الاستجابة لضغطة مفتاح

جرّبه

فتح وحدة التحكم

الفتح على حاسوب مكتبي

اختبار

إنشاء التطبيق

صفحتك الأولى

الاستجابة لضغطة مفتاح