Not modeli

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.

Örnek çözümü göster

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.

Kendini test et

title alanını oku

const firstTitle = notes[0].____;

Cevabı göster

const firstTitle = notes[0].title;

Note'un hangi alanı benzersizdir?
```
const note = { id: "1", title: "Alışveriş", body: "Süt" };
```
- title
- body
- createdAt
- id
Cevabı göster

id — Aynı id'li iki not olamaz.
State ve alanları eşle

useState

State tutar
notes[0]

İlk not
title

Başlık alanı
id

Benzersiz kimlik

Sıradaki ders: Not ekleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler