Birleştirme
- React Native kursu
- Orta seviye
- Ders 46/116
- 6 dk
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>.
Başlangıç kodu
// useState, useEffect ve Text, View, Button'ı içe aktar
// QuizApp bileşeni yaz
// questions, index, score state'ini başlat
// useEffect içinde async load yaz; fetch ile yükle, setQuestions yap
// question ve handleAnswer tanımla
// View, Text ve Button ile gösterÖrnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useState |
State açar |
useEffect |
Yükleme yapar |
fetch |
İstek atar |
handleAnswer |
Cevabı işler |
2 QuizApp'te veri yükleme ne zaman yapılır?
useEffect(() => { /* ... */ }, []);- Her render'da
- Bileşen ekrana gelince bir kez Doğru cevap
- Yalnızca butona basınca
- Hiçbir zaman
Açıklama: Boş bağımlılık dizisi ile useEffect bileşen ekrana gelince bir kez çalışır.
3 useEffect'in bağımlılık dizisini yaz
useEffect(() => { async function load() { /* ... */ } load(); }, ____);useEffect(() => { async function load() { /* ... */ } load(); }, []);Açıklama: Boş dizi, useEffect'in yalnızca bir kez çalışmasını sağlar.