Birleştirme
- React Native kursu
- Orta seviye
- Ders 69/116
- 6 dk
Tüm parçaları birleştirerek çalışan bir e-ticaret uygulaması yazarsın.
Birleştirme
Son adımda tüm parçaları bağlarız. Bir useCart hook'u ekleriz: () => useContext(CartContext). Bu hook, sepete tek noktadan erişmeyi sağlar; her ekranda ayrı prop geçirmeden cart ve addToCart alınır.
Header'a Sepet: {cart.length} sayacı, detaya Sepete ekle butonu koyarız. Buton addToCart(selected) çağırır; ürün sepete eklenir ve sayaç anında artar. Böylece uygulama tek bir akışa kavuşur.
Uygulama useCart ve sepete ekle butonu
Bir useCart hook'u ekle (useContext(CartContext) döndürsün). App içinde const { cart, addToCart } = useCart() ile sepete eriş; header'da Sepet: {cart.length} göster; detayda <Text onPress={() => addToCart(selected)}>Sepete ekle</Text> butonu koy.
Başlangıç kodu
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
// useCart hook'unu ekle
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
// useCart ile sepet sayacını göster, detaya sepete ekle butonu koy
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Geri</Text>
</View>
);
}
return (
<View>
<Text>Mağaza</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}Örnek çözüm
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
function useCart() {
return useContext(CartContext);
}
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
const { cart, addToCart } = useCart();
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Geri</Text>
<Text onPress={() => addToCart(selected)}>Sepete ekle</Text>
</View>
);
}
return (
<View>
<Text>Sepet: {cart.length}</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}Uygulama tamam
Artık tüm parçalar bir arada: ürün verisi, FlatList listesi, state ile detay geçişi ve Context ile sepet. useCart sepete tek noktadan erişim sağlar; sayaç ve buton sepeti görünür kılar.
Bu yapı, gerçek bir uygulamada da aynıdır: veri, liste, detay ve paylaşılan sepet. Navigasyon kütüphanesi eklemek istersen selectedId yerine React Navigation kullanabilirsin; Context aynı kalır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useCart hook'u ne döndürür?
- useContext(CartContext) sonucunu Doğru cevap
- Yeni bir Context
- products dizisini
- selected ürünü
Açıklama: useCart, useContext(CartContext) döndürür.
2 Sepet sayacını yaz
<Text>Sepet: {____}</Text><Text>Sepet: {cart.length}</Text>Açıklama: cart.length sepetteki ürün sayısını verir.
3 Birleştirme kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useCart |
Sepete erişir |
cart.length |
Sepet sayısı |
addToCart(selected) |
Ürün ekler |
CartProvider |
Uygulamayı sarar |