Kaip React Native komponentai ir JSX veikia?

Question

Accepted Answer

React Native naudoja **React komponentų modelį ir JSX** — UI kuriami iš pakartotinai naudojamų **komponentų**, kurie grąžina JSX. Jei žinote React žiniatinkliui, tai tiesiogiai perkeliasi; pagrindinis skirtumas — naudojimas nuo elementai vietoje HTML elementų. ## Komponentai ir 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 */} ); } ``` Komponentai yra pakartotinai naudojami UI elementai (funkcijos, grąžinančios JSX); jie gauna **properties** (įvestis) ir sudaromi į medžius — būtent kaip React žiniatinkliui, bet su nuo elementais. ## Properties ir būsena (React koncepcijos) ```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 */} ); } ``` **Properties** perduoda duomenis į komponentus; **būsena** (per `useState`) laiko besikeičiančius duomenis, kurie suaktyvina iš naujo atvaizduojimą — tas pats React modelis, kaip internete. ## React žinios perkeliasi ```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. ``` ## Kodėl tai svarbu Supratimas, kaip komponentai ir JSX veikia React Native, yra fundamentalus, nes **React Native yra pagrįstas React komponentų modeliu**, todėl jį suprasti yra būtina, o pagrindinis privalumas yra tas, kad **React žinios tiesiogiai perkeliasi**. Komponentai (pakartotinai naudojami UI elementai, grąžinantys JSX, priimantys properties kaip įvestį ir sudarantys medžius) ir JSX (sintaksė, aprašanti UI su įtaisytomis išraiškomis) yra React Native kūrimo pagrindas — tas pats kaip React žiniatinkliui. Supratimas apie **properties** (duomenų perdavimas į komponentus) ir **būseną** (per `useState` hook, laikant besikeičiančius duomenis, kurie suaktyvina iš naujo atvaizduojimą) yra būtinas, nes šios React koncepcijos yra tai, kaip React Native komponentai gauna duomenis ir valdo pokyčius — identiškai žiniatinklio React. Pagrindinis dalykas yra tas, kad **React žinios perkeliasi**: komponentai, JSX, properties, būsena, hook'ai (useState, useEffect ir kt.), sudėtis ir raktai veikia taip pat, kaip React žiniatinkliui, o pagrindiniai skirtumai yra savų komponentų (View, Text) naudojimas vietoje HTML ir skirtingos stilizacijos. Ši perdvarinimas yra pagrindinė priežastis, dėl kurios React Native yra patraukli — didelis React/žiniatinklio kūrėjų skaičius gali tiesiogiai pritaikyti daugumą savo esamų žinių kuriant vietines mobiliųjų programėles su santykinai mažu mokymosi kreive, sutelkta į savus komponentus ir platformos specifiką. Kadangi React Native iš esmės yra React (komponentai, JSX, properties, būsena, hook'ai), pritaikytas savoms UI, o šio modelio supratimas yra būtinas React Native programėlėms kurti, kartu žinojus, kad React žinios tiesiogiai perkeliasi (pagrindinis privalumas), supratimas apie komponentus ir JSX React Native yra būtinas, fundamentalus žinias — pagrindinis React Native programavimo modelis, būtinas programėlėms kurti, ir ypač vertingas, kadangi parodo, kaip tiesiogiai React/žiniatinklio įgūdžiai taikomi React Native mobilių programėlių kūrimui.