React Native
Birleştirme
Tüm parçaları birleştirerek çalışan bir quiz uygulaması yazarsın.
Birleştirme
Son derste tüm parçaları birleştirip çalışan bir QuizApp yazacağız. Bileşen ekrana gelince API'den soruları yükler, quiz akışını çalıştırır ve skoru gösterir. useState ile questions, index, score state'ini tutarsın.
useEffect içinde async function load tanımlar; fetch ile soruları yükler ve setQuestions(data) yaparsın. handleAnswer ile cevap kontrolü yapar, skoru günceller, sonraki soruya geçersin. Bu ders, önceki tüm parçaları bir araya getirir: Question modeli, fetch, useState, useEffect, handleAnswer. Sonuç, gerçek bir quiz uygulamasının çekirdeğidir. Bu projenin sonunda çalışan bir mini uygulaman olacak.
Uygulama QuizApp bileşeni yaz
Bir QuizApp bileşeni yaz. useState ile questions'ı [], index'i 0, score'u 0 olarak başlat. useEffect içinde async function load tanımla: await fetch("https://api.example.com/questions")'i const response'a, await response.json()'u const data'ya ata; setQuestions(data) yap. load()'u çağır. Boş bağımlılık dizisi [] kullan. const question = questions[index] yaz. function handleAnswer(i) yaz: i === question?.answer ise setScore(score + 1); her zaman setIndex(index + 1). Dönüşte <View><Text>{question?.question}</Text><Button title={question?.options?.[0]} onPress={() => handleAnswer(0)} /><Text>Skor: {score}</Text></View>.
Örnek çözümü göster
import { useEffect, useState } from "react";
import { Text, View, Button } from "react-native";
function QuizApp() {
const [questions, setQuestions] = useState([]);
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
useEffect(() => {
async function load() {
const response = await fetch("https://api.example.com/questions");
const data = await response.json();
setQuestions(data);
}
load();
}, []);
const question = questions[index];
function handleAnswer(i) {
if (i === question?.answer) setScore(score + 1);
setIndex(index + 1);
}
return (
<View>
<Text>{question?.question}</Text>
<Button title={question?.options?.[0]} onPress={() => handleAnswer(0)} />
<Text>Skor: {score}</Text>
</View>
);
}
Proje tamamlandı
Tebrikler! Beş derslik quiz projesini tamamladın. Soru modelini tasarladın, API'den yükledin, akışı yazdın, skoru hesapladın ve tüm parçaları birleştirdin. Sonuç, gerçek bir quiz uygulamasının çekirdeği.
Bu proje, React Native'in temel kavramlarını bir araya getirdi: useState ile state yönetimi, useEffect ile veri yükleme, fetch ile API çağrısı, handleAnswer gibi olay işleyiciler. Bir sonraki adımda bu uygulamayı genişletebilirsin: çoklu seçenek göster, süre sınırı ekle, sonuç ekranı yaz. Bu proje, öğrendiklerini gerçek bir uygulamada birleştirmenin örneğidir. Buradan ilerleyerek kendi uygulamalarını yapabilirsin.
Kendini test et
-
Parçayı rolüne eşle
- useState
- State açar
- useEffect
- Yükleme yapar
- fetch
- İstek atar
- handleAnswer
- Cevabı işler
-
QuizApp'te veri yükleme ne zaman yapılır?
useEffect(() => { /* ... */ }, []);
- Her render'da
- Bileşen ekrana gelince bir kez
- Yalnızca butona basınca
- Hiçbir zaman
Cevabı göster
Bileşen ekrana gelince bir kez — Boş bağımlılık dizisi ile useEffect bileşen ekrana gelince bir kez çalışır.
-
useEffect'in bağımlılık dizisini yaz
useEffect(() => { async function load() { /* ... */ } load(); }, ____);
Cevabı göster
useEffect(() => { async function load() { /* ... */ } load(); }, []);
Sıradaki ders: Bottom Tabs
