React dünyası sürekli evrim geçiriyor ve geliştiricilerin bu hıza ayak uydurması kritik önem taşıyor. Bu makalede, TanStack Query ile veri yönetimi, React Router ile gelişmiş navigasyon, React Server Components (RSC) ile performans optimizasyonları, Nitro Modules, Expo Workflows ve iOS Canlı Etkinlikleri gibi öne çıkan konuları derinlemesine inceleyeceğiz. Modern CSS ve HTML teknikleriyle kullanıcı arayüzü deneyimini nasıl geliştirebileceğinizi öğrenirken, en güncel React trendlerine hakim olacaksınız.

React Ekosistemine Genel Bakış ve Neden Sürekli Öğrenmeliyiz?

Web geliştirme dünyası, özellikle de React ekosistemi, inanılmaz bir hızla ilerliyor. Her hafta yeni kütüphaneler, framework güncellemeleri ve geliştirici araçları ortaya çıkıyor. Bu dinamik ortamda, yerinizde saymak, rekabette geri kalmak anlamına gelebilir. Geliştiriciler olarak, sadece mevcut bilgimizle yetinmek yerine, sürekli öğrenme ve kendimizi geliştirme kültürünü benimsemek zorundayız. Çünkü bugün “en iyi pratik” olarak kabul edilen bir yöntem, yarın daha optimize edilmiş bir yaklaşımla yer değiştirebiliyor.

React, bileşen tabanlı yapısıyla, deklaratif programlama anlayışıyla ve zengin ekosistemiyle modern web uygulamalarının vazgeçilmezi haline geldi. Ancak bu ekosistemin büyüklüğü, beraberinde öğrenme eğrisinin karmaşıklığını da getiriyor. Veri yönetimi için Redux’tan Zustand’a, navigasyon için eski React Router sürümlerinden v6’ya, sunucu tarafı renderlamadan (SSR) statik site oluşturmaya (SSG) ve şimdi de React Server Components (RSC) gibi tamamen yeni paradigmalara geçişler, geliştiricileri sürekli tetikte olmaya zorluyor.

Bu makalede ele alacağımız konular, React geliştiricilerinin bugün ve gelecekte karşılaşacağı temel zorluklara ve bu zorlukları aşmak için kullanabilecekleri en güncel araçlara odaklanıyor. TanStack Query ile karmaşık veri çekme işlemlerini basitleştirmekten, React Router’ın yeni özellikleriyle daha performanslı ve yönetilebilir navigasyonlar oluşturmaya; React Server Components’ın sunduğu performans avantajlarından, Nitro Modules ile sunucu tarafı optimizasyonlarına kadar geniş bir yelpazeyi kapsayacağız. Ayrıca, Expo Workflows ile mobil uygulama geliştirme süreçlerini hızlandırırken, iOS Canlı Etkinlikleri ile kullanıcı etkileşimini artırma yollarını ve modern CSS ile HTML tekniklerinin arayüz tasarımındaki gücünü keşfedeceğiz. Tüm bu yenilikler, daha hızlı, daha güvenli ve daha kullanıcı dostu uygulamalar geliştirmemize olanak tanıyor.

Sürekli öğrenme, sadece yeni teknolojilere adapte olmakla kalmaz, aynı zamanda problemlere daha yaratıcı çözümler üretme yeteneğimizi de geliştirir. Geliştirici topluluğunun bir parçası olarak, bu haftalık React bültenleri gibi kaynakları takip etmek, sektördeki en son gelişmeleri yakalamak için harika bir yoldur. Kendinizi sürekli geliştirerek, kariyerinizde bir adım öne geçebilir ve daha tatmin edici projelerde yer alabilirsiniz.

TanStack Query (React Query) ile Veri Yönetimi Nasıl Kolaylaşır?

React uygulamalarında veri çekme (data fetching), önbellekleme (caching), senkronizasyon ve güncelleme işlemleri genellikle karmaşık ve tekrarlayıcı bir süreçtir. Geleneksel yöntemlerle, bu işlemleri yönetmek için birçok useState ve useEffect kancası kullanmak, kodun okunabilirliğini ve bakımını zorlaştırabilir. İşte tam bu noktada TanStack Query (eski adıyla React Query) devreye girerek bu süreci devrim niteliğinde basitleştiriyor ve geliştirici deneyimini önemli ölçüde iyileştiriyor.

