Not modeli
- React Native kursu
- Orta seviye
- Ders 20/116
- 6 dk
Note modeli ve state'i kurarsın.
Note modeli ve state
Bu derste Note modelini state'e taşıyacağız. Bir not; id, title ve body alanlarından oluşan bir nesnedir. İlk not olarak { id: "1", title: "Alışveriş", body: "Süt, ekmek" } ekleyeceğiz.
State'in ilk değeri tek elemanlı bir dizi olacak. Böylece uygulama açıldığında bir not hazır gelir. Sonraki derslerde kullanıcı tarafından yeni not eklemeyi öğreneceğiz; şimdilik modelin nasıl state'e konduğunu görelim. Ayrıca bir notun alanına erişmeyi de öğreneceğiz: notes[0].title ilk notun başlığını verir.
Uygulama İlk notu ekle
NotesApp bileşenine ilk notu ekle. useState'in ilk değeri olarak [{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }] ver. Bileşen <Text>Notlar</Text> döndürmeye devam etsin.
Başlangıç kodu
// useState'i içe aktar
function NotesApp() {
// notes state'ini useState ile başlat
// ilk değer tek elemanlı dizi olsun: id, title ve body ile
return <Text>Notlar</Text>;
}Örnek çözüm
import { useState } from "react";
import { Text } from "react-native";
function NotesApp() {
const [notes, setNotes] = useState([{ id: "1", title: "Alışveriş", body: "Süt, ekmek" }]);
return <Text>Notlar</Text>;
}Notları görüntüle
State'te tuttuğun notları ekranda göstermek için bir liste kullanırsın. React Native'te FlatList en sık tercih edilen bileşendir; büyük listelerde verimlidir. Her notu bir Text içinde gösterirsin.
Bu derste henüz FlatList'e geçmeden, basit bir Text ile ilk notun başlığını yazdıracağız. Sonraki derslerde liste halinde tüm notları göstereceğiz. Önce küçük başla, sonra büyüt; bu, projelerin sağlam ilerlemesini sağlar. Şimdilik amaç state'in nasıl okunduğunu görmek.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 title alanını oku
const firstTitle = notes[0].____;const firstTitle = notes[0].title;Açıklama: notes[0].title ilk notun başlığını verir.
2 Note'un hangi alanı benzersizdir?
const note = { id: "1", title: "Alışveriş", body: "Süt" };- title
- body
- createdAt
- id Doğru cevap
Açıklama: Aynı id'li iki not olamaz.
3 State ve alanları eşle
| Kavram | Anlamı |
|---|---|
useState |
State tutar |
notes[0] |
İlk not |
title |
Başlık alanı |
id |
Benzersiz kimlik |