React Native میں components اور JSX کیسے کام کرتے ہیں؟

Question

Accepted Answer

React Native **React کے component model اور JSX** استعمال کرتا ہے — UIs کو reusable **components** سے بناتا ہے جو JSX return کرتے ہیں۔ اگر آپ 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 reusable UI pieces ہیں (functions جو JSX return کرتے ہیں)؛ وہ **props** (inputs) لیتے ہیں اور trees میں compose ہوتے ہیں — بالکل React for web کی طرح، لیکن 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` کے ذریعے) changing data رکھتا ہے جو re-renders کو trigger کرتا ہے — web پر React model کی طرح۔ ## React knowledge منتقل ہوتی ہے ```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 knowledge براہ راست منتقل ہوتی ہے**۔ Components (reusable UI pieces جو JSX return کرتے ہیں، props کو inputs کے طور پر لیتے ہیں، اور trees میں compose ہوتے ہیں) اور JSX (وہ syntax جو UI کو embedded expressions کے ساتھ بیان کرتی ہے) React Native development کی بنیاد ہیں — بالکل React for web کی طرح۔ **Props** (components میں data بھیجنا) اور **state** (`useState` hook کے ذریعے، changing data رکھنا جو re-renders کو trigger کرتا ہے) کو سمجھنا ضروری ہے کیونکہ یہ React concepts ہیں جن کے ذریعے React Native components کو data ملتا ہے اور change manage ہوتی ہے — web React جیسے۔ اہم بات یہ ہے کہ **React knowledge منتقل ہوتی ہے**: components، JSX، props، state، hooks (useState، useEffect، وغیرہ)، composition، اور keys سب React for web کی طرح کام کرتے ہیں، اہم فرق native components (View، Text) استعمال کرنا ہے HTML کی جگہ اور مختلف styling۔ یہ transferability React Native کے appeal کی بڑی وجہ ہے — React/web developers کا بڑا pool اپنی موجودہ knowledge کو براہ راست native mobile apps بنانے میں apply کر سکتا ہے، relatively کم learning curve کے ساتھ جو native components اور platform specifics پر مرکوز ہے۔ چونکہ React Native بنیادی طور پر React (components، JSX، props، state، hooks) native UI پر لاگو ہے، اور اس model کو سمجھنا React Native apps بنانے کے لیے ضروری ہے جبکہ یہ تسلیم کرتے ہوئے کہ React knowledge براہ راست منتقل ہوتی ہے (ایک اہم فائدہ)، React Native میں components اور JSX کو سمجھنا ضروری، بنیادی knowledge ہے — React Native کا بنیادی programming model، apps بنانے کے لیے ضروری، اور خاص طور پر valuable جب React/web skills کتنا براہ راست React Native mobile development میں apply ہوتی ہیں اس کو highlight کرتے ہوئے۔