React Native में components और JSX कैसे काम करते हैं?

Question

Accepted Answer

React Native **React के component model और JSX** का उपयोग करता है — पुन: प्रयोज्य **components** से UIs बनाना जो JSX लौटाते हैं। यदि आप web के लिए React जानते हैं, तो यह सीधे हस्तांतरित होता है; मुख्य अंतर HTML elements के बजाय native components का उपयोग करना है। ## Components और JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` Components पुन: प्रयोज्य UI टुकड़े हैं (functions जो JSX लौटाते हैं); वे **props** (inputs) लेते हैं और trees में compose होते हैं — ठीक web के लिए React की तरह, लेकिन native components के साथ। ## Props और state (React concepts) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** components में data पास करते हैं; **state** (`useState` के माध्यम से) बदलते हुए data को रखता है जो re-renders को trigger करता है — वही React model जैसा web पर है। ## React ज्ञान हस्तांतरित होता है ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## यह क्यों महत्वपूर्ण है React Native में components और JSX कैसे काम करते हैं, यह समझना मूलभूत है क्योंकि **React Native React के component model पर बना है**, इसलिए इसे समझना आवश्यक है, और एक प्रमुख लाभ यह है कि **React ज्ञान सीधे हस्तांतरित होता है**। Components (पुन: प्रयोज्य UI टुकड़े जो JSX लौटाते हैं, props को inputs के रूप में लेते हैं, और trees में compose होते हैं) और JSX (embedded expressions के साथ UI का वर्णन करने वाला syntax) React Native development की नींव हैं — वही जैसा web के लिए React में है। **Props** (components में data पास करना) और **state** (`useState` hook के माध्यम से, बदलते हुए data को रखना जो re-renders को trigger करता है) समझना आवश्यक है क्योंकि ये React concepts हैं जिनके माध्यम से React Native components data प्राप्त करते हैं और बदलाव का प्रबंधन करते हैं — web React के समान। मुख्य अंतर्दृष्टि यह है कि **React ज्ञान हस्तांतरित होता है**: components, JSX, props, state, hooks (useState, useEffect, आदि), composition, और keys सभी web के लिए React की तरह ही काम करते हैं, मुख्य अंतर HTML के बजाय native components (View, Text) का उपयोग और अलग styling है। यह हस्तांतरणीयता एक प्रमुख कारण है कि React Native आकर्षक है — React/web developers का बड़ा समूह native mobile apps बनाने के लिए अपने अधिकांश मौजूदा ज्ञान को सीधे लागू कर सकता है, native components और platform विशिष्टताओं पर केंद्रित अपेक्षाकृत छोटी learning curve के साथ। चूँकि React Native मूलतः native UI पर लागू किया गया React (components, JSX, props, state, hooks) है, और इस model को समझना React Native apps बनाने के लिए आवश्यक है जबकि यह पहचानना कि React ज्ञान सीधे हस्तांतरित होता है (एक प्रमुख लाभ), React Native में components और JSX समझना आवश्यक, मूलभूत ज्ञान है — React Native का मूल programming model, apps बनाने के लिए आवश्यक, और विशेष रूप से यह उजागर करने में मूल्यवान कि React/web skills React Native mobile development पर कितने सीधे लागू होते हैं।