TanStack Query, bir “server-state” yönetim kütüphanesidir. Yani, uygulamanızın sunucudan gelen verilerle ilgili durumunu (yükleniyor, hata, başarı vb.) yönetmek için tasarlanmıştır. Bu kütüphane, sadece veri çekmekle kalmaz, aynı zamanda çekilen verileri otomatik olarak önbelleğe alır, arka planda günceller, pencere odağına göre yeniden çeker (refetch on window focus), değişen ağ bağlantısına göre verileri günceller ve hatta optimistik kullanıcı arayüzü güncellemeleri yapmanızı sağlar. Bu özellikler sayesinde, geliştiriciler daha az boilerplate kod yazarak uygulamanın iş mantığına odaklanabilirler.

Yeni Başlayanlar İçin: Temel Veri Çekme

TanStack Query kullanmaya başlamak oldukça basittir. Öncelikle, QueryClientProvider ile uygulamanızı sarmalamanız ve useQuery kancasını kullanmanız gerekir. Bir örnekle açıklayalım:

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import React from 'react';

const queryClient = new QueryClient();

function Todos() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(res => res.json())
  });

  if (isLoading) return 
Yükleniyor...
;
  if (error) return 
Bir hata oluştu: {error.message}
;

  return (
    

      
Yapılacaklar Listesi
      

        {data.map(todo => (
          
{todo.title}
        ))}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}
export default App;

Bu örnekte queryKey: ['todos'] sorgunuzu benzersiz bir şekilde tanımlar. Aynı anahtarla başka bir yerde useQuery kullanırsanız, TanStack Query otomatik olarak önbelleğe alınmış veriyi döndürür ve gerekirse arka planda güncellemeler yapar. Bu, hem sunucu yükünü azaltır hem de kullanıcı deneyimini iyileştirir.

Orta Düzey Kullanım: Veri Geçersiz Kılma ve Arka Plan Güncelleme

Veri çekmenin ötesinde, TanStack Query verilerinizi güncel tutmak için güçlü mekanizmalar sunar. Örneğin, bir "yapılacaklar" öğesi ekledikten sonra listenin otomatik olarak güncellenmesini isteyebilirsiniz. Bunun için queryClient.invalidateQueries metodunu kullanırız.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function AddTodo() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation({
    mutationFn: (newTodo) => fetch('/api/todos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newTodo)
    }).then(res => res.json()),
    onSuccess: () => {
      // 'todos' anahtarına sahip tüm sorguları geçersiz kılar ve yeniden çekilmesini sağlar
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const title = event.target.elements.title.value;
    addTodoMutation.mutate({ title });
  };

  return (
    

      
      Ekle
      {addTodoMutation.isError && 
Ekleme hatası: {addTodoMutation.error.message}
}
    
  );
}

onSuccess callback içinde invalidateQueries çağırarak, bir değişiklik olduğunda ilgili verilerin güncellenmesini sağlıyoruz. Bu, kullanıcıların her zaman en güncel veriyi görmesini temin eden güçlü bir mekanizmadır.

İleri Düzey İpuçları: Optimistik Güncellemeler ve Performans

Optimistik güncellemeler, kullanıcı deneyimini önemli ölçüde iyileştiren bir tekniktir. Bir veri değişikliği isteği gönderildiğinde (örneğin bir gönderiyi beğenmek), sunucudan yanıt gelmeden önce UI'yı güncelleriz. Eğer işlem başarısız olursa, UI'yı eski durumuna geri alırız. Bu, uygulamanın daha hızlı ve tepkisel hissetmesini sağlar.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function ToggleTodoStatus({ todo }) {
  const queryClient = useQueryClient();

  const toggleStatusMutation = useMutation({
    mutationFn: (updatedTodo) => fetch(/api/todos/{updatedTodo.id}, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(updatedTodo)
    }).then(res => res.json()),
    // Optimistik güncelleme başlangıcı
    onMutate: async (newTodo) => {
      await queryClient.cancelQueries({ queryKey: ['todos'] }); // Çakışan sorguları iptal et
      const previousTodos = queryClient.getQueryData(['todos']); // Mevcut veriyi kaydet
      queryClient.setQueryData(['todos'], (old) => // UI'yı optimistik olarak güncelle
        old.map(t => (t.id === newTodo.id ? { ...t, completed: newTodo.completed } : t))
      );
      return { previousTodos }; // Context olarak geri dön
    },
    // Hata durumunda UI'yı geri al
    onError: (err, newTodo, context) => {
      queryClient.setQueryData(['todos'], context.previousTodos);
    },
    // Başarı veya hata durumunda sorguyu yeniden çek
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });

  const handleToggle = () => {
    toggleStatusMutation.mutate({ ...todo, completed: !todo.completed });
  };

  return (
    
      {todo.completed ? 'Tamamlandı' : 'Beklemede'}
    
  );
}

