Core React Concepts for Sticky Board App

When building even a small app like Sticky Notes Board, you need to understand some React fundamentals. These aren’t abstract textbook ideas; they’re the actual tools you’ll reach for in code.

Components

In React, everything is a component. Think of components as Lego blocks. You can combine them to build complex UIs.

In our project, we’ll create three main components:

• App → The parent component. Manages notes state, form inputs, and overall logic.
• Board → A container that receives all notes from App and displays them.
• Note → A single sticky note card with its title, body, timestamp, and actions (edit/delete).

Each component has a clear role. This separation makes the project easier to understand and maintain.

Functions

Functions are the backbone of interactivity in our app.

Key functions we’ll use:

• addNote → Takes the title/body from the form, creates a new note object, and updates state.
• deleteNote → Removes a note from the list by ID.
• updateNote → Edits an existing note and saves changes.
• saveNotes & loadNotes (from utils.js) → Handle storing/retrieving notes from localStorage.

These functions aren’t floating around — they’re passed down as props to child components (Board and Note) so actions can bubble back up to App.

State & Props

React’s state is where dynamic data lives.

• In our case, the notes array is stored in state inside App.
• Whenever a note is added/updated/deleted, the state changes → React re-renders the UI automatically.

Props are how state and functions move between components:

• App passes notes, onDelete, and onUpdate as props to Board.
• Board passes individual note data and callbacks to each Note.

This parent-child data flow is the heart of React.

Hooks

We’ll use two main React hooks:

useState → For managing state like notes, title, and body.

const [notes, setNotes] = useState([]);

useEffect → For side effects, like loading notes from localStorage on mount, and saving notes whenever state changes.

useEffect(() => {

saveNotes(notes);

}, [notes]);

Without these hooks, the app wouldn’t remember data or react to changes.