React Native, Facebook taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir mobil uygulama geli\u015ftirme \u00e7er\u00e7evesidir. Geli\u015ftiricilerin JavaScript ve React kullanarak hem Android hem de iOS platformlar\u0131 i\u00e7in yerel (native) mobil uygulamalar olu\u015fturmas\u0131na olanak tan\u0131r. Bu, “bir kere yaz, her yerde \u00e7al\u0131\u015ft\u0131r” felsefesini mobil d\u00fcnyaya ta\u015f\u0131yarak, ayr\u0131 ayr\u0131 platformlar i\u00e7in ayr\u0131 ayr\u0131 kod tabanlar\u0131 olu\u015fturma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. React Native’in g\u00fcc\u00fc, temel bile\u015fenlerinde yatmaktad\u0131r. Bu bile\u015fenler, bir uygulaman\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) olu\u015fturan temel yap\u0131 ta\u015flar\u0131d\u0131r ve modern mobil uygulama geli\u015ftirmenin vazge\u00e7ilmez unsurlar\u0131d\u0131r.<\/p>\n
Bu makalede, React Native’in temel bile\u015fenlerini derinlemesine inceleyecek, her birinin amac\u0131n\u0131, kullan\u0131m\u0131n\u0131 ve pratik \u00f6rneklerini ele alaca\u011f\u0131z. Bile\u015fenlerin nas\u0131l bir araya getirildi\u011fini, stil verildi\u011fini ve \u00f6zel bile\u015fenler olu\u015fturarak uygulaman\u0131z\u0131 nas\u0131l geni\u015fletebilece\u011finizi ke\u015ffedece\u011fiz. Amac\u0131m\u0131z, React Native d\u00fcnyas\u0131na ad\u0131m atan veya bilgilerini peki\u015ftirmek isteyen geli\u015ftiricilere kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n
React Native’in kalbinde, her \u015feyin bir bile\u015fen oldu\u011fu fikri yatar. K\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z par\u00e7ac\u0131klar bir araya gelerek karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri olu\u015fturur. Bu mod\u00fcler yakla\u015f\u0131m, kodun daha d\u00fczenli, bak\u0131m\u0131 daha kolay ve daha \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
React Native uygulamalar\u0131, JavaScript kodunu do\u011frudan \u00e7al\u0131\u015ft\u0131ran bir JavaScript \u00e7al\u0131\u015fma zaman\u0131 (runtime) ile yerel UI bile\u015fenleri aras\u0131nda bir k\u00f6pr\u00fc (bridge) kurarak \u00e7al\u0131\u015f\u0131r. Geli\u015ftiriciler JavaScript ile kod yazarken, React Native bu kodu al\u0131r ve platforma \u00f6zg\u00fc (Android i\u00e7in Java\/Kotlin, iOS i\u00e7in Objective-C\/Swift) yerel bile\u015fenlere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu sayede, uygulaman\u0131z WebView tabanl\u0131 hibrit uygulamalar gibi de\u011fil, ger\u00e7ek bir yerel uygulama gibi g\u00f6r\u00fcn\u00fcr ve hissettirir. Bile\u015fenler, bu k\u00f6pr\u00fcn\u00fcn temel unsurlar\u0131d\u0131r ve JavaScript katman\u0131ndan yerel katmana komutlar g\u00f6ndererek UI’y\u0131 g\u00fcnceller.<\/p>\n
React Native’de UI olu\u015ftururken JSX (JavaScript XML) ad\u0131 verilen bir s\u00f6zdizimi uzant\u0131s\u0131 kullan\u0131r\u0131z. JSX, JavaScript i\u00e7inde XML\/HTML benzeri bir yap\u0131 yazmam\u0131za olanak tan\u0131r. Bu, UI’n\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini do\u011frudan JavaScript kodu i\u00e7inde tan\u0131mlamay\u0131 \u00e7ok daha sezgisel hale getirir.<\/p>\n
\u00d6rnek:<\/p>\n
import React from 'react';\nimport { View, Text } from 'react-native';\n\nconst MyComponent = () => {\n return (\n \n Merhaba, React Native!<\/Text>\n <\/View>\n );\n};\n\nexport default MyComponent;<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte <\/code> ve <\/code> gibi etiketler, React Native’in yerel bile\u015fenleridir ve JSX arac\u0131l\u0131\u011f\u0131yla kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\nProps (Properties): Bile\u015fenler Aras\u0131 Veri Ak\u0131\u015f\u0131<\/h4>\n
Props, React Native’deki bile\u015fenler aras\u0131nda veri aktar\u0131m\u0131n\u0131n temel mekanizmas\u0131d\u0131r. Bir \u00fcst bile\u015fenden alt bile\u015fene veri g\u00f6ndermek i\u00e7in kullan\u0131l\u0131rlar. Props’lar tek y\u00f6nl\u00fcd\u00fcr (\u00fcstten alta do\u011fru akar) ve bir bile\u015fen taraf\u0131ndan al\u0131nd\u0131ktan sonra de\u011fi\u015ftirilemezler (read-only). Bu, bile\u015fenlerin tahmin edilebilir ve izole olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\u00d6rnek:<\/p>\n
import React from 'react';\nimport { View, Text } from 'react-native';\n\nconst Greeting = (props) => {\n return (\n \n Merhaba, {props.name}!<\/Text>\n <\/View>\n );\n};\n\nconst App = () => {\n return (\n \n Bu \u00f6rnekte, Greeting<\/code> bile\u015feni name<\/code> ad\u0131nda bir prop al\u0131r ve bu prop’u kullanarak ki\u015fiselle\u015ftirilmi\u015f bir mesaj g\u00f6r\u00fcnt\u00fcler. App<\/code> bile\u015feni, Greeting<\/code> bile\u015fenine farkl\u0131 name<\/code> prop’lar\u0131 g\u00f6ndererek iki farkl\u0131 selamlama olu\u015fturur.<\/p>\nState: Bile\u015fenin Dahili Durumunu Y\u00f6netme<\/h4>\n
State (durum), bir bile\u015fenin kendi i\u00e7inde y\u00f6netti\u011fi ve zamanla de\u011fi\u015febilen verilerdir. Kullan\u0131c\u0131 etkile\u015fimleri, API \u00e7a\u011fr\u0131lar\u0131ndan gelen veriler veya zamanlay\u0131c\u0131lar gibi olaylar sonucunda bile\u015fenin durumu de\u011fi\u015febilir ve bu de\u011fi\u015fimler genellikle UI’n\u0131n yeniden render edilmesine neden olur. Fonksiyonel bile\u015fenlerde useState<\/code> hook’u ile state y\u00f6netimi yap\u0131l\u0131r.<\/p>\n\u00d6rnek:<\/p>\n
import React, { useState } from 'react';\nimport { View, Text, Button } from 'react-native';\n\nconst Counter = () => {\n const [count, setCount] = useState(0); \/\/ count ad\u0131nda bir state ve onu g\u00fcncelleyen setCount fonksiyonu\n\n return (\n \n Say\u0131m: {count}<\/Text>\n