TanStack Query, modern web uygulamalarındaki veri yönetimi yükünü önemli ölçüde hafifleten, geliştiricilere güçlü araçlar sunan vazgeçilmez bir kütüphanedir. Daha fazla bilgi için fatihsoysal.com adresini inceleyebilirsiniz.

React Router v6 ve Ötesi: Navigasyon Deneyimleri Nasıl Optimize Edilir?

React uygulamalarında sayfa ve bileşenler arası geçişleri yönetmek, kullanıcı deneyimi açısından kritik bir faktördür. React Router, bu navigasyon ihtiyaçlarını karşılamak için geliştirilmiş en popüler kütüphanelerden biridir. Özellikle v6 sürümüyle birlikte, hook tabanlı API'ler, nested routing (iç içe rotalama) ve daha performanslı veri yükleme mekanizmaları gibi birçok yenilik sunarak geliştirici deneyimini bir üst seviyeye taşımıştır.

React Router v6, özellikle ve bileşenlerinin daha sezgisel kullanımıyla öne çıkıyor. Artık rotalarınızı hiyerarşik bir yapıda tanımlayabilir, bu da kodu daha düzenli ve anlaşılır hale getirebilirsiniz. Ayrıca, bileşeni sayesinde iç içe rotalarda ortak layout'ları kolayca kullanabilir, kod tekrarını azaltabilirsiniz. Bu yenilikler, özellikle büyük ve karmaşık uygulamalarda navigasyon yönetimini önemli ölçüde basitleştiriyor.

Yeni Başlayanlar İçin: Temel Rota Tanımlamaları

React Router v6 ile temel bir navigasyon kurmak oldukça kolaydır. BrowserRouter ile uygulamanızı sarmaladıktan sonra, içinde bileşenlerini kullanarak rotalarınızı tanımlayabilirsiniz. bileşeni ise sayfalar arası gezinmeyi sağlar.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() { return 
Anasayfa
; }
function About() { return 
Hakkımızda
; }
function Contact() { return 
İletişim
; }

function App() {
  return (
    
      
      
        } />
        } />
        } />
      
    
  );
}
export default App;

Orta Düzey Kullanım: İç İçe Rotalar ve Dinamik Parametreler

React Router v6, iç içe rotalama (nested routing) ve dinamik URL parametrelerini yönetme konusunda oldukça esneklik sunar. Örneğin, bir kullanıcı paneli veya ürün detay sayfaları gibi yapılar için bu özellikler büyük kolaylık sağlar. useParams hook'u ile URL'den parametreleri alabilir, ile ana rotanın child rotalarını render edebilirsiniz.

import { Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

function DashboardLayout() {
  return (
    

      
Yönetim Paneli
      
      

       {/* İç içe rotaların bileşenleri burada render edilir */}
    
  );
}

function Profile() {
  const { userId } = useParams(); // /dashboard/profile/:userId gibi rotalar için
  return 
Profil Sayfası {userId ? (Kullanıcı ID: {userId}) : ''}
;
}
function Settings() { return 
Ayarlar Sayfası
; }

// Ana uygulamadaki Routes yapısı

  }>
    } />
    } />
    } />
    Dashboard ana sayfası} /> {/* /dashboard için varsayılan içerik */}
  

İleri Düzey İpuçları: Veri Yükleyiciler (Loaders) ve Aksiyonlar (Actions)

React Router v6.4+ ile gelen loader ve action fonksiyonları, navigasyon sırasında veri çekme ve gönderme işlemlerini doğrudan rotalarla ilişkilendirerek uygulama performansını ve geliştirici deneyimini büyük ölçüde artırıyor. Bu özellikler, Next.js ve Remix gibi framework'lerden ilham almıştır ve sunucu tarafında veri işlemlerini yürütmek için idealdir (örneğin, React Server Components ile). Bu yaklaşımla, bileşenleriniz veri çekme mantığından ayrılır ve daha temiz kalır.

import { createBrowserRouter, RouterProvider, useLoaderData, Form, redirect } from 'react-router-dom';

// Loader fonksiyonu: rota yüklendiğinde çalışır
async function usersLoader() {
  const res = await fetch('/api/users');
  return res.json();
}

// Action fonksiyonu: Form gönderildiğinde veya bir action tetiklendiğinde çalışır
async function newUserAction({ request }) {
  const formData = await request.formData();
  const newUser = Object.fromEntries(formData);
  await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newUser),
  });
  return redirect('/users'); // Başarılı işlem sonrası yönlendirme
}

function UsersPage() {
  const users = useLoaderData(); // Loader'dan gelen veriyi kullan
  return (
    

      
Kullanıcılar
      

        {users.map(user => 
{user.name}
)}
      
      
Yeni Kullanıcı Ekle
      
 {/* Form bileşeni action'ı tetikler */}
        
        Ekle
      

    
  );
}

const router = createBrowserRouter([
  {
    path: "/users",
    element: ,
    loader: usersLoader, // Rota ile veri yükleyiciyi ilişkilendir
    action: newUserAction, // Rota ile action'ı ilişkilendir
  },
  // ... diğer rotalar
]);

function AppWithRouter() {
  return ;
}
export default AppWithRouter;

Bu yapılar, özellikle tam yığın (full-stack) React uygulamalarında, veri akışını ve performansını optimize etmek için güçlü bir temel sunar. React Router v6 ve ötesi, modern web uygulamalarının navigasyon ihtiyaçları için kapsamlı ve performans odaklı bir çözüm sunmaya devam ediyor.

React Server Components (RSC) Nedir ve Geliştirici Deneyimine Ne Katıyor?

React Server Components (RSC), React ekosistemindeki en heyecan verici ve potansiyel olarak en dönüştürücü yeniliklerden biridir. Temel amacı, hem geliştirici deneyimini iyileştirmek hem de uygulamaların performansını artırmaktır. Geleneksel React uygulamaları tamamen istemci tarafında (client-side) çalışırken, RSC'ler adından da anlaşılacağı gibi sunucu tarafında çalışabilen bileşenlerdir.

Peki, neden sunucu tarafında bileşenlere ihtiyacımız var? Bunun birkaç temel nedeni var:

1. Daha Küçük İstemci Paketi (Bundle Size): Sunucu bileşenleri, istemciye JavaScript kodu göndermez. Bu, uygulamanızın indirme boyutunu ve dolayısıyla yükleme süresini önemli ölçüde azaltır. Özellikle ilk yükleme (initial load) performansı için büyük bir avantajdır.
2. Daha Hızlı Veri Çekme: Sunucu bileşenleri, doğrudan veritabanına veya dahili API'lere erişebilir. Bu, istemcinin sunucuya API çağrısı yapıp yanıt beklemesi yerine, verinin sunucuda doğrudan bileşenle birlikte işlenmesi anlamına gelir. Ağ gecikmesini (network latency) azaltarak veri çekme sürelerini hızlandırır.
3. Güvenlik: Hassas veritabanı sorguları veya API anahtarları gibi bilgiler istemciye asla gönderilmez. Bu, uygulamanızın güvenlik duruşunu güçlendirir.
4. Daha İyi Kullanıcı Deneyimi: Performanstaki artış, kullanıcıların daha hızlı etkileşim kurabilen ve daha akıcı hissettiren uygulamalar deneyimlemesini sağlar.

RSC'ler, istemci bileşenleriyle sorunsuz bir şekilde bir arada çalışabilir. Genel olarak, etkileşimli olması gereken (onClick gibi event'ler alan veya useState, useEffect kullanan) bileşenler istemci bileşeni olarak kalırken, sadece veri gösteren veya sunucu tarafında işlem yapan bileşenler sunucu bileşeni olabilir. Bu ayrım, geliştiricilerin hangi bileşenin nerede çalışması gerektiğine karar vermesine olanak tanır ve uygulamanın en performanslı şekilde tasarlanmasına yardımcı olur.

Yeni Başlayanlar İçin: İstemci ve Sunucu Bileşeni Ayrımı

RSC'ler, dosya adı sonuna eklenen bir yönerge ile tanımlanır. Örneğin, .server.js veya .client.js gibi. Modern React çerçeveleri (Next.js App Router, Remix) bu ayrımı otomatik olarak yapar. use client direktifi ile bir bileşenin istemci bileşeni olduğunu belirtiriz. Varsayılan olarak, tüm bileşenler sunucu bileşeni olarak kabul edilir.

