How to use CardMedia Component in ReactJS?
Last Updated :
14 Dec, 2023
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:
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=
/>
<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
Share your thoughts in the comments
Please Login to comment...