शुरुआत

ऐप बनाएं, अपना पहला पेज रेंडर करें और की दबाने पर प्रतिक्रिया दें।

दस अध्यायों में आप Acme Deploys बनाएंगे, जो DevTools कंसोल में रेंडर होने वाला एक डिप्लॉय डैशबोर्ड है। हर अध्याय के अंत में ऐप ठीक उसी स्थिति में होगा जिसमें आपका कोड उसे छोड़ता है, और इस पेज के कंसोल में लाइव चलेगा।

ऐप बनाना

create-text-app कमांड App Router, TypeScript और text CLI के साथ एक प्रोजेक्ट का शुरुआती ढांचा बनाती है।

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

http://localhost:3000 खोलें, फिर ब्राउज़र कंसोल खोलें। पेज पर एक फ़ोकस पैड दिखता है। आपका ऐप कंसोल में रेंडर होता है।

आपका पहला पेज

हर रूट app/ डायरेक्टरी में एक page.tsx फ़ाइल है। स्टार्टर पेज को डैशबोर्ड के टाइटल कार्ड से बदलें:

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 कॉल है, और यह निष्क्रिय रहने पर कुछ लॉग नहीं करता।

इस अध्याय में

ऐप बनाना

आपका पहला पेज

कुंजी दबाने पर प्रतिक्रिया

आज़माएं

कंसोल खोलें

डेस्कटॉप पर खोलें

क्विज़

शुरुआत

इस अध्याय में

#ऐप बनाना

#आपका पहला पेज

#कुंजी दबाने पर प्रतिक्रिया

आज़माएं

कंसोल खोलें

डेस्कटॉप पर खोलें

क्विज़

ऐप बनाना

आपका पहला पेज

कुंजी दबाने पर प्रतिक्रिया