// app/components/ServerComponent.js (Varsayılan olarak Server Component)
// Bu bileşen sunucuda çalışır, veritabanına erişebilir.
import fs from 'fs/promises';

async function ServerComponent() {
  const data = await fs.readFile('data.txt', 'utf8'); // Sunucudan dosya okuma
  return (
    

      
Sunucu Bileşeni
      
Sunucudan gelen veri: {data}
       {/* Sunucu bileşeni, Client bileşeni çağırabilir */}
    
  );
}
export default ServerComponent;

// app/components/ClientComponent.js (İstemci Bileşeni)
// Bu bileşen istemcide çalışır, etkileşimli UI öğelerini içerir.
'use client';

import { useState } from 'react';

function ClientComponent() {
const [count, setCount] = useState(0);

return (

);
}
export default ClientComponent;

Bu örnekte, ServerComponent sunucuda çalışır ve doğrudan bir dosyayı okuyabilir. İçinde bir ClientComponent çağırsa bile, ClientComponent'in JavaScript kodu sadece istemciye gönderilir ve orada çalışır. Bu ayrım sayesinde, uygulamanın farklı bölümlerinin en uygun ortamda çalışması sağlanır.

İleri Düzey İpuçları: Server Actions ve Streaming

Server Actions, RSC'lerin en güçlü özelliklerinden biridir. İstemciden sunucu tarafında doğrudan fonksiyonları çağırabilmenizi sağlar. Bu, form gönderimleri, veri güncellemeleri veya herhangi bir sunucu işlemi için ek bir API katmanı oluşturma ihtiyacını ortadan kaldırır. Form bileşenlerinin doğrudan sunucu fonksiyonlarını tetikleyebilmesi, geliştirme sürecini büyük ölçüde hızlandırır.

// app/components/ProductForm.js
'use client'; // Bu form etkileşimli olduğu için client component olmalı

import { useState } from 'react';

export default function ProductForm() {
  const [name, setName] = useState('');

  // Bu bir Server Action olacak ve sunucuda çalışacak
  async function createProduct(formData) {
    'use server'; // Bu fonksiyonun server'da çalışacağını belirtir
    const productName = formData.get('name');
    console.log(Sunucuda ürün oluşturuluyor: {productName});
    // Veritabanına kaydetme, API çağırma vb. işlemler burada yapılır.
    // await db.products.create({ name: productName });
    return { success: true, message: {productName} başarıyla oluşturuldu. };
  }

  return (
    
 {/* action prop'una doğrudan server fonksiyonu */}
       setName(e.target.value)}
        placeholder="Ürün Adı"
      />
      Ürün Ekle
    
  );
}

Streaming (Akış) ise, sunucu bileşenlerinin istemciye parça parça gönderilmesini sağlar. Uzun süren veri çekme işlemleri bile tamamlanmadan önce UI'nın bir kısmı kullanıcıya gösterilebilir, bu da "algılanan performans"ı (perceived performance) artırır ve daha iyi bir ilk yükleme deneyimi sunar. Örneğin, bileşeni ile yavaş yüklenen kısımlar için placeholder'lar gösterebilir ve bunlar hazır olduğunda otomatik olarak render edilebilir.

RSC'ler, React'in geleceğinde önemli bir yer tutuyor ve geliştiricilerin daha hızlı, daha güvenli ve daha esnek uygulamalar oluşturmasına olanak tanıyor. Bu teknolojiyi benimsemek, modern web geliştirme pratiklerinde sizi bir adım öne çıkaracaktır.

Nitro Modules ile Sunucu Tarafı Optimizasyonları ve Performans Sırları Nelerdir?

