Create a ContactCard in React using create-react-app and MUI - in 17 steps

Introduction

• React, a JavaScript library for building user interfaces.

• Material-UI, a popular UI framework for React that provides ready-made components and icons.

• prop-types, a library for type checking the props passed to your components.

• create-react-app, a tool that sets up a modern React project with no configuration.

Steps

1. Create a new React project using create-react-app. You can use the command npx create-react-app contact-card in your terminal.

2. Install material-ui and prop-types using npm install @material-ui/core @material-ui/icons prop-types in your terminal.

3. Create a new file called ContactCard.js in the src folder of your project. This is where you will write your contact card component.

4. Import the necessary modules and components from react, material-ui, and prop-types at the top of your file. For example:
TheTechCruise.com Pyodide Terminal

import React from 'react';
import PropTypes from 'prop-types';
import { Card, CardContent, CardMedia, Typography, IconButton } from '@material-ui/core';
import { GitHub, LinkedIn, Mail, Phone, Web } from '@material-ui/icons';

5. Define your contact card component as a function that takes some props as parameters. The props are the data that you want to display on your card, such as image, firstName, lastName, phone, email, github, linkedin, website, and backgroundColor. For example:
TheTechCruise.com Pyodide Terminal

function ContactCard(props) {
  // destructure the props object
  const { image, firstName, lastName, phone, email, github, linkedin, website, backgroundColor } = props;

  // return the JSX code for your component
  return (
    // ...
  );
}

6. Use the <Card> component from Material-UI to create the main container for your contact card. You can pass the backgroundColor prop as a style attribute to customize the background color of your card. For example:
TheTechCruise.com Pyodide Terminal

return (
  <Card style={{ backgroundColor }}>
    // ...
  </Card>
);

7. Use the <CardMedia> component from Material-UI to display the image of the person on your card. You can pass the image prop as a source attribute to specify the image URL. You can also use some style attributes to adjust the size and position of the image. For example:
TheTechCruise.com Pyodide Terminal

<Card style={{ backgroundColor }}>
  <CardMedia
    style={{ height: 200 }}
    image={image}
    title={`${firstName} ${lastName}`}
  />// ...
</Card>

8. Use the <CardContent> component from Material-UI to create a section for displaying the text and icons on your card. You can use some style attributes to adjust the padding and alignment of the content. For example:
TheTechCruise.com Pyodide Terminal

<Card style={{ backgroundColor }}>
  <CardMedia
    style={{ height: 200 }}
    image={image}
    title={`${firstName} ${lastName}`}
  /><CardContent style={{ padding: 16, textAlign: 'center' }}>
    // ...
  </CardContent>
</Card>

9. Use the <Typography> component from Material-UI to display the name of the person on your card. You can pass the firstName and lastName props as children of the component. You can also use some attributes to specify the variant, color, and font weight of the text. For example:
TheTechCruise.com Pyodide Terminal

<CardContent style={{ padding: 16, textAlign: 'center' }}>
  <Typography variant="h5" color="textPrimary" style={{ fontWeight: 'bold' }}>
    {firstName} {lastName}
  </Typography>// ...
</CardContent>

10. Use the <IconButton> component from Material-UI to display the icons for phone, email, GitHub, LinkedIn, and website on your card. You can pass the corresponding props as href attributes to specify the links for each icon. You can also use some attributes to specify the size, color, and edge of each icon button. For example:
TheTechCruise.com Pyodide Terminal

<CardContent style={{ padding: 16, textAlign: 'center' }}>
  <Typography variant="h5" color="textPrimary" style={{ fontWeight: 'bold' }}>
    {firstName} {lastName}
  </Typography><IconButton size="small" color="primary" edge="start" href={phone}>
    <Phone />
  </IconButton><IconButton size="small" color="primary" href={email}>
    <Mail />
  </IconButton><IconButton size="small" color="primary" href={github}>
    <GitHub />
  </IconButton><IconButton size="small" color="primary" href={linkedin}>
    <LinkedIn />
  </IconButton><IconButton size="small" color="primary" edge="end" href={website}>
    <Web />
  </IconButton>
