React Native-ல் உள்ள மূல घटक (core components) என்ன?

React Native View, Text, Image, ScrollView, TextInput போன்ற மூல components களை வழங்குகிறது — இவை native UI elements-ல் map செய்யப்படுகின்றன. இவைதான் React Native UIs-ன் அடிப்படையான building blocks-ஆகும், web HTML elements-ன் பதிலாக பயன்படுத்தப்படுகின்றன.

மூல components (web HTML vs)

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>
  );
}

Web-ல் இருந்து உள்ள முக்கிய வேறுபாடுகள்

✓ 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-ஆக உள்ளது.