Modern web uygulamaları, sadece istemci tarafında değil, sunucu tarafında da yüksek performans ve verimlilik bekler. Özellikle Nuxt, Remix gibi full-stack JavaScript framework'leri, sunucu tarafı işlevselliklerini optimize etmek için güçlü araçlar sunar. Nitro, bu framework'lerin (özellikle Nuxt 3'ün) temelini oluşturan, yüksek performanslı, çok yönlü bir sunucu motorudur. Nitro, geliştiricilere sunucu tarafı kod yazma, API endpoint'leri oluşturma ve middleware yönetimi konularında benzersiz bir esneklik ve performans sunar.

Nitro'nun temel amacı, sunucu tarafı JavaScript'i her yerde çalıştırabilmektir: sunucusuz (serverless) fonksiyonlar, WebAssembly (WASM) uyumlu ortamlarda, hatta Service Worker'lar aracılığıyla edge computing (uç bilişim) noktalarında. Bu çoklu dağıtım yeteneği, uygulamaların küresel olarak daha hızlı yanıt vermesini ve düşük gecikmeli hizmetler sunmasını sağlar. Geliştiriciler için ise, tek bir kod tabanıyla farklı dağıtım hedeflerine ulaşma kolaylığı anlamına gelir.

Yeni Başlayanlar İçin: Nitro'nun Temelleri ve API Roteleri

Nitro, bir framework içinde (örneğin Nuxt 3'te) kullanıldığında, server/api dizinindeki dosyaları otomatik olarak API roteleri olarak algılar. Bu, basit HTTP endpoint'leri oluşturmayı son derece kolaylaştırır.

// server/api/hello.ts
export default defineEventHandler(() => {
  return { message: 'Merhaba, Nitro API!' };
});

Yukarıdaki basit örnek, /api/hello adresine yapılan bir GET isteğine { message: 'Merhaba, Nitro API!' } yanıtını döndüren bir API endpoint'i oluşturur. defineEventHandler Nitro'nun sağladığı bir yardımcı fonksiyondur ve daha karmaşık HTTP isteklerini (GET, POST vb.) ele almak için kullanılabilir.

Orta Düzey Kullanım: Middleware ve Sunucusuz Fonksiyonlar

Nitro, middleware desteğiyle istekleri işleme ve dönüştürme yeteneği sunar. server/middleware dizinindeki dosyalar otomatik olarak her isteğin önüne eklenir. Bu, kimlik doğrulama, loglama veya istek başlıklarını düzenleme gibi işlemler için idealdir.

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  console.log('Middleware çalışıyor:', event.node.req.url);
  // Örneğin, bir kimlik doğrulama kontrolü burada yapılabilir
  // if (!isAuthenticated(event.node.req)) {
  //   throw createError({ statusCode: 401, statusMessage: 'Unauthorized' });
  // }
});

Ayrıca, Nitro, farklı bulut sağlayıcıları için optimize edilmiş sunucusuz fonksiyonlar oluşturabilir. AWS Lambda, Vercel Edge Functions, Netlify Functions gibi ortamlara tek bir komutla dağıtım yapabilir. Bu, altyapı yönetiminin yükünü azaltır ve uygulamanızın ölçeklenebilirliğini artırır.

İleri Düzey İpuçları: Custom Nitro Modules ve Edge Computing

Gelişmiş senaryolarda, kendi Nitro modüllerinizi oluşturarak Nitro'nun çekirdek işlevselliğini genişletebilirsiniz. Bu, özel entegrasyonlar, karmaşık veri katmanları veya özel performans optimizasyonları eklemek için harika bir yoldur. Örneğin, bir GraphQL sunucusu entegre etmek veya özel bir önbellekleme mekanizması kurmak için Nitro modülleri kullanılabilir.

Edge Computing, Nitro'nun parladığı bir başka alandır. Uygulamanızın kritik mantığını ve verisini, kullanıcıya coğrafi olarak en yakın sunucularda çalıştırmak, gecikmeyi (latency) en aza indirir ve yanıt sürelerini önemli ölçüde hızlandırır. Nitro, Vercel Edge Functions veya Cloudflare Workers gibi platformlarla entegre olarak, bu dağıtımı sorunsuz bir şekilde yapmanıza olanak tanır. Özellikle dinamik ve küresel ölçekli uygulamalar için bu, devrim niteliğinde bir performans artışı sağlar.

Özetle, Nitro, modern web uygulamalarının sunucu tarafı ihtiyaçlarını karşılamak için tasarlanmış güçlü ve esnek bir araçtır. Performans odaklı yaklaşımı, çoklu dağıtım yetenekleri ve kolay kullanımı sayesinde, geliştiricilerin daha hızlı ve daha ölçeklenebilir uygulamalar oluşturmasına yardımcı olur. Bu teknolojileri anlamak ve uygulamalarınıza entegre etmek, rekabet avantajı elde etmenizi sağlayacaktır.

Expo Workflows ve Canlı Etkinlikler (Live Activity) ile Mobil Uygulama Geliştirme Nasıl Hızlanır?

