Proje tasarımı
- React Native kursu
- İleri seviye
- Ders 79/83
- 6 dk
İleri seviye finali mini uygulamasının iskeletini tasarlarsın.
Proje: Saha Raporu
Bu projede bir Saha Raporu 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: auth ile giriş, API ile görev yükleme, kamera ve konum ile native özellikler, offline cache ile az bağlantılı çalışma elde edeceksin.
İlk ders projenin iskeletini kurar: App bileşeni, tasks state'i ve bir başlık metni. Sonra auth context ekleriz. API'den görevleri yükleriz. Kamera ve konum native özelliklerini bağlarız. Son olarak offline cache ile tüm parçaları birleştiririz. Bu, ileri 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: auth context ve API fetch. Üçüncü ders: kamera ve konum native hook'ları. Dördüncü ders: offline cache ile AsyncStorage. Beşinci ders: birleştirme — tüm katmanları bağlama.
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>Saha Raporu</Text> döndürsün.
Başlangıç kodu
import React, { useState } from 'react';
import { Text, View } from 'react-native';
// App bileşenini ve tasks state'ini buraya ekleÖrnek çözüm
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [tasks, setTasks] = useState([]);
return (
<View>
<Text>Saha Raporu</Text>
</View>
);
}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 resim
- Görevler state'i Doğru cevap
- Bir animasyon
- Bir oyun skoru
Açıklama: Görevler state'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 |