React Contact Manager Application

Time for some more React! Can’t stop won’t stop! This time I’m going to be building out a simple React contact manager application that should do well to cover a lot of the work flow of React.js from passing down props through the component hierarchy to handling state, component lifecycle methods, JSX etc.

This will be done with React on its own and fake API’s. It’s not hard to find similar walkthroughs but once again, I am doing this for my own practice in React to drill these concepts in and to become more and more comfortable with the framework.

Photo by Dan LeFebvre on Unsplash

We’ll get right into it! Before starting though, you will need to have a recent version of Node.js installed on your machine which is as simple as going to the official website where you will be given options to download the latest version on the home page. If you have issues with the install, there are videos to walkthrough the issues that are only a quick google search away.

Let’s run the command in the terminal to create the file structure and kick things off:

npx create-react-app contact-app

• Remember, you can replace “contact” with whatever you are naming your app. I put contact there as it is conventional to the purpose of this application.

Now, cd into the directory of the newly created app. From here we’ll create a components folder that will hold the files for the different components. Within that folder, create the files Header.js, ContactCard.js, ContactList.js and AddContact.js. Also moving App.js and App.css into this folder.

Removing the logo import and everything within the App functions div in App.js:

import React from 'react';
import './App.css';
function App() {
  return <div>Hello World</div>;
}
export default App;

Importing Header, AddContact and ContactList as well as calling them within a div of the App function:

import React from 'react';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
import ContactList from './ContactList';
function App() {
  return (
    <div>
      <Header />
      <AddContact />
      <ContactList />
    </div>
  );
}  

Building out a function component in Header.js where we will have nested divs for the possibility of adding className stylings down the line, but for now focusing on the React side of things:

import React from 'react'
const Header = () => {
  return (
    <div>
      <div>
        <h2>Contact Manager</h2>
      </div>
    </div>
  );
};
export default Header;

• You’ll be getting an error at this point if you are trying to see the h2 rendered out to the browser. To see “Contact Manager” you will need to comment out the other 2 components being called in App.js. Comment them back in as the others are built out.

Building out a class component in AddContact.js that will have the form to handle creating a new contact:

import React from 'react'
class AddContact extends React.component {
  render() {
    return (
      <div>
        <h2>Add Contact<h2/>
        <form>
          <div>
            <label>Name</label>
            <input type="text" name="name" placeholder="Name" />
          </div>
          <div>
            <label>Email</label>
            <input type="text" name="email" placeholder="Email" />
          </div>
          <button>Add</button>
        </form>
      </div>
    );
  }
}
export default AddContact;

Building out another function component in ContactList.js:

import React from 'react'
const ContactList = () => {
  return (
    <div>ContactList</div>
  );
}
export default ContactList;

From here we have all the components we need with a form to add a new contact and a nice header at the top of the page. This was a bit shorter of a post as we are really just getting the basic set up going. For, in the next part, we will begin with some of the more fun stuff like passing props and accessing them. We’ll also dive deeper into the capabilities of JSX. Until next time, happy coding!

GitHub:

GitHub - ShaneG25/xeno-app at 32625ad7e581efca4626b4b468474924fc4d7a61