Mobil uygulama geliştirme, özellikle farklı platformlar (iOS ve Android) için ayrı kod tabanları yönetme zorluğu nedeniyle karmaşık bir süreç olabilir. React Native, bu zorluğu tek bir JavaScript kod tabanıyla çözmeye çalışırken, Expo bu süreci daha da basitleştirir ve hızlandırır. Expo, React Native projeleri oluşturmak, geliştirmek ve dağıtmak için kapsamlı bir araç ve hizmetler setidir. Özellikle hızlı prototipleme ve MVP (Minimum Viable Product) geliştirme için ideal bir platform sunar.

Expo'nun "Workflows" adı verilen iki ana modu vardır: Yönetilen (Managed) ve Özel (Custom). Yönetilen İş Akışı, Expo'nun tüm özelliklerinden tam olarak yararlanmanızı sağlar; örneğin, yerel modüllerle uğraşmadan cihaz özelliklerine erişim. Özel İş Akışı ise, yerel kod eklemeniz gerektiğinde projenizi tam bir React Native projesine dönüştürmenize olanak tanır, ancak Expo'nun kolaylıklarından hala faydalanabilirsiniz. Her iki durumda da, Expo, geliştirme sürecini önemli ölçüde hızlandırır ve tekrarlayan görevleri otomatikleştirir.

Yeni Başlayanlar İçin: Expo ile Hızlı Başlangıç

Expo CLI ile yeni bir proje başlatmak ve uygulamayı geliştirmek oldukça basittir. Expo Go uygulaması sayesinde, uygulamanızı gerçek bir cihazda veya simülatörde anında test edebilirsiniz, bu da geliştirme döngüsünü inanılmaz derecede hızlandırır.

npx create-expo-app MyFirstExpoApp
cd MyFirstExpoApp
npx expo start

Bu komutlarla bir Expo projesi oluşturup başlatabilirsiniz. npx expo start komutu, size bir QR kodu ve yerel bir URL sağlayarak telefonunuzdaki Expo Go uygulaması aracılığıyla uygulamayı anında çalıştırmanıza olanak tanır. Bu, yerel geliştirme ve hata ayıklama sürecini inanılmaz derecede kolaylaştırır.

Orta Düzey Kullanım: EAS Build ve EAS Update

Uygulamanızı App Store veya Google Play Store'a göndermek için Expo Application Services (EAS) devreye girer. EAS Build, bulutta uygulamanızın dağıtım paketlerini (APK, AAB, IPA) oluşturur. Bu, kendi yerel build ortamınızı kurma ve yönetme zahmetinden sizi kurtarır.

eas build --platform ios
eas build --platform android

EAS Update ise, uygulamanızın JavaScript kodunu, kullanıcıların uygulamayı yeniden indirmesine gerek kalmadan anında güncellemenizi sağlar. Bu, hata düzeltmeleri veya küçük özellik eklemeleri için son derece kullanışlıdır, çünkü yeni bir sürüm yayınlama ve mağaza inceleme sürecini beklemenize gerek kalmaz.

eas update --branch production

İleri Düzey İpuçları: iOS Canlı Etkinlikler (Live Activity) Entegrasyonu

iOS 16 ile tanıtılan Canlı Etkinlikler (Live Activity), kullanıcıların dinamik, gerçek zamanlı bilgileri doğrudan kilit ekranlarında veya Dynamic Island'da görmelerini sağlar. Bir spor maçı skoru, yemek siparişinin durumu veya bir sürüşün ilerleyişi gibi bilgileri canlı olarak sunmak için idealdir. Expo, expo-widget modülü aracılığıyla bu özelliği React Native uygulamalarına entegre etmeyi mümkün kılar.

Vaka Analizi: Yemek Teslimat Uygulaması

Bir yemek teslimat uygulamasında, kullanıcı sipariş verdiğinde, siparişin hazırlanma, yola çıkma ve teslim edilme aşamalarını anlık olarak Canlı Etkinlik aracılığıyla kilit ekranında gösterebilirsiniz. Bu, kullanıcının uygulamayı sürekli açıp kontrol etme ihtiyacını ortadan kaldırır ve şeffaf bir takip deneyimi sunar.

// Örnek bir Live Activity verisi gönderimi (sunucu tarafı)
// Bu kısım genellikle bir sunucu tarafından bir push notification ile tetiklenir.
// expo-server-sdk kullanılarak veya doğrudan APN'ye istek gönderilerek
// bir Live Activity payload'ı gönderilir.

// Örnek bir Live Activity başlatma/güncelleme mantığı (React Native tarafı)
// expo-widget veya benzeri bir modül aracılığıyla API çağrılır.
import * as LiveActivity from 'expo-live-activity'; // Varsayımsal modül

