Proje tasarımı
- React Native kursu
- Orta seviye
- Ders 112/116
- 6 dk
Orta seviye finali mini uygulamasının iskeletini tasarlarsın.
Proje: Görevler uygulaması
Bu projede bir Görevler uygulaması yazacaksın. Beş derste adım adım ilerleyeceğiz; her ders bir öncekinin çözümünün üzerine bir parça ekler. Sonuçta: Context ile state paylaşımı, hooks ile yeniden kullanılabilir mantık, API ile veri yükleme ve navigation ile çok ekranlı bir yapı elde edeceksin.
İlk ders projenin iskeletini kurar: App bileşeni, tasks state'i ve bir başlık metni. Sonra Context ile bu state'i tüm bileşenlere açacağız. API'den görevleri yükleyeceğiz. Tab navigation ile iki ekran ekleyeceğiz. Son olarak loading state ile tüm parçaları birleştireceğiz. Bu, orta seviye React Native bilgini bir araya getiren bir finaldır.
Beş derslik yol haritası
Yol haritamız beş derslik. Birinci ders: iskelet — App, tasks state, başlık. İkinci ders: Context — TasksContext ve useTasks hook'u. Üçüncü ders: API — useEffect ile fetch. Dördüncü ders: navigation — Tab.Navigator ile iki ekran. Beşinci ders: birleştirme — loading state.
Her ders bir code adımıyla biter. Bir sonraki dersin başlangıç kodu, bir önceki dersin çözümünü içerir. Böylece yaptığın her adım kalıcıdır; silinmez. Bu birikimli yapı, gerçek bir projenin nasıl büyüdüğünü gösterir. Son derste tüm parçalar bir araya gelir ve eksiksiz bir uygulama oluşur.
Uygulama App iskeletini kur
Bir App bileşeni yaz. useState([]) ile tasks state'i tut. Bileşen <Text>Görevler</Text> döndürsün.
Başlangıç kodu
// useState'i içe aktar
function App() {
// tasks state'ini başlat (boş dizi)
return <Text>Görevler</Text>;
}Örnek çözüm
import { useState } from "react";
import { Text } from "react-native";
function App() {
const [tasks, setTasks] = useState([]);
return <Text>Görevler</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projenin kalbinde ne var?
function App() { /* ... */ }- Bir oyun
- Bir resim
- Bir animasyon
- Görevler context'i Doğru cevap
Açıklama: Görevler context'i projenin kalbidir.
2 useState çağrısı
const [tasks, setTasks] = ____([]);const [tasks, setTasks] = useState([]);Açıklama: useState tasks state'ini başlatır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
tasks |
Görevler dizisi |
setTasks |
State güncelleyici |
App |
Kök bileşen |
Text |
Başlık gösterir |