Skip to content

Latest commit

 

History

History
70 lines (50 loc) · 2.11 KB

README.md

File metadata and controls

70 lines (50 loc) · 2.11 KB

Notes Application

Overview

This React application is designed for creating, selecting, and displaying notes. It includes various components and features for managing notes effectively.

Key Concepts

  1. React Components:

    • Functional components for different aspects of note management.
    • Use of useContext hook to access shared state.

  2. React Hooks:

    • Utilization of useState for managing local component state.
    • Use of useEffect for handling side effects and lifecycle events.

  3. Context API:

    • Implementation of the AppContext for sharing state across components.

  4. Conditional Rendering:

    • Conditional display of components based on certain conditions.

  5. Event Handling:

    • Definition of various event handlers for user interactions.

  6. CSS Styling:

    • Styling done using CSS with features like flexbox, grid, and media queries.
    • Use of CSS modules for scoped styling.

  7. React Router:

    • Possible usage of React Router for navigation.

Components

  1. SelectNotes

    • Component for selecting notes.
    • Uses the AppContext for shared state.

  2. NoteHeading

    • Component representing a note heading.
    • Utilizes the useContext hook.

  3. CreateNote

    • Component for creating new notes.
    • Implements random letter generation for note groups.
    • Uses the useState and useEffect hooks.

  4. NoteSection

    • Main component for displaying and adding notes.
    • Uses the AppContext for shared state.
    • Implements conditional rendering and event handling.

Hooks

  • useState: Used for managing local component state.
  • useEffect: Used for handling side effects and lifecycle events.
  • useContext: Used for accessing shared state.

Styling

  • CSS is used for styling with features like flexbox, grid, and media queries.
  • CSS modules are employed for scoped styling.

Usage

  1. Install dependencies: npm install
  2. Run the application: npm start

Getting Started

Follow these steps to set up and run the Notes Application on your local machine.

Prerequisites

  • Node.js and npm installed on your machine.