async function startDeliveryActivity(orderId) {
  const activityId = await LiveActivity.startActivity({
    id: orderId,
    attributes: { orderId },
    contentState: { status: 'Preparing', estimatedTime: '30 min' },
  });
  console.log('Live Activity başlatıldı:', activityId);
}

async function updateDeliveryActivity(activityId, newStatus, newTime) {
  await LiveActivity.updateActivity(activityId, {
    contentState: { status: newStatus, estimatedTime: newTime },
  });
  console.log('Live Activity güncellendi.');
}

// Kullanım örneği
// startDeliveryActivity('12345');
// setTimeout(() => updateDeliveryActivity('12345', 'On its way!', '15 min'), 10000);

Canlı Etkinlikler, mobil uygulamaların kullanıcılarıyla etkileşim kurma biçimini dönüştürüyor. Expo'nun bu tür yerel platform özelliklerini React Native geliştiricilerine sunma yeteneği, platformu daha da çekici hale getiriyor. Expo Workflows ve Canlı Etkinlikler, geliştiricilerin sadece daha hızlı değil, aynı zamanda daha etkileyici ve kullanıcı dostu mobil deneyimler oluşturmasına olanak tanır.

Modern CSS ve HTML Teknikleri: Kullanıcı Arayüzünde Fark Yaratmak İçin Neler Bilmeliyiz?

React, güçlü bir JavaScript kütüphanesi olsa da, nihayetinde oluşturduğu arayüz HTML ve CSS'ten oluşur. Bu nedenle, modern ve duyarlı web uygulamaları geliştirmek için en güncel CSS ve HTML tekniklerine hakim olmak hayati önem taşır. Sadece işlevsel değil, aynı zamanda estetik ve erişilebilir bir kullanıcı arayüzü sunmak, uygulamanızın başarısında büyük rol oynar. Gelişmiş CSS özellikleri ve semantik HTML kullanımı, hem geliştirici verimliliğini artırır hem de kullanıcı deneyimini zenginleştirir.

Son yıllarda CSS tarafında Flexbox ve Grid gibi layout araçlarının yanı sıra, değişkenler, clamp() gibi fonksiyonlar ve artık Container Queries gibi devrim niteliğinde özellikler hayatımıza girdi. HTML tarafında ise, semantik etiketlerin doğru kullanımı, erişilebilirliğin temelini oluşturuyor. Bu bölüm, bu modern yaklaşımları nasıl etkili bir şekilde kullanacağınızı açıklayacak.

Yeni Başlayanlar İçin: Semantik HTML ve CSS Değişkenleri

Semantik HTML, içeriğin anlamına göre uygun etiketlerin kullanılmasıdır (örneğin,

  


  

    
Hoş Geldiniz
    
Bu bir web sayfası içeriğidir.
  

:root {
  --primary-color: #007bff;
  --text-color: #333;
  --font-size-base: 16px;
}

body {
  font-family: sans-serif;
  color: var(--text-color);
  font-size: var(--font-size-base);
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

/* Flexbox Örneği */
.flex-container {
  display: flex;
  justify-content: space-between; /* Öğeleri yatayda aralarında boşluk bırakarak hizalar */
  align-items: center; /* Öğeleri dikeyde ortalar */
  gap: 20px; /* Öğeler arasına boşluk koyar */
}

/* CSS Grid Örneği */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
  gap: 20px;
}

/* Medya Sorgusu Örneği */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Küçük ekranlarda tek sütun */
  }
}

/* clamp() fonksiyonu ile dinamik font boyutu */
h1 {
  font-size: clamp(2rem, 5vw, 4rem); /* min 2rem, max 4rem, viewport genişliğine göre 5vw */
}

.card-container {
  container-type: inline-size; /* Bu öğeyi bir kapsayıcı sorgu bağlamı yapar */
}

@container (min-width: 400px) {
  .card-container .card-title {
    font-size: 1.5rem;
  }
  .card-container .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

// Örnek bir View Transition kullanımı (tarayıcı desteğine dikkat!)
async function navigateToNewPage() {
  if (!document.startViewTransition) {
    updateDOM(); // Fallback
    return;
  }

  document.startViewTransition(() => updateDOM()); // DOM güncellemesi burada
}

function updateDOM() {
  // Yeni sayfanın içeriğini DOM'a ekle/güncelle
  document.getElementById('content').innerHTML = 
Yeni Sayfa
Geçiş başarılı!;
}