React Native Temelleri

Mobil Uygulama Geliştirmenin Yeni Yolu

Mobil uygulama geliştirmek artık daha erişilebilir ve verimli hale geldi. React Native, Facebook tarafından geliştirilen ve JavaScript kullanarak iOS ve Android için aynı anda uygulama geliştirmeyi mümkün kılan açık kaynaklı bir çerçeve (framework) sunmaktadır. Bu makalede, React Native’in temellerini anlamak ve kullanmak için gerekli adımları öğrenmek için başlangıç ​​seviyesinde bir rehber sunacağız.

React Native Nedir?

React Native, React.js’in mobil platformlara genişletilmiş bir versiyonudur. React.js, kullanıcı arayüzlerini oluşturmak için kullanılan bir JavaScript kütüphanesidir. React Native, aynı React.js gibi, bileşen tabanlı bir yapı sunar ancak bu sefer mobil uygulamalar için optimize edilmiştir.

Gerekli Araçlar

React Native projelerine başlamak için bilgisayarınıza Node.js, npm ve React Native Command Line Interface (CLI) kurmanız gerekmektedir. Bu adımları kolaylıkla takip edebilmek için codebak.com’un ilgili yazılarına göz atabilirsiniz.

İlgili Makaleler
  1. Node.js ve npm Kurulumu
  2. React Native CLI Kurulumu

İlk React Native Projenizi Oluşturun

React Native projenizi oluşturmak için terminali kullanarak aşağıdaki adımları takip edebilirsiniz:

bash
npx react-native init IlkProje
cd IlkProje

Bu komutlar, yeni bir React Native projesi oluşturacak ve projenin dizinine geçiş yapacaktır.

Temel Bileşenler ve JSX

React Native projeleri, kullanıcı arayüzünü oluşturmak için bileşenlerden oluşur. Bileşenler, yeniden kullanılabilir ve bağımsız yapı taşlarıdır. JSX ise JavaScript’e benzer bir sözdizimi ile React Native bileşenlerini oluşturmanıza olanak tanır.

jsx
import React from 'react';
import { View, Text } from 'react-native';
const MerhabaDunya = () => {
return (
<View>
<Text>Merhaba, Dünya!</Text>
</View>

);
};

export default MerhabaDunya;

Yukarıdaki örnek, basit bir React Native bileşeni olan “MerhabaDunya”yı göstermektedir. Bu bileşen, bir View içinde bir Text bileşeni içerir.

Hot Reload ve Debugging

React Native, hot reload özelliği sayesinde kodunuzu değiştirdiğinizde uygulamanın anında güncellenmesine olanak tanır. Ayrıca, geliştirme sırasında hata ayıklama yapmak için bir dizi araç sunar.

codebak.com’dan Daha Fazla Kaynak

React Native öğrenme sürecinizi daha da geliştirmek ve derinleştirmek için codebak.com’un React Native ile ilgili daha fazla kaynağına göz atabilirsiniz:

  1. React Native Nedir ve Nasıl Çalışır?
  2. React Native’de Stil ve Tasarım

Komponent İletişimi ve State Yönetimi

React Native projelerinde bileşenler arası iletişim ve durum yönetimi çok önemlidir. Bileşenler arasında veri iletmek için props kullanılır ve durumu yönetmek için state kullanılır. Örneğin:

jsx
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Sayac = () => {
const [sayac, setSayac] = useState(0);

const artir = () => {
setSayac(sayac + 1);
};

return (
<View>
<Text>Sayaç: {sayac}</Text>
<Button title=“Artır” onPress={artir} />
</View>

);
};

export default Sayac;

Yukarıdaki örnekte, “Sayac” bileşeni içinde bir state olan “sayac” ve bu state’i güncellemek için bir fonksiyon olan “artir” bulunmaktadır. Butona tıklandığında, sayac değeri artar.

API Entegrasyonu

React Native projeleri genellikle bir sunucudan veri çekme ihtiyacını karşılar. Bu işlemi gerçekleştirmek için fetch veya başka kütüphaneler kullanabilirsiniz.

