Birleştirme
- React Native kursu
- Orta seviye
- Ders 23/116
- 6 dk
Tüm parçaları birleştirerek çalışan bir notlar uygulaması yazarsın.
Birleştirme
Son derste tüm parçaları birleştirip çalışan bir notlar uygulaması yazacağız. useEffect ile mount'ta notları yükler, Button ile yeni not ekler, AsyncStorage ile kaydederiz. Beş dersin tamamı burada bir araya gelir.
Önce useEffect ile AsyncStorage'dan notları yükleyeceğiz. Sonra bir Button ekleyip basıldığında yeni notu state'e koyacağız. Bu, küçük ama eksiksiz bir uygulamadır; kullanıcı not ekler, kapatıp açınca notları geri yüklenir. Bu ders proje serisinin zirvesidir.
Uygulama useEffect ile notları yükle
NotesApp bileşenine useEffect ekle. Mount'ta AsyncStorage.getItem("notes") ile kayıtlı notları oku. JSON.parse ile diziye çevir ve setNotes yap. Dependency array boş olsun ([]).
Başlangıç kodu
import { useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
async function saveNotes() {
await AsyncStorage.setItem("notes", JSON.stringify(notes));
}
// useEffect ekle; mount'ta AsyncStorage'dan notları yükle
// JSON.parse ile diziye çevirip setNotes yap; dizi boş olsun
return <Text>Notlar</Text>;
}Örnek çözüm
import { useEffect, useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
async function saveNotes() {
await AsyncStorage.setItem("notes", JSON.stringify(notes));
}
useEffect(() => {
AsyncStorage.getItem("notes").then(raw => {
if (raw) setNotes(JSON.parse(raw));
});
}, []);
return <Text>Notlar</Text>;
}Uygulama Ekleme butonu
NotesApp bileşenine Button ekle. onPress'inde setNotes ile yeni bir not ekle: { id: Date.now().toString(), title, body }. Bileşen <Text>Notlar</Text> döndürmeye devam etsin.
Başlangıç kodu
import { useEffect, useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
async function saveNotes() {
await AsyncStorage.setItem("notes", JSON.stringify(notes));
}
useEffect(() => {
AsyncStorage.getItem("notes").then(raw => {
if (raw) setNotes(JSON.parse(raw));
});
}, []);
// Button ekle; butona basınca yeni notu setNotes ile ekle
// id için zaman damgası kullan
return <Text>Notlar</Text>;
}Örnek çözüm
import { Button, useEffect, useState } from "react";
import { Text, TextInput } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
async function saveNotes() {
await AsyncStorage.setItem("notes", JSON.stringify(notes));
}
useEffect(() => {
AsyncStorage.getItem("notes").then(raw => {
if (raw) setNotes(JSON.parse(raw));
});
}, []);
return (
<>
<Button onPress={() => setNotes([...notes, { id: Date.now().toString(), title, body }])} title="Ekle" />
<Text>Notlar</Text>
</>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useEffect dependency array [] ne yapar?
useEffect(() => {
loadNotes();
}, []);- Her render'da çalışır
- Yalnızca unmount'ta
- Yalnızca mount'ta çalışır Doğru cevap
- Hiç çalışmaz
Açıklama: Boş dizi efektin yalnızca mount'ta çalışmasını sağlar.
2 Yeni not ekle
setNotes([...____, { id: Date.now().toString(), title, body }]);setNotes([...notes, { id: Date.now().toString(), title, body }]);Açıklama: [...notes] ile eski notları yeni diziye kopyalarsın.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useEffect |
Mount'ta yükler |
AsyncStorage.getItem |
Okur |
Button onPress |
Yeni not ekler |
setNotes |
State'i günceller |