Proje tasarımı
- React Native kursu
- Orta seviye
- Ders 65/116
- 6 dk
E-ticaret uygulamasının yapısını tasarlarsın.
Proje: E-ticaret
Bu projede küçük bir e-ticaret uygulaması yapacağız. Üç ekran olacak: ürün listesi, ürün detayı ve sepet. Veriyi bir products dizisinde tutacağız; seçilen ürünü state ile, sepeti ise Context ile yöneteceğiz.
Her ders bir parça ekler ve önceki dersin kodu üzerine kurulur. Önce ürün verisini tanımlar, sonra listeyi, ardından detayı ve sepeti bağlarız. Son ders her şeyi birleştirir.
Ürün veri modeli
Her ürün bir nesne olarak tutulur: { id: '1', name: 'Kalem', price: 20 }. id benzersiz anahtar, name görünen ad, price fiyat. FlatList id'yi keyExtractor için kullanır.
Ürünleri bir diziye koy: const products = [...]. Bu dizi uygulamanın veri kaynağıdır; listeleme, detay ve sepet hep buradan okur.
Uygulama Ürün verisini tanımla
Bir products dizisi tanımla. İçinde en az iki ürün olsun; her ürünün id, name ve price alanları bulunsun.
Başlangıç kodu
import React from 'react';
import { Text, View } from 'react-native';
// Ürün verisini buraya tanımla
export default function App() {
return (
<View>
<Text>Mağaza</Text>
</View>
);
}Örnek çözüm
import React from 'react';
import { Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
];
export default function App() {
return (
<View>
<Text>Mağaza</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sepet state'i neden Context ile tutuluyor?
- Her ekrandan erişilecek Doğru cevap
- Yalnızca bir ekranda lazım
- Style için gerekli
- FlatList gerektirir
Açıklama: Sepete birden fazla ekrandan erişilir; Context bunu paylaştırır.
2 Fiyat alanını yaz
{ id: '1', name: 'Kalem', ____: 20 }{ id: '1', name: 'Kalem', price: 20 }Açıklama: price alanı ürünün fiyatını tutar.
3 Bileşenleri eşleştir
| Kavram | Anlamı |
|---|---|
products |
Veri dizisi |
FlatList |
Liste çizen bileşen |
Context |
Paylaşılan sepet |
state |
Seçilen ürün |