jsx
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
const VeriCekmeOrnegi = () => {
const [veri, setVeri] = useState(null);

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then((response) => response.json())
.then((data) => setVeri(data))
.catch((error) => console.error(‘Veri çekme hatası: ‘, error));
}, []);

return (
<View>
{veri ? (
<Text>Çekilen Veri: {veri}</Text>
) : (
<Text>Veri çekiliyor…</Text>
)}
</View>

);
};

export default VeriCekmeOrnegi;

Bu örnekte, useEffect hook’u kullanılarak bileşen oluşturulduktan sonra otomatik olarak bir API’den veri çekilmektedir.

Navigasyon

React Native projelerinde birden çok ekran arasında geçiş yapmak için genellikle bir navigasyon kütüphanesi kullanılır. En popüler olanlardan biri React Navigation’dır.

bash
npm install @react-navigation/native @react-navigation/stack

Bu komut ile React Navigation’ı projenize ekleyebilir ve aşağıdaki gibi kullanabilirsiniz:

jsx
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const AnaEkran = () => {
// Ana ekran bileşeni
};

const DetayEkran = () => {
// Detay ekran bileşeni
};

const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“AnaEkran” component={AnaEkran} />
<Stack.Screen name=“DetayEkran” component={DetayEkran} />
</Stack.Navigator>
</NavigationContainer>

);
};

export default App;

Bu örnekte, iki ekran arasında geçiş yapmak için React Navigation kullanılmıştır.


Yerel Depolama ve Güvenlik

React Native projelerinde, uygulama verilerini cihazda saklamak ve güvenliğini sağlamak önemlidir. AsyncStorage gibi araçlar kullanılarak basit bir yerel depolama uygulanabilir.

jsx
import React, { useState, useEffect } from 'react';
import { View, TextInput, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const VeriDepolama = () => {
const [veri, setVeri] = useState();

useEffect(() => {
AsyncStorage.getItem(‘anahtar’)
.then((value) => setVeri(value))
.catch((error) => console.error(‘Veri alma hatası: ‘, error));
}, []);

const veriKaydet = async () => {
try {
await AsyncStorage.setItem(‘anahtar’, veri);
console.log(‘Veri kaydedildi!’);
} catch (error) {
console.error(‘Veri kaydetme hatası: ‘, error);
}
};

return (
<View>
<TextInput
placeholder=“Veri girin”
value={veri}
onChangeText={(text) =>
setVeri(text)}
/>
<Button title=“Veriyi Kaydet” onPress={veriKaydet} />
</View>

);
};

export default VeriDepolama;

Bu örnekte, AsyncStorage kullanılarak bir anahtar değer çiftiyle veri depolanmış ve alınmıştır.

Animasyonlar

React Native, kullanıcı deneyimini artırmak için animasyonları destekler. Örneğin, Animated API kullanılarak basit bir animasyon gerçekleştirebilirsiniz.

jsx
import React, { useState, useEffect } from 'react';
import { View, Text, Animated, Button } from 'react-native';
const AnimasyonOrnegi = () => {
const fadeAnim = new Animated.Value(0);

const fade = () => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
};

return (
<View>
<Animated.View
style={{
opacity: fadeAnim,
}}
>

<Text>Animasyonlu Metin</Text>
</Animated.View>
<Button title=“Animasyon Başlat” onPress={fade} />
</View>

);
};

export default AnimasyonOrnegi;

Bu örnekte, bir Animated.View kullanılarak metnin görünürlüğü animasyonlu bir şekilde değiştirilmiştir.

Test ve Dağıtım

React Native projelerinde test etme ve dağıtma süreçleri önemlidir. Jest gibi test kütüphaneleri ve App Store veya Google Play gibi platformlara uygulamanızı dağıtmak için özel araçlar kullanabilirsiniz.


Çeşitli Modüller ve API Entegrasyonu

