React - Level 3 - React with Intermediate JS - Build a Fun Animal Gallery with React

[akash-coded]

Title: Build a Fun Animal Gallery with React!

---

Hello, aspiring React developer!

Now that you've got a grasp of the basics of React, including components and props, let's put that knowledge into action with some classic JavaScript concepts like arrays, loops, and functions.

In this exercise, we'll create a simple but engaging Animal Gallery app. You'll display a list of animals with their names and images using React components, and along the way, we'll reinforce key JavaScript concepts.

Ready to dive in? Let's get started!

---

🌟 Exercise Overview

Objective: Create a React app that displays a gallery of animals using components, props, and JavaScript concepts like arrays and loops.

What You'll Learn:

• How to create and use functional components.
• Passing data between components using props.
• Rendering lists using JavaScript loops.
• Using arrays to manage data.
• Implementing functions to process data.

---

🛠️ Let's Get Started!

Step 1: Set Up Your React App

First, let's set up a new React app:

npx create-react-app animal-gallery
cd animal-gallery
npm start

This will start the development server and open your app in the browser.

---

Step 2: Plan Your Components

We'll create the following components:

1. App - The main parent component.
2. Gallery - A component that displays the list of animals.
3. AnimalCard - A child component that represents a single animal card.

---

Step 3: Prepare Your Data

In App.js, we'll define an array of animal objects. Each object will contain a name and an image URL.

App.js

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

function App() {
  const animals = [
    {
      name: 'Lion',
      image: 'https://example.com/lion.jpg',
    },
    {
      name: 'Elephant',
      image: 'https://example.com/elephant.jpg',
    },
    {
      name: 'Giraffe',
      image: 'https://example.com/giraffe.jpg',
    },
    // Add more animals as desired
  ];

  return (
    <div className="App">
      <h1>Animal Gallery</h1>
      <Gallery animals={animals} />
    </div>
  );
}

export default App;

Concepts Used:

• Arrays: Managing a collection of data.
• Objects: Storing related data in key-value pairs.
• Props: Passing data to child components.

---

Step 4: Create the Gallery Component

Create a new file called Gallery.js in the src folder.

Gallery.js

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

function Gallery(props) {
  return (
    <div className="gallery">
      {/* Loop through the animals array and render AnimalCard components */}
      {props.animals.map(animal => (
        <AnimalCard key={____} name={____} image={____} /> // Fill in the blanks
      ))}
    </div>
  );
}

export default Gallery;

📝 Hints:

• Use a unique key for each AnimalCard component. You can use the animal's name.
• Pass the name and image props to the AnimalCard component.

Concepts Used:

• Loops: Using map() to iterate over an array.
• Props: Passing data to child components.
• Keys: Providing a unique identifier for each item in a list.

---

Step 5: Create the AnimalCard Component

Create a new file called AnimalCard.js in the src folder.

AnimalCard.js

import React from 'react';

function AnimalCard(props) {
  return (
    <div className="animal-card">
      <h2>____</h2> // Fill in the blank
      <img src={____} alt={____} /> // Fill in the blanks
    </div>
  );
}

export default AnimalCard;

📝 Hints:

• Display the animal's name using props.name.
• Set the src attribute of the img tag to props.image.
• Use props.name for the alt attribute for accessibility.

Concepts Used:

• Props: Accessing data passed from parent components.
• JSX Elements: Rendering HTML elements with dynamic data.

---

Step 6: Style Your App

Let's add some basic styling to make the gallery look nice. Update App.css.

App.css