</CardContent>

11. Use the PropTypes module to define the types and default values of the props for your contact card component. This will help you to validate the data passed to your component and avoid errors. For example:
TheTechCruise.com Pyodide Terminal

ContactCard.propTypes = {
  image: PropTypes.string,
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  phone: PropTypes.string,
  email: PropTypes.string,
  github: PropTypes.string,
  linkedin: PropTypes.string,
  website: PropTypes.string,
  backgroundColor: PropTypes.string,
};

ContactCard.defaultProps = {
  image: '',
  firstName: '',
  lastName: '',
  phone: '',
  email: '',
  github: '',
  linkedin: '',
  website: '',
  backgroundColor: '#fff',
};

12. Export your contact card component as a default export from your file. This will allow you to import and use it in other files. For example:
TheTechCruise.com Pyodide Terminal

export default ContactCard;

13. Create a new file called App.js in the src folder of your project. This is where you will use your contact card component and pass some data as props.

14. Import the React module and your ContactCard component at the top of your file. For example:
TheTechCruise.com Pyodide Terminal

15. Define your app component as a function that returns some JSX code. You can use the <ContactCard> component and pass some data as props to display a contact card on your app. For example:
TheTechCruise.com Pyodide Terminal

function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <ContactCard
        image="https://avatars.githubusercontent.com/u/69631?v=4"
        firstName="Dan"
        lastName="Abramov"
        phone="+1-234-567-8901"
        email="[email protected]"
        github="https://github.com/gaearon"
        linkedin="https://www.linkedin.com/in/dan-abramov-25a55a5/"
        website="https://overreacted.io/"
        backgroundColor="#e0f2f1"
      />
    </div>
  );
}

16. Export your app component as a default export from your file. This will allow you to render it in the root element of your HTML document. For example:
TheTechCruise.com Pyodide Terminal

17. Run your app using npm start in your terminal. You should see a contact card displayed on your browser window.

References

• React – A JavaScript library for building user interfaces

• Material-UI - React components for faster and easier web development

• prop-types - npm

• Create React App · Set up a modern web app by running one command

• How to Create Contact Form with React | Mailtrap Blog

• React Cards with Bootstrap - examples & tutorial

• How to Create Phone numbers and Contacts List in ReactJS

• How to use Card Component in ReactJS? - GeeksforGeeks

• How to Create Phone numbers and Contacts List in ReactJS

• Titillium Web Font Free by Accademia di Belle Arti di Urbino | Font Squirrel

• Blind Text Generator - Lorem ipsum dummy text

• HoobeZa - YouTube

About Authors

Sai Manasa Ivaturi

---

---

I'm a Software Development Engineer based in Atlanta, Georgia with 5+ years of experience in the software industry. My focus area has been Backend development and full-stack development.

View my Resume here.

Masters Degree in Computer Science Indiana University, Bloomington Jan 22 - May 23

Bachelors Degree in Computer Science Pragati Engineering College, India Aug 14 - April 18

Certifications and badges

Srinivas vaddi

---

---

Hi! I’m a recent master’s graduate from Indiana University Bloomington (IUB) 🎓 and a Software Development Engineer with 4+ years of experience. Looking for #jobs!

My areas of expertise are Software Development, DevOps, Testing, Integration, Data Engineering and Data Analytics. Mostly worked on Python, Django/Flask, Apache Airflow, Apache Spark, AWS, and DevOps. I have a versatile background & a ‘can do’ attitude 🤓.

👨🏻‍💻

I like blogging and sharing knowledge. I’ve built a server at home from scratch! I used it to learn various technologies and to contribute to the open-source. I love tech, philosophy, literature, and history. My favorite books 📚 of all time are ‘The Alchemist’ and ‘Chanakya Neeti’ 🙌.

Masters Degree in Computer Science Indiana University, Bloomington Aug 23, 2021 → Dec 17, 2022

Bachelors Degree in Computer Science Gitam University (Deemed to be) Jun 1, 2014 → Apr 1, 2018

Certifications and badges

👉 verify

👉 verify

👉 verify

  👉 verify