Overview

In this hands-on project, we'll be creating a delightful "Pet Parade" that showcases your favorite animals. To start, we'll focus on displaying a dog with its name and picture. As we build this project, you'll apply what you've learned about JSX, rendering elements, and React components.

Goals

• Learn to build a functional React component.

• Understand how to pass data to components using props.

• Practice rendering lists of data dynamically in React.

Instructions

Step 1: Create the Pet Component We'll start by creating a simple component that represents a pet. In your project's <strong>src</strong> folder, create a new file called <strong>Pet.js</strong>.

import React from 'react';

function Pet(props) {
  const { name, image } = props; // Destructuring. Read more: https://www.w3schools.com/react/react_es6_destructuring.asp
  // The above code is equivalent to:
  // const name = props.name;
  // const image = props.image;
  
  
  return (
    <div className="pet">
      <h2>{name}</h2>
      <img src={image} alt={`Photo of ${name}`} style={{ width: "200px", height: "200px" }} />
    </div>
  );
}

export default Pet;

This component accepts <strong>name</strong> and <strong>image</strong> as props and renders the pet's name and picture. Make sure to add some basic styling so the image fits nicely.

Step 3: Display Your Dog 

Now, integrate this <strong>Pet</strong> component into your main App component. Replace the content in <strong>App.js</strong> with the following:

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

function App() {
  const myDog = {
    name: "Rex",
    image: "<https://example.com/rex.jpg>"  // Replace with an actual image URL of your dog
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to the Pet Parade!</h1>
        <Pet name={myDog.name} image={myDog.image} />
      </header>
    </div>
  );
}

export default App;

Step 4: Testing 

Run your application and see if the dog's name and image are displayed correctly. You should see "Rex" (or your dog's name) along with their picture on the page.

Expanding the Project

Once you've got the basics down, let's move to the Challenge!