React Native ile Mobil Uygulama Geliştirmeye Başlangıç Rehberi

8Tk9...SPib

14 Jan 2024

React Native, hem iOS hem de Android için tek bir kod tabanıyla mobil uygulama geliştirmenin güçlü bir aracıdır. İşte başlamak için adımlar:

Adım 1: Geliştirme Ortamını Kurun

React Native ile başlamak için önce Node.js ve npm'in yüklü olduğundan emin olun. Daha sonra, React Native CLI'yi terminal veya komut istemcisine şu komutla yükleyin:

npm install -g react-native-cli

Bu adım, geliştirme ortamınızı kurarak React Native projelerinizi yönetmek için gerekli araçları edinmenizi sağlar.

Adım 2: Yeni Bir Proje Oluşturun

Yeni bir React Native projesi başlatmak için terminal veya komut istemcisine şu komutu yazın:

npx react-native init MyAwesomeApp

Bu adım, projenizi temel altyapısıyla birlikte oluşturacak ve projenizin ana dizinine bir dizi dosya ve klasör ekleyecektir. "MyAwesomeApp" kısmını projenizin adıyla değiştirerek projenizi başlatın.

Adım 3: Proje Dizinine Girin

Projeyi oluşturduktan sonra, projenizin ana dizinine geçmek için terminal veya komut istemcisine şu komutu yazın:

cd MyAwesomeApp

Bu adım, projenizin içine girmenizi sağlar ve bundan sonraki işlemleri bu dizin içinde gerçekleştirebilirsiniz.

Adım 4: Uygulamayı Başlatın

React Native uygulamanızı çalıştırmak için terminal veya komut istemcisine şu komutlardan birini yazın:

Android için:

npx react-native run-android

iOS için:

npx react-native run-ios

Bu adım, uygulamanızı belirlenen platformda başlatarak geliştirme sürecinizi başlatır. Her iki komutu da sırasıyla kullanarak Android veya iOS üzerinde uygulamanızı görebilirsiniz.

Adım 5: Kodu Düzenleyin

Proje dosyalarını Visual Studio Code veya tercih ettiğiniz başka bir kod düzenleyici ile açın. Ardından, App.js dosyasındaki varsayılan içeriği düzenleyerek uygulamanızı kişiselleştirin. Bu dosya, uygulamanızın ana bileşenini içerir ve buradan başlayarak uygulamanızı özelleştirmeye başlayabilirsiniz.

Dilerseniz birlikte ekrana BULB TOKEN yazısı ekleyelim, bu örneği App.js dosyasına ekleyebilirsiniz:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}><Text style={styles.text}>BULB TOKEN</Text></View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;

Bu örnekte, container stili ile flex ve justifyContent ile ekranın ortalandığı bir konteyner oluşturulmuştur. Ardından text stili ile yazı boyutu ve kalınlığı belirlenmiştir. Bu basit örneği kullanarak ekranı ortalamış ve "BULB TOKEN" yazısını eklemiş olacaksınız.

Adım 6: Canlı Yeniden Yükleme

Yaptığınız değişiklikleri canlı olarak görmek için uygulamayı çalışırken şu adımları takip edin:

Android için: Ctrl + M tuşlarına basın.
iOS için: Cmd + R tuşlarına basın.

Bu tuş kombinasyonları, uygulamanızı yeniden yükleyerek güncellemeleri hızlı bir şekilde görebilmenizi sağlar. Bu sayede gerçek zamanlı olarak yapılan değişiklikleri uygulamanızda test edebilirsiniz.

Adım 7: Uygulamayı Test Edin

Uygulamanızı simülatörde veya fiziksel bir cihazda test ederek geliştirmenin keyfini çıkarın. Hızlı geribildirim alarak uygulamanızı daha da iyileştirin ve kullanıcı deneyimini kontrol edin.

Sonuç

React Native ile mobil uygulama geliştirmeye başlamak artık çok daha kolay. Şimdi kendi bileşenlerinizi ekleyerek ve React ekosistemiyle etkileşime geçerek uygulamanızı genişletebilirsiniz.

Bu kısa rehber, React Native ile mobil uygulama geliştirmeye ilk adımınızı atmanıza yardımcı olacaktır. Başarılar dilerim!