תחילת העבודה

לאורך עשרה פרקים נבנה את ⁦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/. יש להחליף את העמוד ההתחלתי בכרטיס הכותרת של לוח הבקרה:

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 מקבל כל לחיצה על מקש כל עוד העמוד במיקוד. נספור את ברכות השלום:

זו אפליקציית Text.js שלמה. יש בה מצב של React, תיבת layout וקריאת console.log אחת לכל פריים שהשתנה, והיא לא כותבת דבר ליומן בזמן חוסר פעילות.