Uygulama tasarımı
- React Native kursu
- Başlangıç
- Ders 48/116
- 6 dk
Yapılacaklar uygulamasının yapısını tasarlarsın.
Uygulama taşarısı
Bu projede gerçek bir yapılacaklar uygulaması yazacaksın. Uygulama beş derste birikimli olarak büyür: önce iskelet, sonra görev ekleme, görev listesi, görev tamamlama ve sonunda birleştirme. Her dersin başlangıç kodu bir önceki dersin çözümünü içerir.
İlk ders iki temel parçayı kurar: bir SafeAreaView kabı ve bir başlık metni. Devam eden dersler bu kabın içine yeni parçalar ekler. Önce state yönetimini kısaca görelim, sonra iskeleti yazacaksın.
State yönetimi
Uygulama iki state kullanır. task yazma alanındaki metni tutar; tasks eklenen tüm görevleri bir dizi olarak tutar. Her görev bir nesnedir: { id, text, done }. id benzersiz anahtar, text görev metni, done tamamlanma durumu.
Yeni görev eklemek için setTasks([...tasks, newTask]) yazarsın; bu, eski diziyi yeni bir diziyle değiştirir. React Native bu değişikliği görünce bileşeni yeniden render eder. State değişimi her zaman yeni bir dizi veya nesne ile yapılır; mevcut diziyi doğrudan değiştirme.
Uygulama Uygulama iskeletini yaz
Boş App bileşenini tamamla. Dönüşte <SafeAreaView style={styles.container}> içinde <Text>Yapılacaklar</Text> bulunsun. container stili StyleSheet.create içinde zaten tanımlı.
Başlangıç kodu
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
export default function App() {
// Başlık ve konteyner ekle
return null;
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Örnek çözüm
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Görev listesini hangi state tutar?
const [???, setTasks] = React.useState([]);- task
- text
- tasks Doğru cevap
- items
Açıklama: tasks dizisi tüm görevleri tutar; setTasks ile güncellersin.
2 tasks state'ini tanımla
const [tasks, setTasks] = React.useState(____);const [tasks, setTasks] = React.useState([]);Açıklama: Boş dizi ile başlatılır; görevler ekledikçe dolar.
3 State'i amacına eşle
| Kavram | Anlamı |
|---|---|
task |
Yazma alanı metni |
tasks |
Görev dizisi |
setTasks |
Diziyi günceller |
done |
Tamamlanma durumu |