.App {
  text-align: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.animal-card {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.animal-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

Concepts Used:

• CSS Styling: Enhancing the visual presentation.

---

Step 7: Run Your App

Save all your files, ensure your development server is running (npm start), and check your app in the browser. You should see your animal gallery displayed!

---

🔄 Recap and Concepts

• Components: Reusable pieces of UI in a React app.
• Props: Passing data from parent to child components.
• Arrays and Objects: Storing and managing collections of data.
• Loops (map()): Iterating over arrays to render lists.
• Keys in Lists: Providing unique identifiers for list items.
• JSX Syntax: Embedding JavaScript expressions in JSX.
• Functions: Encapsulating reusable code.

---

🧩 Fill-in-the-Blanks Solutions

Step 4: Gallery.js

function Gallery(props) {
  return (
    <div className="gallery">
      {props.animals.map(animal => (
        <AnimalCard key={animal.name} name={animal.name} image={animal.image} />
      ))}
    </div>
  );
}

Explanation:

• key={animal.name}: Using the animal's name as a unique key.
• name={animal.name}: Passing the animal's name as a prop.
• image={animal.image}: Passing the animal's image URL as a prop.

---

Step 5: AnimalCard.js

function AnimalCard(props) {
  return (
    <div className="animal-card">
      <h2>{props.name}</h2>
      <img src={props.image} alt={props.name} />
    </div>
  );
}

Explanation:

• {props.name}: Displaying the animal's name.
• src={props.image}: Setting the image source to the passed image URL.
• alt={props.name}: Providing an alt text for accessibility.

---

🎉 Congratulations!

You've successfully built an Animal Gallery app using React components and fundamental JavaScript concepts. You've learned how to:

• Use Arrays and Objects: To store and manage data.
• Implement Loops: To dynamically render components.
• Pass Props: To share data between components.
• Render Lists: Using map() and unique keys.
• Use Functions and Components: To organize and reuse code.

---

🌟 Let's Dive Deeper into JavaScript Concepts

1. Arrays and Objects

• Arrays are used to store multiple values in a single variable.
• Objects are collections of key-value pairs.

Example:

const animals = [
  { name: 'Lion', image: 'lion.jpg' },
  { name: 'Elephant', image: 'elephant.jpg' },
];

---

2. The map() Function

• The map() method creates a new array by applying a function to each element of the original array.

Example:

const numbers = [1, 2, 3];
const squares = numbers.map(number => number * number); // [1, 4, 9]

In React, map() is commonly used to render lists of components.

---

3. Props in React

• Props (short for "properties") are a way to pass data from parent to child components.

Example:

<AnimalCard name="Lion" image="lion.jpg" />

In the AnimalCard component, you can access these props:

function AnimalCard(props) {
  return <h2>{props.name}</h2>;
}

---

4. Keys in Lists

• When rendering lists in React, each element should have a unique key prop.
• This helps React identify which items have changed, are added, or are removed.

Example:

{animals.map(animal => (
  <AnimalCard key={animal.name} name={animal.name} image={animal.image} />
))}

---

5. Functions and Components

• Components are JavaScript functions that return JSX.
• They help break the UI into reusable pieces.

Example:

function AnimalCard(props) {
  return (
    <div>
      {/* JSX content */}
    </div>
  );
}

---

🌟 Extra Challenges

Let's make the app more engaging by incorporating more JavaScript concepts.

Challenge 1: Add More Animals

Expand your animals array with more animal objects.

Example:

const animals = [
  { name: 'Lion', image: 'lion.jpg' },
  { name: 'Elephant', image: 'elephant.jpg' },
  { name: 'Giraffe', image: 'giraffe.jpg' },
  { name: 'Zebra', image: 'zebra.jpg' },
  { name: 'Tiger', image: 'tiger.jpg' },
];

---

Challenge 2: Sort the Animals Alphabetically

Use a JavaScript function to sort the animals by name before rendering.

App.js

function App() {
  let animals = [
    { name: 'Lion', image: 'lion.jpg' },
    { name: 'Elephant', image: 'elephant.jpg' },
    // ...more animals
  ];

  // Sort animals alphabetically
  animals = animals.sort((a, b) => a.name.localeCompare(b.name));

  return (
    // ...rest of the code
  );
}

Concepts Used:

• Array Sorting: Using sort() to order elements.
• Functions: Implementing comparison logic.

---

Challenge 3: Group Animals by Category

Suppose animals have categories like 'Mammal', 'Bird', 'Reptile'. Update your data and modify your components to group animals by category.

App.js

const animals = [
  { name: 'Lion', image: 'lion.jpg', category: 'Mammal' },
  { name: 'Eagle', image: 'eagle.jpg', category: 'Bird' },
  { name: 'Crocodile', image: 'crocodile.jpg', category: 'Reptile' },
  // ...more animals
];

Gallery.js

function Gallery(props) {
  // Get unique categories
  const categories = [...new Set(props.animals.map(animal => animal.category))];

  return (
    <div className="gallery">
      {categories.map(category => (
        <div key={category}>
          <h2>{category}</h2>
          <div className="category">
            {props.animals
              .filter(animal => animal.category === category)
              .map(animal => (
                <AnimalCard key={animal.name} name={animal.name} image={animal.image} />
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Concepts Used:

• Set and Spread Operator: To get unique categories.
• Filtering Arrays: Using filter() to select items.
• Nested Loops: Rendering lists within lists.

---

Challenge 4: Use Functions to Format Data

Create a function to format animal names (e.g., uppercase the first letter).

App.js

function capitalizeName(name) {
  return name.charAt(0).toUpperCase() + name.slice(1);
}

// Pass this function to AnimalCard via props if needed

AnimalCard.js

function AnimalCard(props) {
  return (
    <div className="animal-card">
      <h2>{capitalizeName(props.name)}</h2> // Use the function
      <img src={props.image} alt={props.name} />
    </div>
  );
}

Concepts Used:

• String Manipulation: Modifying strings with functions.
• Function Composition: Using functions within components.

---

Challenge 5: Conditional Rendering

Display a message if there are no animals to show.

Gallery.js

function Gallery(props) {
  if (props.animals.length === 0) {
    return <p>No animals available.</p>;
  }

  return (
    // ...rest of the code
  );
}

Concepts Used:

• Conditional Statements: Using if to control rendering.
• Length Property: Checking the size of an array.

---

Challenge 6: Add Animal Descriptions

Update your animals array to include descriptions and display them.

App.js

const animals = [
  {
    name: 'Lion',
    image: 'lion.jpg',
    description: 'The lion is a species in the family Felidae.',
  },
  // ...more animals
];

AnimalCard.js

function AnimalCard(props) {
  return (
    <div className="animal-card">
      <h2>{props.name}</h2>
      <img src={props.image} alt={props.name} />
      <p>{props.description}</p>
    </div>
  );
}

Concepts Used:

• Props Expansion: Adding more data to components.
• Component Enhancement: Displaying additional information.

---

Challenge 7: Use External Data

Fetch animal data from an external JSON file or API (without using state).

Note: Since we haven't introduced state or effects, you can simulate this by importing data.

Create a file animalData.js:

const animalData = [
  { name: 'Lion', image: 'lion.jpg', description: '...' },
  // ...more animals
];

export default animalData;

App.js

import animalData from './animalData';

function App() {
  return (
    <div className="App">
      <h1>Animal Gallery</h1>
      <Gallery animals={animalData} />
    </div>
  );
}

Concepts Used:

• Module Import/Export: Sharing data between files.
• Data Organization: Keeping data separate from logic.

---

Understanding the Concepts

1. Arrays and Loops

Arrays store multiple values, and loops allow you to perform actions on each item.

• For Loop:

  for (let i = 0; i < animals.length; i++) {
    console.log(animals[i]);
  }

• For...of Loop:

  for (const animal of animals) {
    console.log(animal.name);
  }

• Array Methods:

  • map(): Transforms each element.
  • filter(): Selects elements based on a condition.
  • sort(): Orders elements.

2. Functions

Functions encapsulate reusable code.

function greet(name) {
  return `Hello, ${name}!`;
}

3. Objects

Objects store data in key-value pairs.

const animal = {
  name: 'Lion',
  habitat: 'Savannah',
};

Access properties with dot notation (animal.name) or bracket notation (animal['name']).

4. Conditional Statements

Control the flow of your program based on conditions.

• If Statement:

  if (animals.length > 0) {
    // Render animals
  } else {
    // Show message
  }

5. Destructuring

Extract values from arrays or objects.

const { name, image } = animal;

Use in function parameters:

function AnimalCard({ name, image }) {
  // Use name and image directly
}

---

🧠 Test Your Understanding

Try to answer these questions without looking back:

1. How do you pass data from a parent component to a child component?

   Answer: By using props.

2. Why is it important to use a unique key when rendering lists in React?

   Answer: To help React identify which items have changed, are added, or are removed, ensuring efficient updates.

3. How can you loop over an array in JavaScript to render multiple components?

   Answer: By using the map() method.

4. What is the purpose of the return statement in a function?

   Answer: To specify the value that the function outputs when called.

---

🚀 Keep Experimenting!

Feel free to modify and expand your Animal Gallery app. Here are some ideas:

• Interactive Features: Although we haven't covered state yet, think about how you might allow users to click on an animal to learn more about it.
• Responsive Design: Use CSS to make your gallery responsive to different screen sizes.
• Custom Components: Create additional components, like a Header or Footer, to organize your app.

---

👩‍💻 Next Steps in Learning React

Once you're comfortable with components and props, the next concepts to explore are:

• State: Managing data that changes over time within a component.
• Events: Handling user interactions like clicks and inputs.
• Lifecycle Methods: Understanding how components are created, updated, and destroyed.

---

Keep up the great work and happy coding!

---