React Native, bir dizi harika modül ve API’yi entegre etmek için geniş bir ekosistem sunar. Örneğin, kamera kullanımı, harita entegrasyonu veya sosyal medya paylaşımı gibi özellikler React Native modülleri aracılığıyla kolayca entegre edilebilir.

jsx
import React from 'react';
import { View, Button } from 'react-native';
import CameraModule from 'react-native-camera-module';
const KameraKullanimi = () => {
const handleCameraCapture = () => {
CameraModule.capturePhoto()
.then((photo) => {
console.log(‘Fotoğraf yakalandı:’, photo);
})
.catch((error) => {
console.error(‘Hata oluştu:’, error);
});
};

return (
<View>
<Button title=“Fotoğraf Çek” onPress={handleCameraCapture} />
</View>

);
};

export default KameraKullanimi;

Yukarıdaki örnekte, react-native-camera-module adlı bir modül kullanılarak basit bir kamera örneği görülmektedir. Benzer şekilde diğer modüller de projenize entegre edilebilir.

Çoklu Platform Desteği

React Native, tek bir kod tabanıyla hem iOS hem de Android için uygulama geliştirmeyi mümkün kılar. Ancak, platforma özgü kodlar yazma ihtiyacı doğabilir. Bu durumu yönetmek için “Platform API” kullanılabilir.

jsx

import { Platform } from 'react-native';

const platformOzellikleri = {
ios: ‘Bu özellik sadece iOS için geçerlidir.’,
android: ‘Bu özellik sadece Android için geçerlidir.’,
};

const PlatformOzellikleri = () => {
return (
<View>
<Text>{platformOzellikleri[Platform.OS]}</Text>
</View>

);
};

export default PlatformOzellikleri;

Bu örnekte, Platform.OS kullanılarak uygulamanın çalıştığı platforma özgü metinleri gösteren bir bileşen görülmektedir.

Internationalization (i18n) ve Lokalizasyon

Uygulamanızı farklı dillerde sunmak için React Native projelerinde i18n ve lokalizasyon kütüphanelerini kullanabilirsiniz. react-i18next gibi kütüphanelerle çok dilli desteği kolayca sağlayabilirsiniz.

bash
npm install i18next react-i18next
jsx
import React from 'react';
import { View, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
const LokalizasyonOrnegi = () => {
const { t } = useTranslation();

return (
<View>
<Text>{t(‘merhaba’)}</Text>
</View>

);
};

export default LokalizasyonOrnegi;

Bu örnekte, react-i18next kullanılarak çok dilli bir uygulama örneği görülmektedir.


Güvenlik ve İzinler

React Native projelerinde kullanıcı izinleri ve güvenlik önemlidir. Kamera, konum, depolama gibi cihaz özelliklerini kullanabilmek için uygun izinleri almak gerekir.

jsx
import React, { useEffect } from 'react';
import { View, Text, PermissionsAndroid } from 'react-native';
const KonumIzni = () => {
useEffect(() => {
const izinKontrol = async () => {
try {
const konumIzni = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: ‘Konum İzni’,
message: ‘Uygulama konumunuza erişmek istiyor.’,
buttonNeutral: ‘Daha Sonra Sor’,
buttonNegative: ‘İptal’,
buttonPositive: ‘Tamam’,
}
);

if (konumIzni === PermissionsAndroid.RESULTS.GRANTED) {
console.log(‘Konum izni verildi.’);
} else {
console.log(‘Konum izni reddedildi.’);
}
} catch (error) {
console.error(‘İzin alınamadı:’, error);
}
};

izinKontrol();
}, []);

return (
<View>
<Text>Konum İzni Kontrolü</Text>
</View>

);
};

export default KonumIzni;

Yukarıdaki örnekte, PermissionsAndroid kullanılarak Android cihazlarda konum izni alınmıştır. Benzer şekilde iOS cihazlarda da izin almak için farklı bir yöntem kullanılır.

Push Bildirimleri

