React Native ਵਿੱਚ ਮੁਲ ਭਾਗ (core components) ਕਿਹੜੇ ਹਨ?

Question

Accepted Answer

React Native **View**, **Text**, **Image**, **ScrollView**, **TextInput** ਵਰਗੇ **ਮੁਲ ਭਾਗ** ਦਾ ਇੱਕ ਸਮੂਹ ਫੁਰਨ ਕਰਦਾ ਹੈ — ਜੋ ਮਰਜ਼ੀ UI ਤੱਤਾਂ ਨੂੰ ਮੈਪ ਕਰਦੇ ਹਨ। ਇਹ React Native UIs ਦੇ ਬਨਿਆਦੀ ਬਲਾਕ ਹਨ, ਜਿਨ੍ਹਾਂ ਦੀ ਵੈਬ HTML ਤੱਤਾਂ ਦੀ ਜਗ੍ਹਾ ਲਈ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ## ਮੁਲ ਭਾਗ (ਵੈਬ HTML ਦੇ ਅਤੁੱਤ) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## ਉਦਾਹਰਣ ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## ਵੈਬ ਤੋਂ ਮੁੱਖ ਅੰਤਰ ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## ਕਿਉਂ ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਮੁਲ ਭਾਗਾਂ ਨੂੰ ਸਮਝਣਾ React Native ਡਿਵੈਲਪਮੇਂਟ ਲਈ ਬਨਿਆਦੀ ਹੈ ਕਿਉਂਕਿ **ਇਹ ਹਰ React Native UI ਦੇ ਬਨਿਆਦੀ ਬਲਾਕ ਹਨ** — ਤੁਸੀਂ ਆਪ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਉਨ੍ਹਾਂ ਨੂੰ ਕੰਪੋਜ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਬਨਿਆਦੀ ਗਿਆਨ ਹੈ। React Native **ਆਪਣੇ ਭਾਗ** ਫੁਰਨ ਕਰਦਾ ਹੈ ਜੋ ਮਰਜ਼ੀ ਵਿਯੂਜ ਨੂੰ ਮੈਪ ਕਰਦੇ ਹਨ (ਵੈਬ HTML ਤੱਤਾਂ ਦੀ ਬਜਾਏ), ਅਤੇ ਮੁਖ ਭਾਗਾਂ ਨੂੰ ਸਮਝਣਾ — **View** (ਕੰਟੇਨਰ, ਜਿਵੇਂ div), **Text** (ਸਭ ਲੇਖ ਲਈ, ਮਹੱਤਵਪੂਰਨ ਨਿਯਮ ਕਿ ਸਭ ਲੇਖ Text ਕਾਤਬ ਦੇ ਅਂਦਰ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਵੈਬ ਨਾਲ ਭਿੰਨ), **Image**, **TextInput**, **ScrollView**, **FlatList** (ਲੰਬੀਆਂ ਸੂਚੀਆਂ ਲਈ ਮੁੜ ਵਰਤ), ਅਤੇ touchables/**Pressable** (ਟੈਪਸ ਭਾਲਣ ਲਈ) — ਕਿਸੇ ਵੀ React Native UI ਨੂੰ ਬਣਾਉਣ ਲਈ ਲਾਜ਼ਮੀ ਹੈ। ਵੈਬ ਤੋਂ **ਮੁੱਖ ਅੰਤਰ** ਨੂੰ ਸਮਝਣਾ ਖਾਸ ਮਹੱਤਵਪੂਰਨ ਹੈ ਵਿਅਕਤਮੁਲੀ/React ਡਿਵੈਲਪਰਾਂ ਲਈ ਜੋ React Native ਵਿੱਚ ਤਬਦੀਲ ਹੋ ਰਹੇ ਹਨ: div ਦੀ ਥਾਂ View ਅਤੇ p/span ਦੀ ਥਾਂ Text ਵਰਤਣਾ (ਸਭ-ਲੇਖ-ਇਨ-Text ਨਿਯਮ ਦੇ ਨਾਲ), style prop ਰਾਹੀਂ ਸਟਾਈਲਿੰਗ CSS ਕਲਾਸਾਂ/ਫਾਈਲਾਂ ਦੀ ਬਜਾਏ, onClick ਦੀ ਥਾਂ touchables/Pressable ਲਈ ਇੰਟਰ ਅੈਕਸ਼ਨਾਂ, ਅਤੇ ਹਰ ਚੀਜ਼ ਨੂੰ ਮੈਪ ਕਰਨ ਦੀ ਬਜਾਏ **ਲੰਬੀਆਂ ਸੂਚੀਆਂ ਲਈ FlatList ਵਰਤਣਾ** (ਜੋ ਮੁੜ ਵਰਤ/ਆਲਸੀ ਢੰਗ ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੈ) — ਇਹ ਅੰਤਰ ਆਮ ਅਡ਼ਿਕ ਸਮੱਸਿਆਵਾਂ ਹਨ ਜੋ ਮੁਲ ਭਾਗਾਂ ਨੂੰ ਸਮਝਣਾ ਸਪਸ਼ਟ ਕਰਦਾ ਹੈ। ਭਾਗ (React ਦੀ ਤਰ੍ਹਾਂ) UIs ਬਣਾਉਣ ਲਈ ਕੰਪੋਜ ਕਰਦੇ ਹਨ, View ਨੂੰ ਬਨਿਆਦੀ ਕੰਟੇਨਰ ਦੇ ਰੂਪ ਵਿੱਚ। ਕਿਉਂਕਿ ਮੁਲ ਭਾਗ ਹਰ React Native UI ਦੇ ਬਨਿਆਦੀ ਬਲਾਕ ਹਨ (ਤੁਸੀਂ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਨਿਰੰਤਰ ਵਰਤਦੇ ਹੋ) ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਸਮਝਣਾ ਅਤੇ ਇਹ ਕਿਵੇਂ ਵੈਬ HTML ਤੋਂ ਭਿੰਨ ਹਨ React Native ਐਪਸ ਬਣਾਉਣ ਲਈ ਬਨਿਆਦੀ ਹੈ (ਖਾਸ ਤੌਰ ਤੇ ਵਿਅਕਤਮੁਲੀ ਡਿਵੈਲਪਰਾਂ ਲਈ), ਮੁਲ ਭਾਗਾਂ ਨੂੰ ਸਮਝਣਾ ਲਾਜ਼ਮੀ, ਬਨਿਆਦੀ React Native ਗਿਆਨ ਹੈ — React Native UI ਦੀ ਬਨਿਆਦੀ ਸ਼ਬਦਾਵਲੀ, ਕਿਸੇ ਵੀ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਲਾਜ਼ਮੀ ਅਤੇ ਵਿਅਕਤਮੁਲੀ React ਗਿਆਨ ਨੂੰ ਮਰਜ਼ੀ ਕਾਨੂੰਨ ਮਾਡਲ ਵਿੱਚ ਅਨੁਕੂਲ ਕਰਨ ਲਈ, React Native ਡਿਵੈਲਪਮੇਂਟ ਲਈ ਮੁਖ ਯੋਗਤਾ।