React Native'de bileşenler ve JSX nasıl çalışır?

Question

Accepted Answer

React Native, **React'ın bileşen modeli ve JSX'i** kullanır — yeniden kullanılabilir **bileşenlerden** oluşan ve JSX döndüren UI'lar oluşturur. Web için React biliyorsanız, bu doğrudan aktarılır; ana fark, HTML öğeleri yerine yerel bileşenleri kullanmaktır. ## Bileşenler ve 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 */} ); } ``` Bileşenler, yeniden kullanılabilir UI parçalarıdır (JSX döndüren fonksiyonlar); **props** (girdiler) alır ve ağaçlara bağlanırlar — tıpkı web için React'ta olduğu gibi, ancak yerel bileşenlerle. ## Props ve state (React kavramları) ```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**, bileşenlere veri iletir; **state** (`useState` aracılığıyla), yeniden render tetikleyen değişken verileri tutar — web'deki React modeliyle aynıdır. ## React bilgisi aktarılır ```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. ``` ## Neden önemli React Native'de bileşenlerin ve JSX'in nasıl çalıştığını anlamak temel düzeyde önemlidir, çünkü **React Native, React'ın bileşen modeli üzerine inşa edilmiştir**, bunu anlamak gereklidir ve önemli bir avantaj, **React bilgisinin doğrudan aktarılmasıdır**. Bileşenler (JSX döndüren, girdiler olarak props alan ve ağaçlara bağlanan yeniden kullanılabilir UI parçaları) ve JSX (gömülü ifadeleri olan UI'ı açıklayan sözdizimi), React Native geliştirmenin temeli — web için React'ta olduğu gibi. **Props**'u (bileşenlere veri iletme) ve **state**'i (`useState` kancası aracılığıyla, yeniden render tetikleyen değişken verileri tutma) anlamak önemlidir, çünkü bu React kavramları, React Native bileşenlerinin veri almasının ve değişimi yönetmesinin yoludur — web React'ı ile aynı. Temel fikir, **React bilgisinin aktarılması**: bileşenler, JSX, props, state, kancalar (useState, useEffect, vb.), bileşim ve anahtarların tümü web için React'ta olduğu gibi çalışır, ana farklar yerel bileşenlerin (View, Text) HTML yerine kullanılması ve farklı stil olmasıdır. Bu aktarılabilirlik, React Native'nin çekici olmasının önemli bir nedenidir — geniş React/web geliştiriciler havuzu, mevcut bilgilerinin çoğunluğunu doğrudan yerel mobil uygulamalar oluşturmaya uygulayabilir; nispeten küçük bir öğrenme eğrisi yerel bileşenler ve platform özelliklerine odaklanmıştır. React Native esasen React (bileşenler, JSX, props, state, kancalar) yerel UI'ya uygulandığından ve bu modeli anlamak React Native uygulamaları oluşturmak için gerekli olduğundan ve React bilgisinin doğrudan aktarıldığını fark etmekten (önemli bir avantaj), React Native'de bileşenleri ve JSX'i anlamak gereklidir, temel düzey bilgisi — React Native'nin temel programlama modeli, uygulamalar oluşturmak için gereklidir ve özellikle React/web becerilerinin React Native mobil geliştirmeye ne kadar doğrudan uygulandığını vurgulamada değerlidir.