Proje tasarımı
- React Native kursu
- Orta seviye
- Ders 19/116
- 6 dk
Notlar uygulamasının yapısını tasarlarsın.
Proje: Notlar uygulaması
Bu projede bir Notlar uygulaması yazacaksın. Kullanıcı yeni not ekler, mevcut notları görür ve uygulama kapansa bile notlar kaybolmaz. Beş derste adım adım ilerleyeceğiz; her ders bir öncekinin çözümünün üzerine bir parça ekler.
İlk ders projenin iskeletini kurar: Note modeli, notları tutan state ve ekranda liste. Sonra not ekleme formu, kalıcı saklama için AsyncStorage ve son olarak tüm parçaların birleşimi gelecek. Bu, gerçek bir React Native uygulamasının küçük ama eksiksiz bir örneğidir.
Note modeli
Uygulamanın temelinde Note modeli yatar. Her notun üç alanı vardır: benzersiz id, title (başlık) ve body (içerik). Bu alanlar bir nesnede toplanır; örneğin { id: "1", title: "Alışveriş", body: "Süt, ekmek" }.
id'nin benzersiz olması önemli; aynı id'li iki not olamaz. Genelde Date.now().toString() ile zaman damgası kullanılır. title ve body dizedir. Tüm notları bir dizide tutarsın: const [notes, setNotes] = useState([]). Boş dizi ile başlamak, uygulama ilk açıldığında not olmadığını gösterir.
Uygulama Notlar state'ini kur
Bir NotesApp bileşeni yaz. useState ile notes state'i tut (ilk değer boş dizi []). Bileşen <Text>Notlar</Text> döndürsün.
Başlangıç kodu
// useState'i içe aktar
function NotesApp() {
// notes state'ini useState ile başlat (boş dizi)
return <Text>Notlar</Text>;
}Örnek çözüm
import { useState } from "react";
import { Text } from "react-native";
function NotesApp() {
const [notes, setNotes] = useState([]);
return <Text>Notlar</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Uygulama kapansa bile notlar nerede saklanır?
const [notes, setNotes] = useState([]);- console.log'da
- Yalnızca state'te
- AsyncStorage'da Doğru cevap
- Hiçbir yerde
Açıklama: AsyncStorage kalıcı saklama sağlar.
2 Note nesnesini tamamla
const note = { id: "1", ____: "Alışveriş", body: "Süt" };const note = { id: "1", title: "Alışveriş", body: "Süt" };Açıklama: title alanı notun başlığını tutar.
3 Alanı rolüne eşle
| Kavram | Anlamı |
|---|---|
id |
Benzersiz kimlik |
title |
Not başlığı |
body |
Not içeriği |
notes |
Not dizisi |