This is homework for the React components lifecycle.
This task is based on the previous one ("goit-react-hw-02-phonebook"), which may be found here.
The live page for this repository can be viewed at GitHub Pages.
- Make sure you have an LTS version of Node.js installed on your computer. Download and install if needed.
- Install the project's base dependencies with the
npm install
command. - Start development mode by running the
npm start
command. - Go to localhost:3000 (may vary) in your browser. This page will automatically reload after saving changes to the project files.
React project template is used as a starting point for the application (more information about how to start-up with such a project may be found at the template repo description or here in a Readme file).
- The
goit-react-hw-03-phonebook
repository is created. - When submitting homework, there are two links: to the source files and the live pages of each assignment on `GitHub Pages'.
- The component state stores the minimum required set of data, the rest is calculated.
- There are no errors or warnings in the console when running application code.
- Each component has a separate folder with the React-component file and styles file.
- The
propTypes
are described for all components. - Everything that a component expects in the form of props is passed to it when it is called.
- Component names are clear and descriptive.
- The JS code is clean and clear,
Prettier
is used. - Styling is done by
CSS modules
orStyled Components
.
Take your solution from the previous homework assignment and add storage of the phonebook contacts in localStorage
. Use lifecycle methods.
- When you add and delete a contact, the contacts are stored in the local storage.
- When the application is loaded, contacts, if any, are read from the local storage and are written to the state.
Solution example:
A search field that you can use to filter your contacts.
Denies the user the ability to add contacts whose names are already in the phonebook. If tries to do so, alert with a warning is printed.
Allows the user to delete previously saved contacts.