Mobil uygulamalarda bildirimler, kullanıcıyla etkileşimi artırabilir. React Native projelerinde push bildirimleri entegre etmek için Firebase Cloud Messaging (FCM) veya OneSignal gibi servisler kullanılabilir.

bash
npm install react-native-firebase/react-native-firebase

React Native Firebase gibi kütüphaneleri entegre ederek, uygulamanıza push bildirim özelliklerini ekleyebilirsiniz.

Uygulama İzleme ve Analiz

Uygulamanızın performansını ve kullanımını takip etmek için analitik araçlar kullanabilirsiniz. React Native projelerinde popüler analitik servisler arasında Google Analytics veya Firebase Analytics bulunmaktadır.

Sonuç ve Kaynaklar

Bu geniş kapsamlı yazıda, React Native temellerini öğrenmek ve geliştirmek için birçok konuyu ele aldık. Ancak, React Native ekosistemi sürekli gelişiyor ve yeni özellikler ekleniyor. Bu nedenle, projelerinizi geliştirmek ve güncel kalmak adına düzenli olarak kaynaklara göz atmanız önemlidir.

React Native ile ilgili daha fazla detaylı bilgi, sorularınızın yanıtları ve örnek projeler için codebak.com’un React Native kategorisini inceleyebilirsiniz.


Verimli Debugging ve Performans İyileştirmeleri

React Native projelerinde hata ayıklama (debugging) ve performans iyileştirmeleri önemli adımlardır. React Native Debugger veya React DevTools gibi araçlar kullanarak uygulamanızdaki hataları bulabilir ve geliştirebilirsiniz. Ayrıca, uygulama performansını artırmak için kullanıcıya daha iyi bir deneyim sunacak optimizasyonlar yapabilirsiniz.

bash
npm install -g react-devtools

React DevTools’ü global olarak kurarak, geliştirme sürecinizde daha etkili bir hata ayıklama deneyimi yaşayabilirsiniz.

CI/CD ve Otomatik Dağıtım

Sürekli entegrasyon (CI) ve sürekli dağıtım (CD) süreçleri, React Native projelerinizin otomatik olarak test edilmesini, derlenmesini ve dağıtılmasını sağlar. Bu süreçleri kurgulamak ve yönetmek için popüler araçlar arasında Jenkins, Travis CI veya GitHub Actions bulunmaktadır.

Uygulama İkonları ve Temaları

Uygulama simgeleri (ikonları) ve temaları, uygulamanızın görünümünü kişiselleştirmenin önemli bir yolu olabilir. React Native projelerinde react-native-vector-icons gibi kütüphaneleri kullanarak çeşitli ikon setlerini entegre edebilir ve uygulama temalarınızı yönetebilirsiniz.

bash
npm install react-native-vector-icons

Bu kütüphane, birçok popüler ikon setini destekler ve uygulamanızın görsel tasarımını zenginleştirebilir.

TypeScript Entegrasyonu

TypeScript, statik tip kontrolleri ve gelişmiş IDE desteği sağlayarak React Native projelerinizde güvenliği artırabilir. react-native init komutu ile oluşturulan projenizi TypeScript’e dönüştürmek için ise react-native upgrade komutunu kullanabilirsiniz.

bash
npx react-native upgrade

Bu komut ile projenizi TypeScript uyumlu hale getirebilir ve güvenli bir kodlama deneyimi sağlayabilirsiniz.

Topluluk ve Yardımlaşma

React Native topluluğu oldukça büyük ve aktiftir. Sorularınızı sormak, projelerinizi paylaşmak ve diğer geliştiricilerle etkileşimde bulunmak için Reddit, Stack Overflow, veya Discord gibi platformları kullanabilirsiniz. Ayrıca, yerel veya online topluluk etkinliklerine katılarak diğer geliştiricilerle tanışabilir ve deneyimlerinizi paylaşabilirsiniz.

React Native projelerinizde daha fazla başarı ve verimlilik için bu yönergeleri takip etmeye devam edin!

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir