---
title: "React"
description: "Tanrei के Web Components से जनरेट किए गए, टाइप वाले React कंपोनेंट।"
url: "https://tanrei.chnotchy.com/hi/getting-started/react/"
last_updated: 2026-10-23T21:16:19.000Z
---

# React

> Tanrei के Web Components से जनरेट किए गए, टाइप वाले React कंपोनेंट।

`@tanrei/react`, `@tanrei/web` के हर कस्टम एलिमेंट को एक असली React कंपोनेंट में लपेटता है, जिसकी प्रॉपर्टी और इवेंट हैंडलर टाइप किए हुए हैं। ये रैपर कस्टम एलिमेंट मैनिफ़ेस्ट से जनरेट होते हैं, इसलिए वे हमेशा उन एलिमेंट से मेल खाते हैं जिन्हें वे लपेटते हैं।

> [!WARNING]
> **प्री-रिलीज़**
>
> `0.1.0-next.0` npm पर dist-tag `next` के साथ प्रकाशित है: `0.1.0` तक `@tanrei/react@next` और `@tanrei/web@next` इंस्टॉल करें। 0.x प्री-रिलीज़ के दौरान पुराने वर्शन के साथ संगतता नहीं रखी जाती: कोई भी प्री-रिलीज़ पहले से अप्रचलित घोषित किए बिना कुछ भी तोड़ सकती है, और क्या टूटा, यह उसका changeset बताता है।

## इंस्टॉल करें

React 18 या उसके बाद का वर्शन ज़रूरी है।

### npm से

```sh
npm install @tanrei/react @tanrei/web
```

### सोर्स से

`main` पर मौजूद सोर्स इस्तेमाल करने के लिए [Web पैकेज](https://tanrei.chnotchy.com/hi/getting-started/web/) की तरह (Git, Node 22.22 या उसके बाद का वर्शन, pnpm 12): रिपॉज़िटरी के क्लोन में दोनों पैकेज बिल्ड करें और उन्हें पैक करें,

```sh
git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/web --filter @tanrei/react build
pnpm --filter @tanrei/web --filter @tanrei/react pack --pack-destination ../tanrei-packages
```

फिर पैक की गई दोनों फ़ाइलें एक ही कमांड से अपने प्रोजेक्ट में इंस्टॉल करें, ताकि React पैकेज को Web पैकेज अपने बग़ल में मिल जाए:

```sh
npm install path/to/tanrei-packages/tanrei-web-*.tgz path/to/tanrei-packages/tanrei-react-*.tgz
```

## इस्तेमाल

कंपोनेंट रेंडर होने से पहले स्टाइलशीट एक बार लोड करें: `tanrei.css` में पेज का बेस, टोकन और पैकेज की बाक़ी सारी स्टाइलशीट एक फ़ाइल में हैं। उन्हें एक-एक करके लोड करने के लिए [वेब गाइड](https://tanrei.chnotchy.com/hi/getting-started/web/) देखें।

```tsx
import '@tanrei/web/tanrei.css';
import '@tanrei/web/words/en';
import { Button } from '@tanrei/react';

export function Toolbar({ onDeploy }: { onDeploy: () => void }) {
  return (
    <>
      <Button variant="filled" onClick={onDeploy}>
        डिप्लॉय करें
      </Button>
      <Button variant="text" size="small" disabled>
        रोल बैक करें
      </Button>
    </>
  );
}
```

प्रॉपर्टी के नाम वही हैं जो एलिमेंट के ऐट्रिब्यूट के हैं (`variant`, `size`, `disabled`)। इवेंट सामान्य React हैंडलर हैं। एलिमेंट का अपना इवेंट `on` और कैमल केस में इवेंट के नाम से सुना जाता है, जैसे React अपने इवेंट का नाम रखता है (`onKeyDown`): नेविगेशन ड्रॉअर `expandedchange` भेजता है, और आप उसे `onExpandedChange` से सुनते हैं।

`@tanrei/web/words/en` हर उस लेबल और संदेश के लिए सादी अंग्रेज़ी में एक शब्द देता है जिसे कंपोनेंट दिखाते या कहते हैं, जैसे ज़रूरी वाले टैग का या बंद करने वाले बटन का नाम; इसे छोड़कर `@tanrei/react` के `setWords()` से अपने शब्द भी दे सकते हैं। देखें [शब्द](https://tanrei.chnotchy.com/hi/foundations/words/)।

## हर डिज़ाइन सिस्टम की एक एंट्री

पैकेज में Tanrei के साथ आने वाले हर डिज़ाइन सिस्टम की एक एंट्री है, ताकि आपका एडिटर वही सुझाए, और टाइप जाँच वही स्वीकार करे, जो आपके सिस्टम में है:

| एंट्री | यह क्या एक्सपोर्ट करती है |
| --- | --- |
| `@tanrei/react` | डिफ़ॉल्ट सिस्टम, Tanrei, के कंपोनेंट। FAB मेन्यू, जो m3-like लेयर में रहता है, और सेगमेंटेड बटन, जिसे Tanrei शामिल नहीं करता, इसमें नहीं हैं; और जिस वेरिएंट को Tanrei शामिल नहीं करता, वह प्रॉप का मान नहीं है: `<TextField variant="outlined">` टाइप जाँच में पास नहीं होता |
| `@tanrei/react/m3-like`, `@tanrei/react/m3-expressive-like`, `@tanrei/react/cupertino` | उस प्रीसेट के कंपोनेंट, उसके वेरिएंट के साथ |
| `@tanrei/react/advanced` | उन्नत कंपोनेंट, यानी वे हिस्से जिनसे दूसरे कंपोनेंट बनते हैं: `TextInput`, `ModalLayer`, `Combobox` और बाकी। प्रोडक्ट आम तौर पर उनसे बना कंपोनेंट लिखता है: `TextField`, `Dialog`, `ComboboxField` |
| `@tanrei/react/all` | हर कंपोनेंट, चाहे वह किसी भी सिस्टम में हो: आपके अपने डिज़ाइन सिस्टम के लिए, और नया सिस्टम बनाने के लिए |

```tsx
import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
import { FabMenu, FabMenuItem, TextField } from '@tanrei/react/m3-like';
```

कोई कंपोनेंट हर एंट्री में वही है, इसलिए बंडलर अब भी सिर्फ़ वही रखता है जो आप इंपोर्ट करते हैं। हर एंट्री `setWords`, `missingWords` और `TanreiEvent` टाइप भी एक्सपोर्ट करती है। एंट्रियाँ हर सिस्टम की कंपोनेंट सूची, `@tanrei/web/systems/<id>.components.json`, से बनाई जाती हैं, जिसमें हर कंपोनेंट की एंट्री (`react.import`) लिखी होती है; आपके अपने सिस्टम की सूची, जिसे `tanrei build` लिखता है, `@tanrei/react/all` बताती है।

## सर्वर रेंडरिंग

कंपोनेंट सर्वर पर कस्टम एलिमेंट का टैग रेंडर करते हैं और ब्राउज़र में अपग्रेड होते हैं। जिन फ़्रेमवर्क में सर्वर और क्लाइंट अलग-अलग हैं, उनमें आप जो एंट्री इस्तेमाल करते हैं, उसे किसी क्लाइंट कंपोनेंट से इंपोर्ट करें, ताकि एलिमेंट की परिभाषाएँ ब्राउज़र में रजिस्टर हों।

> [!NOTE]
> **टिप्पणी**
>
> थीम, कंट्रास्ट, टोकन और फ़ॉन्ट ठीक वैसे ही काम करते हैं जैसा [Web गाइड](https://tanrei.chnotchy.com/hi/getting-started/web/) में बताया गया है; React पैकेज इनके ऊपर अपनी ओर से कुछ नहीं जोड़ता।