React Native View, Text, Image, ScrollView, TextInput போன்ற மூல components களை வழங்குகிறது — இவை native UI elements-ல் map செய்யப்படுகின்றன. இவைதான் React Native UIs-ன் அடிப்படையான building blocks-ஆகும், web HTML elements-ன் பதிலாக பயன்படுத்தப்படுகின்றன.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ 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
மூல components பற்றிய புரிதல் React Native development-க்கு அடிப்படையாக உள்ளது, ஏனெனில் இவைதான் ஒவ்வொரு React Native UI-ன் building block — இவற்றை compose செய்து interfaces கட்டுவீர்கள், எனவே இது அவசியமான அடிப்படை அறிவாகும்.
React Native அதன் சொந்த components வழங்குகிறது, அவை web HTML elements-க்கு பதிலாக native views-ல் map செய்யப்படுகின்றன, மேலும் essential ones-ஐ புரிந்துகொள்ளுதல் — View (container, div போன்றது), Text (அனைத்து text-க்கும், முக்கிய விதி என்பது அனைத்து text-ம் Text component-ல் இருக்க வேண்டும், web போல் அல்லாமல்), Image, TextInput, ScrollView, FlatList (efficient long lists-க்கு), மற்றும் touchables/Pressable (taps handle செய்ய) — இந்த அறிவு ஏதேனும் React Native UI கட்ட அவசியமாக உள்ளது.
web-ல் இருந்துள்ள முக்கிய வேறுபாடுகள் புரிந்துகொள்ளுதல் web/React developers-க்கு React Native-ல் மாறும் போது குறிப்பாக முக்கியமாக உள்ளது: div பதிலாக View, p/span பதிலாக Text (all-text-in-Text விதி), CSS classes/files பதிலாக style prop மூலம் styling, onClick பதிலாக touchables/Pressable interactions-க்கு, மற்றும் அனைத்தையும் map செய்வதற்கு பதிலாக FlatList long lists-க்கு (efficient/lazy rendering) — இந்த வேறுபாடுகள் பொதுவான stumbling blocks-ஆகும், மேலும் மூல components-ஐ புரிந்துகொள்ளுதல் இவற்றை தெளிவுபடுத்துகிறது.
Components compose செய்யப்படுகின்றன (React போல்) UIs கட்ட, View-ம் அடிப்படையான container ஆக உள்ளது.
மூல components ஒவ்வொரு React Native UI-ன் building block-ஆக உள்ளதால் (interfaces construct செய்ய constant-ஆக பயன்படுத்துவீர்கள்) மற்றும் இவற்றைப் புரிந்துகொள்ளுதல் மற்றும் web HTML-ல் இருந்து இவை எப்படி வேறுபடுகின்றன என்பது React Native apps கட்ட அடிப்படையாக உள்ளது (குறிப்பாக web developers-க்கு), மூல components-பற்றிய புரிதல் அத்যாவசிய, அடிப்படை React Native அறிவாக உள்ளது — React Native UI-ன் அடிப்படை சொல்லகம், ஏதேனும் interface கட்ட அவசியமான மற்றும் web React அறிவை native component model-ல் மாற்றுவதற்கு அவசியமான, React Native development-ன் core competency-ஆக உள்ளது.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை