vtucircle » BCSL657B Program 5

5. Develop a React application that demonstrates component composition and the use of props to pass data. Create two components: FigureList: A parent component responsible for rendering multiple child components. BasicFigure: A child component designed to display an image and its associated caption. Use the FigureList component to dynamically render multiple BasicFigure components. Pass image URLs and captions as props from the FigureList component to each BasicFigure component. Style the BasicFigure components to display the image and caption in an aesthetically pleasing manner. Arrange the BasicFigure components within the FigureList in a grid or list format. Allow users to add or remove images dynamically. Add hover effects or animations to the images for an interactive experience.

Step 1: Create a New React Application
First, you need to create a new React app using below command. Open your terminal and run:

npx create-react-app figure-gallery

This will set up a new React project in a folder called figure-gallery. After the installation is complete, navigate to the project directory:

cd figure-gallery

Step 2: Set Up the Folder Structure
Create the folder structure. Here’s how you can organize the directories:

Inside the src folder:
- Create a components folder.
- Inside components, create BasicFigure.js and FigureList.js.

BasicFigure.js:

// BasicFigure.js
import React from 'react';

const BasicFigure = ({ imageUrl, caption }) => {
  return (
    <div className="figure">
      <img src={imageUrl} alt={caption} className="figure-image" />
      <p className="figure-caption">{caption}</p>
    </div>
  );
};

export default BasicFigure;

FigureList.js: If you want to use your own local images, follow these steps: Create a folder called images inside the public folder. Place your image (for example, placeholder-image.jpg) inside the public/images folder. In your FigureList.js, instead of using an online URL for placeholder images, reference your local image from the public/images folder. When referencing files from the public folder, you can use a relative path starting with /images/.

// FigureList.js
import React, { useState } from 'react';
import BasicFigure from './BasicFigure';

const FigureList = () => {
    const [figures, setFigures] = useState([
        { imageUrl: 'https://picsum.photos/400', caption: 'Random Image 1' },
        { imageUrl: 'https://picsum.photos/400', caption: 'Random Image 2' },
        { imageUrl: 'https://picsum.photos/400', caption: 'Random Image 3' },
        { imageUrl: 'https://picsum.photos/400', caption: 'Random Image 4' },

    ]);

    const addFigure = () => {
        const newFigure = {
            imageUrl: `https://picsum.photos/400?random=${figures.length + 1}`,
            caption: `Random Image ${figures.length + 1}`,
        };
        setFigures([...figures, newFigure]);
    };

    const removeFigure = () => {
        const updatedFigures = figures.slice(0, -1);
        setFigures(updatedFigures);
    };

    return (
        <div className="figure-list-container">
            <div className='button-box'>
                <button onClick={addFigure} className="action-button">Add Image</button>
                <button onClick={removeFigure} className="action-button">Remove Image</button>
            </div>
            <div className="figure-list">
                {figures.map((figure, index) => (
                    <BasicFigure key={index} imageUrl={figure.imageUrl} caption={figure.caption} />
                ))}
            </div>
        </div>
    );
};

export default FigureList;

Step 3. App Component(src/App.js):
In your src/App.js, import the FigureList component and use it or copy the below code and paste it into the App.js file.

// App.js
import React from 'react';
import FigureList from './components/FigureList';
import './App.css';

const App = () => {
  return (
    <div className="app">
      <h1>Dynamic Image Gallery</h1>
      <FigureList />
    </div>
  );
};

export default App;

Step 4: Add Some Basic Styles(src/App.css)
Add some styles in src/App.css to make the layout nicer. Copy the below code and paste it into the App.css file.

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  background: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
}


.figure-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}
.button-box {
  display: block;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}

.action-button {
  padding: 10px 20px;
  margin: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  background-color: #45a049;
}

.figure-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.figure-list img {
  max-width: 200px;
  max-height: 200px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}

.figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.figure:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.figure-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  object-fit: cover;
}

.figure-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
  text-align: center;
}

Step 5: Run the application
Back in your terminal, start the development server by running:

npm start

OUTPUT:

“Fixing the Module not found: Error: Can't resolve 'web-vitals' Error in React”

The error you’re seeing occurs because the web-vitals package, which is used for performance monitoring in a React app, is not installed by default in the project or has been removed. Since web-vitals is an optional package, you can safely resolve this issue by either installing the package or removing the code that imports it.

Option 1: Install the web-vitals package
If you want to keep the performance monitoring functionality and resolve the error, simply install the web-vitals package.

In the terminal, navigate to your project folder (if not already there):

cd figure-gallery

Install web-vitals by running the following command:

npm install web-vitals

After installation is complete, restart the development server:

npm start

This should resolve the error, and your application should compile correctly.

Option 2: Remove the Web Vitals Code (If Not Needed)
If you don’t need performance monitoring and want to get rid of the error, you can safely remove the import and usage of web-vitals from your code.

Open src/reportWebVitals.js and remove its contents or just comment out the code:

// import { reportWebVitals } from './reportWebVitals';

// You can safely remove the call to reportWebVitals or leave it commented out
// reportWebVitals();

Save the file, and the application should compile without the error. You can now continue developing your app.

BCSL657B Program 5

VTU Links

Quick Links

About vtucircle

Follow Us