https://github.com/yevheniidatsenko/goit-react-woolf-hw-04-phonebook
⚛️ React Hometask - Phonebook + React Hooks
https://github.com/yevheniidatsenko/goit-react-woolf-hw-04-phonebook
css3 goit goit-react-woolf-hw-04-phonebook hooks javascript react
Last synced: 7 months ago
JSON representation
⚛️ React Hometask - Phonebook + React Hooks
- Host: GitHub
- URL: https://github.com/yevheniidatsenko/goit-react-woolf-hw-04-phonebook
- Owner: yevheniidatsenko
- Created: 2024-03-03T21:58:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-05T21:02:44.000Z (over 1 year ago)
- Last Synced: 2025-02-10T08:49:18.278Z (9 months ago)
- Topics: css3, goit, goit-react-woolf-hw-04-phonebook, hooks, javascript, react
- Language: JavaScript
- Homepage: https://yevheniidatsenko.github.io/goit-react-woolf-hw-04-phonebook/
- Size: 2.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Phonebook Application
This is a simple React application for managing contacts in a phonebook.
## Features
- Add new contacts with a name and phone number.
- Display a list of contacts.
- Filter contacts by name.
- Responsive design for various screen sizes.
## Components
- **App**: The root component managing the state of contacts and filter.
- **ContactForm**: Component for adding new contacts.
- **ContactList**: Component for displaying the list of contacts.
- **Filter**: Component for filtering contacts by name.
## Installation
1. Clone this repository.
2. Run `npm install` to install dependencies.
3. Run `npm start` to start the development server.
## Technologies Used
- React
- CSS Modules
### Phonebook Contact Storage
In this updated version, the phonebook application now utilizes localStorage for
storing contacts. Lifecycle methods in React are used for managing this feature.
- When a contact is added or deleted, the contacts are automatically saved to
localStorage.
- Upon loading the app, contacts, if any, are retrieved from localStorage and
stored in the application state.
Feel free to explore the code and use it as a reference for your own projects!