⁦شروع کار | ⁦Learn Text.js⁩⁩

یک برنامه بسازید، اولین صفحه را رندر کنید و به یک کلید پاسخ دهید.

در طول 10 فصل، ⁦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 به‌ازای هر فریم تغییریافته دارد و در حالت بیکار هیچ گزارشی ثبت نمی‌کند.

شروع کار

در این فصل

ساخت برنامه

اولین صفحهٔ شما

پاسخ به فشردن کلید

امتحان کنید

باز کردن کنسول

باز کردن در رایانه

آزمون

شروع کار

در این فصل

#ساخت برنامه

#اولین صفحهٔ شما

#پاسخ به فشردن کلید

امتحان کنید

باز کردن کنسول

باز کردن در رایانه

آزمون

ساخت برنامه

اولین صفحهٔ شما

پاسخ به فشردن کلید