This project is a simple React application that displays a contact list and allows searching for contacts by name and phone number. It utilizes React components and state management to dynamically filter and display the contacts based on user input.
https://contacts-rocnod7i0-devan7117.vercel.app
The code consists of the following components:
-
ContactList: This is the main component that renders the contact list and handles the search functionality. It maintains the state for the displayed contacts and updates it based on the search query. The contact list is rendered using theContactcomponent. -
Contact: This component represents an individual contact item and displays the contact's name, phone number, and image.
The project does not utilize any external libraries or plugins beyond the core React framework. It leverages React for building the user interface and managing component-based architecture. The following dependencies are required to run the application:
- React: A JavaScript library for building user interfaces.
- ReactDOM: A package for rendering React components in the browser.
To run the application, follow these steps:
-
Install Node.js and npm (Node Package Manager) if they are not already installed on your system.
-
Clone the project repository and navigate to the project directory.
-
Install the project dependencies by running the following command:
npm install
-
Start the development server by running the following command:
npm start
This will launch the application in your default browser at
http://localhost:3000. -
Enter a search query in the search field to filter the contacts based on the name or phone number.
This React Contact List project demonstrates how to build a simple contact list application using React components and state management. It provides a basic structure that can be expanded upon to include additional features or functionalities as needed.