Project design
- React Native course
- Intermediate
- Lesson 19/116
- 6 min
Design the structure of the notes app.
Project: Notes app
In this project you will build a Notes app. The user adds new notes, sees existing notes and the notes survive when the app closes. We will go step by step over five lessons; each lesson adds a piece on top of the previous solution.
The first lesson sets up the skeleton: the Note model, the state that holds the notes and a list on screen. Then comes the add note form, persistent storage with AsyncStorage, and finally the integration of all parts. This is a small but complete example of a real React Native app.
The Note model
The app is built on the Note model. Each note has three fields: a unique id, a title and a body. These fields live in an object; for example { id: "1", title: "Shopping", body: "Milk, bread" }.
The id must be unique; two notes cannot share an id. A common choice is a timestamp from Date.now().toString(). title and body are strings. You keep all notes in an array: const [notes, setNotes] = useState([]). Starting with an empty array means the app shows no notes at first.
Practice Set up the notes state
Write a NotesApp component. Hold a notes state with useState (initial value is an empty array []). The component returns <Text>Notes</Text>.
Starter code
// Import useState
function NotesApp() {
// Start notes state with useState; empty array
return <Text>Notes</Text>;
}Sample solution
import { useState } from "react";
import { Text } from "react-native";
function NotesApp() {
const [notes, setNotes] = useState([]);
return <Text>Notes</Text>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where are notes kept when the app closes?
const [notes, setNotes] = useState([]);- console.log'da
- Only in state
- AsyncStorage'da Correct answer
- Nowhere
Explanation: AsyncStorage provides persistent storage.
2 Complete the Note object
const note = { id: "1", ____: "Alışveriş", body: "Süt" };const note = { id: "1", title: "Alışveriş", body: "Süt" };Explanation: The title field holds the note's title.
3 Match the field to its role
| Term | Meaning |
|---|---|
id |
Unique id |
title |
Note title |
body |
Note content |
notes |
Notes array |