React Native ਵਿੱਚ components ਅਤੇ JSX ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

React Native **React ਦੇ component model ਅਤੇ JSX** ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ — UI ਨੂੰ ਮੁੜ ਵਰਤੇ ਜਾ ਸਕਣ ਵਾਲੇ **components** ਤੋਂ ਬਣਾਉਂਦੇ ਹਨ ਜੋ JSX ਵਾਪਸ ਕਰਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਵੈੱਬ ਲਈ React ਜਾਣਦੇ ਹੋ, ਤਾਂ ਇਹ ਸਿੱਧਾ ਸਥਿਰ ਹੁੰਦਾ ਹੈ; ਮੁੱਖ ਅੰਤਰ HTML ਤੱਤਾਂ ਦੀ ਜਗ੍ਹਾ ਨੇਟਿਵ 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 ਟੁਕੜੇ ਹਨ (JSX ਵਾਪਸ ਕਰਨ ਵਾਲੇ functions); ਉਹ **props** ਲੈਂਦੇ ਹਨ (inputs) ਅਤੇ trees ਵਿੱਚ ਸੰਜੋਗ ਕਰਦੇ ਹਨ — ਬਿਲਕੁਲ ਵੈੱਬ ਲਈ 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 ਵਿੱਚ ਡਾਟਾ ਪਾਸ ਕਰਦੇ ਹਨ; **state** (`useState` ਦੁਆਰਾ) ਬਦਲਣ ਵਾਲਾ ਡਾਟਾ ਰੱਖਦਾ ਹੈ ਜੋ re-renders ਨੂੰ ਟਰਿਗਰ ਕਰਦਾ ਹੈ — ਵੈੱਬ ਉੱਤੇ React ਮਾਡਲ ਵਾਂਗ ਹੀ। ## 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 (JSX ਵਾਪਸ ਕਰਨ ਵਾਲੇ ਮੁੜ ਵਰਤੇ ਜਾ ਸਕਣ ਵਾਲੇ UI ਟੁਕੜੇ ਜੋ props ਨੂੰ inputs ਵਜੋਂ ਲੈਂਦੇ ਹਨ ਅਤੇ trees ਵਿੱਚ ਸੰਜੋਗ ਕਰਦੇ ਹਨ) ਅਤੇ JSX (UI ਦਾ ਵਰਣਨ ਕਰਨ ਵਾਲੀ syntax ਜਿਸ ਵਿੱਚ embedded expressions ਹਨ) React Native development ਦੀ ਬੁਨਿਆਦ ਹਨ — ਵੈੱਬ ਲਈ React ਵਾਂਗ ਹੀ। **Props** (components ਵਿੱਚ ਡਾਟਾ ਪਾਸ ਕਰਨਾ) ਅਤੇ **state** (`useState` hook ਦੁਆਰਾ, ਬਦਲਣ ਵਾਲਾ ਡਾਟਾ ਰੱਖਦਾ ਹੈ ਜੋ re-renders ਨੂੰ ਟਰਿਗਰ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ ਇਹ React concepts ਉਹ ਹਨ ਕਿ ਜਿਵੇਂ React Native components ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਅਤੇ ਬਦਲਾਵ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦੇ ਹਨ — ਵੈੱਬ React ਵਾਂਗ ਬਿਲਕੁਲ ਹੀ। ਮੁੱਖ ਬਿੰਦੂ ਇਹ ਹੈ ਕਿ **React ਗਿਆਨ ਸਥਿਰ ਹੁੰਦਾ ਹੈ**: components, JSX, props, state, hooks (useState, useEffect, ਆਦਿ), composition, ਅਤੇ keys ਸਭ ਵੈੱਬ ਲਈ React ਵਿੱਚ ਜਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਮੁੱਖ ਅੰਤਰ native components (View, Text) ਦੀ ਵਰਤੋਂ HTML ਦੀ ਜਗ੍ਹਾ ਅਤੇ ਵੱਖਰੀ styling ਹੈ। ਇਹ ਸਥਿਰਤਾ React Native ਦੇ ਆਕਰਸ਼ਕ ਹੋਣ ਦਾ ਇੱਕ ਵੱਡਾ ਕਾਰਨ ਹੈ — React/ਵੈੱਬ developers ਦਾ ਵੱਡਾ ਪੂਲ ਆਪਣੇ ਬਹੁਤੇ ਮੌਜੂਦਾ ਗਿਆਨ ਨੂੰ native mobile apps ਬਣਾਉਣ ਲਈ ਸਿੱਧਾ ਲਾਗੂ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ native components ਅਤੇ platform specifics ਉੱਤੇ ਫੋਕਸ ਕਰਦਿਆਂ ਨੁਸਖਤ ਸਿੱਖਣ ਕਰਵ ਹੈ। ਕਿਉਂਕਿ React Native ਮੂਲ ਰੂਪ ਨਾਲ React ਹੈ (components, JSX, props, state, hooks) native UI ਉੱਤੇ ਲਾਗੂ ਕੀਤਾ, ਅਤੇ ਇਸ ਮਾਡਲ ਨੂੰ ਸਮਝਣਾ React Native apps ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਜਦਕਿ ਇਹ ਸਵੀਕਾਰ ਕਿਤਾ ਜਾਂਦਾ ਹੈ ਕਿ React ਗਿਆਨ ਸਿੱਧਾ ਸਥਿਰ ਹੁੰਦਾ ਹੈ (ਇੱਕ ਮੁੱਖ ਫਾਇਦਾ), React Native ਵਿੱਚ components ਅਤੇ JSX ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ, ਪੱਧਰੀ ਗਿਆਨ ਹੈ — React Native ਦਾ ਮੂਲ programming ਮਾਡਲ, apps ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ, ਅਤੇ ਖਾਸ ਤੌਰ ਤੇ ਮੁੱਲਵਾਨ React/ਵੈੱਬ ਹੁਨਰਾਂ ਨੂੰ React Native mobile development ਉੱਤੇ ਸਿੱਧਾ ਲਾਗੂ ਕਿਵੇਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਇਹ ਉਜਾਗਰ ਕਰਨ ਵਿੱਚ।