How to use CardMedia Component in ReactJS?

The CardMedia Component enables users to incorporate media, such as photos or videos, into specific cards. Material UI for React provides a user-friendly integration of this component, making it straightforward to use.

Prerequisite:

• React JS
• Material UI

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React from "react";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import Button from "@material-ui/core/Button";
import CardActions from "@material-ui/core/CardActions";

export default function App() {
    return (
        <div style={{}}>
            <h4>How to use CardMedia Component in ReactJS?</h4>
            <Card style={{ width: 400 }}>
                <CardActionArea>
                    <CardMedia
                        alt="GeeksforGeeks"
                        component="img"
                        title="GeeksforGeeks"
                        height="150"
                        image=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
                    />
                    <CardContent>
                        <Typography gutterBottom variant="h5" component="h2">
                            GeeksforGeeks
                        </Typography>
                        <Typography variant="body2"
                            color="textSecondary"
                            component="p">
                            Best Computer Science Portal #Best
                            #CS #ComputerScience #website
                        </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <Button size="small" color="primary">
                        Comment
                    </Button>
                    <Button size="small" color="primary">
                        Share
                    </Button>
                </CardActions>
            </Card>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000