Uygulama tasarımı

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ı.

Örnek çözümü göster

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 }
});

Kendini test et

Görev listesini hangi state tutar?
```
const [???, setTasks] = React.useState([]);
```
- task
- text
- tasks
- items
Cevabı göster

tasks — tasks dizisi tüm görevleri tutar; setTasks ile güncellersin.

tasks state'ini tanımla

const [tasks, setTasks] = React.useState(____);

Cevabı göster

const [tasks, setTasks] = React.useState([]);

State'i amacına eşle

task

Yazma alanı metni
tasks

Görev dizisi
setTasks

Diziyi günceller
done

Tamamlanma durumu

Sıradaki ders: Görev ekleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler