Build a Simple React JS Interactive Web-Based Contact Manager: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s fast-paced world, staying organized is key. Managing contacts efficiently is crucial, whether you’re a freelancer, a small business owner, or simply someone with a lot of connections. Manually keeping track of contacts in spreadsheets or notebooks can quickly become overwhelming and inefficient. That’s where a digital contact manager comes in handy. This tutorial will guide you through building your own interactive, web-based contact manager using React JS. You’ll learn how to create, read, update, and delete contact information, empowering you to manage your network with ease.

Why Build a Contact Manager with React JS?

React JS is a powerful JavaScript library for building user interfaces. It’s known for its component-based architecture, which makes it easy to build reusable UI elements. React’s virtual DOM allows for efficient updates, leading to a smooth and responsive user experience. Choosing React for this project offers several benefits:

  • Component Reusability: Build once, use many times. Components for contact entries, forms, and lists can be reused throughout the application.
  • Performance: React’s virtual DOM optimizes updates, resulting in a fast and responsive application.
  • Maintainability: The component-based structure makes the code easier to understand, maintain, and debug.
  • Popularity: React has a large and active community, providing ample resources and support.

By building a contact manager with React, you’ll gain practical experience with core React concepts like components, state management, event handling, and conditional rendering. This hands-on project will not only teach you the fundamentals of React but also provide a useful tool for managing your contacts.

Setting Up Your Development Environment

Before diving into the code, let’s set up your development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): Used to manage project dependencies and run the development server. Download and install from nodejs.org.
  • A Code Editor: Such as VS Code, Sublime Text, or Atom.
  • Basic understanding of HTML, CSS, and JavaScript: While not strictly required, a basic understanding will make following the tutorial much easier.

Once you have Node.js and npm installed, create a new React app using Create React App:

npx create-react-app contact-manager
cd contact-manager

This command creates a new React project with all the necessary dependencies. Navigate into the project directory using the cd command.

Project Structure

Let’s take a look at the basic project structure created by Create React App. This will help you understand where to put your code:

  • src/: This is where your React components, CSS files, and other source code will reside.
  • public/: Contains static assets like index.html (the main HTML file).
  • package.json: Lists project dependencies and scripts.
  • README.md: A markdown file to describe your project.

Inside the src/ directory, you’ll find:

  • App.js: The main component of your application.
  • App.css: Styles for the App component.
  • index.js: The entry point of your application.
  • index.css: Global styles.

Creating the Contact Component

The core of our contact manager will be the Contact component, which will display individual contact details. Create a new file named Contact.js inside the src/ directory. Here’s the basic structure:

import React from 'react';

function Contact(props) {
  return (
    <div className="contact-item">
      <h3>{props.name}</h3>
      <p>Phone: {props.phone}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

export default Contact;

In this code:

  • We import the React library.
  • We define a functional component called Contact that accepts props (properties).
  • Inside the component, we render a div containing the contact’s name, phone, and email, which are accessed from the props object.
  • We export the Contact component so it can be used in other parts of the application.

Now, let’s style the contact item. Create a file named Contact.css in the src/ directory, and add the following CSS:

.contact-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.contact-item h3 {
  margin-top: 0;
  color: #333;
}

Then, import the CSS file into your Contact.js file:

import React from 'react';
import './Contact.css'; // Import the CSS file

function Contact(props) {
  return (
    <div className="contact-item">
      <h3>{props.name}</h3>
      <p>Phone: {props.phone}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

export default Contact;

Creating the Contact List Component

Next, we’ll create a ContactList component to display a list of contacts. Create a new file named ContactList.js in the src/ directory:

import React from 'react';
import Contact from './Contact';

function ContactList(props) {
  return (
    <div className="contact-list">
      {props.contacts.map((contact) => (
        <Contact
          key={contact.id}
          name={contact.name}
          phone={contact.phone}
          email={contact.email}
        />
      ))}
    </div>
  );
}

export default ContactList;

In this code:

  • We import the Contact component.
  • The ContactList component receives a contacts prop, which is an array of contact objects.
  • We use the map() function to iterate over the contacts array and render a Contact component for each contact.
  • The key prop is important for React to efficiently update the list. It should be a unique identifier for each contact.

Now, let’s style the contact list. Create a file named ContactList.css in the src/ directory, and add the following CSS:


.contact-list {
  margin-top: 20px;
}

Then, import the CSS file into your ContactList.js file:

import React from 'react';
import Contact from './Contact';
import './ContactList.css'; // Import the CSS file

function ContactList(props) {
  return (
    <div className="contact-list">
      {props.contacts.map((contact) => (
        <Contact
          key={contact.id}
          name={contact.name}
          phone={contact.phone}
          email={contact.email}
        />
      ))}
    </div>
  );
}

export default ContactList;

Creating the Contact Form Component

To add new contacts, we need a form. Create a new file named ContactForm.js in the src/ directory:

import React, { useState } from 'react';
import './ContactForm.css';

function ContactForm(props) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    props.onAddContact({ name, phone, email });
    setName('');
    setPhone('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit} className="contact-form">
      <h2>Add Contact</h2>
      <div className="form-group">
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div className="form-group">
        <label htmlFor="phone">Phone:</label>
        <input
          type="text"
          id="phone"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
        />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">Add Contact</button>
    </form>
  );
}

export default ContactForm;

In this code:

  • We import the useState hook to manage the form input values.
  • We define state variables for name, phone, and email and initialize them to empty strings.
  • The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior (which would refresh the page), calls the onAddContact prop function (passed from the parent component) with the form data, and resets the form fields.
  • The form includes input fields for name, phone, and email, each with an onChange event handler to update the corresponding state variable.
  • We also have a submit button.

Now, let’s style the contact form. Create a file named ContactForm.css in the src/ directory, and add the following CSS:


.contact-form {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Then, import the CSS file into your ContactForm.js file:

import React, { useState } from 'react';
import './ContactForm.css';

function ContactForm(props) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    props.onAddContact({ name, phone, email });
    setName('');
    setPhone('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit} className="contact-form">
      <h2>Add Contact</h2>
      <div className="form-group">
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div className="form-group">
        <label htmlFor="phone">Phone:</label>
        <input
          type="text"
          id="phone"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
        />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">Add Contact</button>
    </form>
  );
}

export default ContactForm;

Integrating Components in App.js

Now, let’s put it all together in App.js. Modify the App.js file as follows:

import React, { useState } from 'react';
import ContactList from './ContactList';
import ContactForm from './ContactForm';
import './App.css';

function App() {
  const [contacts, setContacts] = useState([
    {
      id: 1,
      name: 'John Doe',
      phone: '123-456-7890',
      email: 'john.doe@example.com',
    },
    {
      id: 2,
      name: 'Jane Smith',
      phone: '987-654-3210',
      email: 'jane.smith@example.com',
    },
  ]);

  const handleAddContact = (newContact) => {
    // Generate a unique ID for the new contact
    const newId = contacts.length > 0 ? Math.max(...contacts.map(contact => contact.id)) + 1 : 1;

    setContacts([...contacts, { ...newContact, id: newId }]);
  };

  return (
    <div className="app-container">
      <h1>Contact Manager</h1>
      <ContactForm onAddContact={handleAddContact} />
      <ContactList contacts={contacts} />
    </div>
  );
}

export default App;

In this code:

  • We import ContactList and ContactForm.
  • We define a contacts state variable using the useState hook. This holds an array of contact objects. We initialize it with some sample contacts.
  • The handleAddContact function is passed as a prop to the ContactForm component. It receives the new contact data from the form, generates a unique ID, and updates the contacts state using the spread operator to create a new array with the added contact.
  • We render the ContactForm and ContactList components, passing the necessary props.

Now, let’s style the main app container. Create a file named App.css in the src/ directory, and add the following CSS:


.app-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.app-container h1 {
  text-align: center;
  margin-bottom: 20px;
}

Then, import the CSS file into your App.js file:

import React, { useState } from 'react';
import ContactList from './ContactList';
import ContactForm from './ContactForm';
import './App.css';

function App() {
  const [contacts, setContacts] = useState([
    {
      id: 1,
      name: 'John Doe',
      phone: '123-456-7890',
      email: 'john.doe@example.com',
    },
    {
      id: 2,
      name: 'Jane Smith',
      phone: '987-654-3210',
      email: 'jane.smith@example.com',
    },
  ]);

  const handleAddContact = (newContact) => {
    // Generate a unique ID for the new contact
    const newId = contacts.length > 0 ? Math.max(...contacts.map(contact => contact.id)) + 1 : 1;

    setContacts([...contacts, { ...newContact, id: newId }]);
  };

  return (
    <div className="app-container">
      <h1>Contact Manager</h1>
      <ContactForm onAddContact={handleAddContact} />
      <ContactList contacts={contacts} />
    </div>
  );
}

export default App;

Running Your Application

To run your application, use the following command in your terminal:

npm start

This will start the development server, and your contact manager will open in your web browser (usually at http://localhost:3000). You should see the initial contact list and the add contact form.

Adding Functionality: Delete Contacts

Let’s add the ability to delete contacts. First, add a delete button to the Contact component. Modify Contact.js:

import React from 'react';
import './Contact.css';

function Contact(props) {
  const handleDelete = () => {
    props.onDelete(props.id);
  };

  return (
    <div className="contact-item">
      <h3>{props.name}</h3>
      <p>Phone: {props.phone}</p>
      <p>Email: {props.email}</p>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

export default Contact;

In the modified code:

  • We add a handleDelete function that calls the onDelete prop function, passing the contact’s id.
  • We add a delete button that calls handleDelete when clicked.

Next, we need to pass a onDelete prop to the Contact component from the ContactList component. Modify ContactList.js:

import React from 'react';
import Contact from './Contact';
import './ContactList.css';

function ContactList(props) {
  return (
    <div className="contact-list">
      {props.contacts.map((contact) => (
        <Contact
          key={contact.id}
          id={contact.id}
          name={contact.name}
          phone={contact.phone}
          email={contact.email}
          onDelete={props.onDelete}
        />
      ))}
    </div>
  );
}

export default ContactList;

Now, we need to implement the onDelete function in App.js. Modify App.js:

import React, { useState } from 'react';
import ContactList from './ContactList';
import ContactForm from './ContactForm';
import './App.css';

function App() {
  const [contacts, setContacts] = useState([
    {
      id: 1,
      name: 'John Doe',
      phone: '123-456-7890',
      email: 'john.doe@example.com',
    },
    {
      id: 2,
      name: 'Jane Smith',
      phone: '987-654-3210',
      email: 'jane.smith@example.com',
    },
  ]);

  const handleAddContact = (newContact) => {
    const newId = contacts.length > 0 ? Math.max(...contacts.map(contact => contact.id)) + 1 : 1;
    setContacts([...contacts, { ...newContact, id: newId }]);
  };

  const handleDeleteContact = (id) => {
    setContacts(contacts.filter((contact) => contact.id !== id));
  };

  return (
    <div className="app-container">
      <h1>Contact Manager</h1>
      <ContactForm onAddContact={handleAddContact} />
      <ContactList contacts={contacts} onDelete={handleDeleteContact} />
    </div>
  );
}

export default App;

In this code:

  • We define a handleDeleteContact function that takes an id as an argument.
  • It uses the filter() method to create a new array containing only the contacts whose id does not match the id passed to the function. This effectively removes the contact.
  • We pass the handleDeleteContact function as the onDelete prop to the ContactList component.

Finally, add some basic styling to the delete button in Contact.css:


.contact-item button {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.contact-item button:hover {
  background-color: #d32f2f;
}

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Import Paths: Double-check your import paths. Typos or incorrect file locations are a common cause of errors. Make sure your paths are relative to the current file. For example: import Contact from './Contact';
  • Missing Keys in Lists: When rendering lists of components using map(), always provide a unique key prop to each element. This helps React efficiently update the list. The key should be a unique identifier for each item.
  • Incorrect State Updates: When updating state, always use the correct state update function (e.g., setContacts). Avoid directly modifying the state array. Use methods like setState([...oldState, newValue]) or setState(oldState.filter(...)) to create new state values.
  • Unnecessary Re-renders: Be mindful of how often your components re-render. If a component is re-rendering unnecessarily, it can impact performance. Use React.memo or useMemo to optimize re-renders in functional components.
  • CSS Issues: Ensure your CSS files are correctly imported and that your CSS selectors are accurate. Use your browser’s developer tools (right-click, Inspect) to check for CSS errors and inspect the applied styles.
  • Prop Drilling: Passing props down multiple levels of components can become cumbersome. Consider using Context API or a state management library (like Redux or Zustand) for more complex applications.

Key Takeaways and Best Practices

Here are some key takeaways and best practices for building React applications:

  • Component-Based Architecture: Break down your UI into reusable components.
  • State Management: Understand how to manage state using useState and other hooks.
  • Event Handling: Learn how to handle events like form submissions and button clicks.
  • Conditional Rendering: Use conditional rendering to display different content based on your application’s state.
  • Keep it Simple: Start with a simple project and gradually add more features.
  • Test Your Code: Write unit tests to ensure your components work as expected.
  • Use a Linter and Formatter: Use a linter (like ESLint) and a formatter (like Prettier) to improve code quality and consistency.

FAQ

Here are some frequently asked questions:

  1. How do I add more fields to the contact form? Simply add more input fields to the ContactForm component and update the corresponding state variables. Also, modify the onAddContact function in App.js to handle the new data.
  2. How can I store the contact data persistently? Currently, the data is stored in the component’s state and is lost when the page is refreshed. To persist the data, you can use local storage, session storage, or a backend database. For a simple solution, local storage is a good starting point.
  3. How do I handle form validation? You can add validation logic to the handleSubmit function in the ContactForm component. Check the input values and display error messages if necessary.
  4. How can I style the application more effectively? Use CSS frameworks like Bootstrap, Material-UI, or Tailwind CSS to speed up styling. Consider using CSS-in-JS libraries for more dynamic styling.
  5. How do I deploy this application? You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes.

This tutorial provides a solid foundation for building a contact manager with React. You’ve learned the basics of component creation, state management, event handling, and conditional rendering. You’ve also seen how to integrate components, handle form submissions, and delete data. This is just the beginning. The skills you’ve acquired can be applied to build a wide range of interactive web applications. You can extend this project by adding features such as editing contacts, searching contacts, and implementing a more robust data storage solution. As you continue to learn and experiment, you’ll become more proficient in React and be able to build increasingly complex and sophisticated applications. Keep practicing, and don’t be afraid to explore new features and techniques. The world of React development is vast and exciting, offering endless opportunities for creativity and innovation.

More posts