Overview

In this project, you will create a "Profile Card Creator" — a component that displays a user profile card with a name, an image, and a bio. This will help you practice using functional components, handling props, and understanding component composition. By the end of this project, you should have a functional and visually appealing profile card that can be easily customized with different user data.

Goals

• Learn to build functional components that receive and handle props.

• Gain experience in composing components to create a unified user interface.

• Enhance your ability to manage basic layout and styling in a React application.

Instructions

Step 1: Create the Components 

You'll need to create at least two components: one for the overall profile card and one or more for parts like the image and the bio.

• ProfileCard Component: This is the main component that assembles other sub-components like <strong>ProfileImage</strong> and <strong>ProfileBio</strong>.

import React from 'react';
import ProfileImage from './ProfileImage';
import ProfileBio from './ProfileBio';

function ProfileCard({ name, image, bio }) {
  return (
    <div className="profile-card">
      <ProfileImage image={image} />
      <h1>{name}</h1>
      <ProfileBio bio={bio} />
    </div>
  );
}

export default ProfileCard;

• ProfileImage Component: A simple component that displays the user's image.

import React from 'react';

function ProfileImage({ image }) {
  return <img src={image} alt="profile" style={{ width: '100px', height: '100px', borderRadius: '50%' }} />;
}

export default ProfileImage;

• ProfileBio Component: A component that displays the user's bio.

import React from 'react';

function ProfileBio({ bio }) {
  return <p>{bio}</p>;
}

export default ProfileBio;

Step 2: Integrating Components in App.js 

Now integrate your <strong>ProfileCard</strong> component into the <strong>App.js</strong> to render it with some example data.

import React from 'react';
import './App.css';
import ProfileCard from './ProfileCard';

function App() {
  return (
    <div className="App">
      <ProfileCard
        name="Jane Doe"
        image="<https://example.com/janedoe.jpg>"
        bio="Web Developer and Cat enthusiast."
      />
    </div>
  );
}

export default App;

Step 3: Styling 

Add some CSS to style the profile card. This could include adding margins, aligning text, setting fonts, and more.

.profile-card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

This project not only reinforces your understanding of React components and props but also gives you a practical output that could be used in real-world applications. Enjoy building and customizing your profile card!