React Native ile Sıfırdan Mobil Uygulama Geliştirme Rehberi

React Native, modern mobil uygulama geliştirme dünyasının en popüler framework'lerinden biri. Bu rehberde, sıfırdan başlayarak profesyonel bir mobil uygulama geliştirme sürecini adım adım inceleyeceğiz.

İçindekiler

• Geliştirme Ortamının Kurulumu
• React Native Temel Kavramlar
• Component Yapısı ve State Yönetimi
• Navigation İşlemleri
• API Entegrasyonu

Geliştirme Ortamının Kurulumu

React Native geliştirmeye başlamak için öncelikle gerekli araçları kurmalıyız. Node.js, npm ve React Native CLI kurulumları ile başlayalım:

# Node.js ve npm kurulumu (Windows için)
# https://nodejs.org adresinden indirin

# React Native CLI kurulumu
npm install -g react-native-cli

# Yeni proje oluşturma
npx react-native init MobilUygulama

# Proje klasörüne git
cd MobilUygulama

# Uygulamayı başlat
npm start
        

React Native Temel Kavramlar

React Native'de mobil uygulama geliştirirken kullanacağımız temel bileşenler şunlardır:

// App.js
const App = () => {
  return (
    
      Merhaba React Native!
    
  );
};

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

export default App;
        

Component Yapısı ve State Yönetimi

React Native'de component'ler ve state yönetimi, uygulamanızın temelini oluşturur. İşte basit bir state yönetimi örneği:

// Counter.js
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    
      Sayaç: {count}
       setCount(count + 1)} 
      />
    
  );
};
        

Navigation İşlemleri

React Navigation kütüphanesi ile sayfa geçişlerini yönetebilirsiniz:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}
        

API Entegrasyonu

Fetch API kullanarak uzak sunuculardan veri çekme örneği:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    setData(json);
  } catch (error) {
    console.error(error);
  }
};