With the demand for full stack development uplifting heights and more developers moving toward React.js, budding professionals are often in the lookout for the best React js course in the skill market. React is a JavaScript library used to build futuristic and dynamic interfaces for web applications. Due to its unbeatable speed, unique customization features, and simplicity of use, React is becoming a popular choice among developers.
Mostly, React is renowned for creating user interfaces; however, single-page applications can also be built using React. It has stand-out functionalities and customization options that enable us to create reusable user interface components. Reactstrap is a bootstrap-based react UI library used to create visually appealing web pages with its seamless and simple-to-use component.
We will learn how to use the Card Component in ReactJS in this article. We will create a react-bootstrap card that will act as a content container. The Card will include header and footer options, a wide range of content, contextual background colors, and powerful display options. Also, we will add panels, wells, and thumbnails to our cards. Usage of React cards will be discussed with the help of a suitable example.
Let us Start!
What is React card?
A content container is a react card component. It includes image, header, and footer options, a wide range of content, contextual background colors, and excellent display options.
React card component is a versatile and adaptable container for displaying content. The Card comes with a slew of variants and options.
Structure of a React Card
The Card is a small container in which the user can show defined content in a specific structure.
i. Header: Header supports include title, subtitle along with images.
ii. Images and Title: Support including images with customizable caption positions in them.
iii. Action Buttons: Supports adding buttons within the Card either in vertical or horizontal alignment.
React horizontal scroll cards menu component has adaptive width, just set width for parent container. The item's width will be determined by CSS (Cascading Style Sheets) styles.
React Card has the following properties:
Property | Function |
tag | Defines the cards in tags. |
className | Associate a custom class with a Card. |
border | Defines the Card's border |
shadow | Sets cards shadow. |
background | Species the color of the background of Cards. |
alignment | Set the alignment of text and content inside the cards. |
Usage of React Card
Bootstrap cards are a popular bootstrap component. Cards make it simple to align content with a flexible and extensible container. Cards are designed in such a way that the content can be properly auto-aligned.
React Bootstrap provides <Cards> component to use the card container. It also support the <Card.Header>, <Card.Body>, <Card.Img>, <Card.ImgOverlay>, <Card.Link>, <Card.Title>, <Card.Text>, and <Card.Group> sub components to specify position of the card content. Additionally, you can use Material-UI Card component and create react material ui card to show different contents with actionable items.
To use the card container, specify the < Card> </Card> component and its content within the Card and import it as follows:
import Card from 'react-bootstrap/Card'
We will use the following codes in our React card example:
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container ,Card, Col, Button} from 'react-bootstrap';
import img1 from './img1.jpg';
function App() {
return (
<div className="App">
<Container className='p-4'>
<Col md="4">
<Card>
<Card.Img variant="top" src={img1} />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae molestie magna. Vivamus sed molestie enim, eu convallis mauris. Aliquam pharetra velit ac enim maximus, a commodo augue hendrerit. Phasellus at aliquam est
</Card.Text>
<Button variant="primary">Read More</Button>
</Card.Body>
</Card>
</Col>
</Container>
</div>
);
}
export default App; In the output, you expect the card content is properly aligned without applying any additional CSS properties.
<Card.Body>
The body component specifies some card content. When we increase the card content, the card height adjusts automatically. Within the <Card> </Card> component, the <Card.Body> component is used. Consider the following scenario:
<Card>
<Card.Body>Hello this is a card body.</Card.Body>
</Card>
<Card.Title>, <Card.Subtitle>, and <Card.Text>
These components are used in conjunction with the < Card.Body> </Card.Body> component. They are used to define the title, which will be bold and large, the subtitle, which will be lighter and smaller, and the text of the Card, as their name implies.
For example:
<Card>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae molestie magna. Vivamus sed molestie enim, eu convallis mauris. Aliquam pharetra velit ac enim maximus, a commodo augue hendrerit. Phasellus at aliquam est
</Card.Text>
</Card.Body>
</Card>
<Card.Link>
This component is also used within the <Card.Body> component. It allows us to specify the navigation link for the card.
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container ,Card, Col, Button} from 'react-bootstrap';
import img1 from './img1.jpg';
function App() {
return (
<div className="App">
<Container className='p-4'>
<Col md="4">
<Card>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae molestie magna. Vivamus sed molestie enim, eu convallis mauris. Aliquam pharetra velit ac enim maximus, a commodo augue hendrerit. Phasellus at aliquam est
</Card.Text>
<Card.Link href="#">Link 1</Card.Link>
<Card.Link href="#">Link 2</Card.Link>
</Card.Body>
</Card>
</Col>
</Container>
</div>
);
}
export default App; List Groups Using Cards
Card containers are not just for making products, blogs, and profiles. We can also use cards to make incredible list groups. Let us look at how to make list groups with cards.
When listing groups using cards, semantic UI framework is a great option. You can create semantic UI react Card to create customized designs and styles. to create customized designs and style.
In this guide, we wil use the <ListGroup> and <Listgroup.Item> components inside a <Card> component to create the list group with card.
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container ,Card, Col, ListGroup} from 'react-bootstrap';
import img1 from './img1.jpg';
function App() {
return (
<div className="App">
<Container className='p-4'>
<Col md="4">
<Card>
<ListGroup variant="flush">
<ListGroup.Item>List Item 1</ListGroup.Item>
<ListGroup.Item>List Item 2</ListGroup.Item>
<ListGroup.Item>List Item 3</ListGroup.Item>
<ListGroup.Item>List Item 4</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Container>
</div>
);
}
export default App; Card Groups
To properly layout the cards, we can use the <CardGroup> component. The <CardGroup> component will contain the <Card> component. The card group component's beauty is that it aligns the card height evenly to make it look uniform. Consider the following scenario:
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container ,Card, CardGroup, Button} from 'react-bootstrap';
import img4 from './img4.jpg';
function App() {
return (
<div className="App">
<Container className='p-4'>
<CardGroup>
<Card >
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Less Content
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card >
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
some more content with Lorem Ipsum is simply dummy text of the printing and typesetting industry
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card >
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some more content with Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card >
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Larger text with Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</CardGroup>
</Container>
</div>
);
}
export default App;Once you start feeling comfortable working with card groups, try building react carousel cards. If you are looking forward to getting started from scratch, checkout complete React course from Knowledgehut. With world-class professionals and pocket-friendly web development course fees, we have the best course material to help you build concepts and make you job-ready.
Props
Whether a component is declared as a function or a class, it must never modify its own props.
Consider the following sum function:
function sum(a, b) {
return a + b;
}These functions are referred to as "pure" because they never try to change their inputs and always return the same result for the same inputs.
This function is impure because it modifies its own input:
function withdraw(account, amount) {
account.total -= amount;
}React is quite adaptable, but there is one hard and fast rule:
In terms of their props, all React components must behave like pure functions.
React Props
React Props in React is like JavaScript function arguments and HTML attributes.
Use the same syntax as HTML attributes to send props into a component:
Example:
Add a "brand" attribute to the Car element:
const myElement = <Car brand="Mercedes" />;
The argument is passed to the component as a props object. Use the brand attribute in the component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}Using Props to Pass Data
Props are also used to pass data from one component to another in the form of parameters.
Example:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Mercedes" />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);If you want to send a variable rather than a string, just put the variable name inside curly brackets:
Create a variable named carName and send it to the Car component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Mercedes";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);If it were an object, you would do the following:
Create an object named carInfo and send it to the Car component:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Mercedes", model: "G-Wagon" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);Key Features of React Card
- JSX(JavaScript Syntax Extension)
JSX is a hybrid of HTML and JavaScript. JavaScript objects can be embedded within HTML elements. Because JSX is not supported by browsers, the Babel compiler transcompiles the code into JavaScript code. JSX simplifies and clarifies code. It is simple to learn if you are familiar with HTML and JavaScript. - Virtual DOM
DOM is an abbreviation for Document Object Model. It is the most important part of the web because it divides the code into modules and executes it. Typically, JavaScript Frameworks update the entire DOM at once, making the web application slow. However, react employs virtual DOM, which is a carbon copy of real DOM. When a change is made to a web application, the entire virtual DOM is updated first to determine the difference between real DOM and Virtual DOM. When it finds the difference, DOM updates only the part that has changed recently, leaving the rest unchanged. - One-way Data Binding
One-way data binding, as the name implies, is a one-way flow. The data in react flows only in one direction, from top to bottom, from parent components to child components. The child component's properties (props) cannot return data to its parent component, but it can communicate with the parent components to modify the states based on the inputs. - Components
Because it is component-based, React.js divides the web page into multiple components. As shown in the image below, each component is a part of the UI design and has its own logic and design. As a result, the component logic written in JavaScript makes it simple, faster to run, and reusable. - Lifecycle Methods
Lifecycle methods are hooks that let you run code at various points in a component's existence. Thus, managing features in a React application is simple.
How to Use Card Component in ReactJS?
Writing a JavaScript function is the simplest way to define a component:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
} The function used in the program is a valid React component. It accepts a single "props" (properties) object as an argument and returns a React element. As these functions are JS-based functions, they are technically known as the "function components."
A content container is a react card component. It includes image, header, and footer options, a wide range of content, contextual background colors, and excellent display options.
Cards are built with as little markup and styling as possible while still providing a lot of control and customization.
Cards have no default top, left, or right margins, so use spacing utilities as needed. They have no fixed width, to begin with, so they will fill the entire width of their parent.
We can use the Card Component in ReactJS using the following approach:
Creating React Application and Installing Module
1. Use the following command to create a React application.
npx create-react-app tutorials
2. After you have created your project folder, i.e., tutorials, use the following command to move to it.
cd tutorials
3. Install the material-UI modules after creating the ReactJS application with the following command:
npm install @material-ui/core
Now add the following code to the App.js file:
import React from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
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 CardComponent in ReactJS?</h4>
<Card
style={{
width: 400,
backgroundColor: "yellow",
}}
>
<CardContent>
<Typography
style={{ fontSize: 14 }}
color="textSecondary"
gutterBottom
>
Greetings of the day
</Typography>
<Typography variant="h5" component="h2">
How are you ?
</Typography>
<Typography
style={{
marginBottom: 12,
}}
color="textSecondary"
>
Keep Motivated
</Typography>
<Typography variant="body2" component="p">
Stay Happy
</Typography>
</CardContent>
<CardActions>
<Button size="small">Stay Safe.....</Button>
</CardActions>
</Card>
</div>
);
}4. Run the application from the project's root directory by issuing the following command:
npm start
5. Now open your browser and go to http://localhost:3000/, you will see the following output.
Class component
The extends React.Component statement must be included in a class component. This statement adds an inheritance to React.Component and grants your component access to the functions of React.Component.
The render() method, which returns HTML, is also required by the component.
Example:
Create a class component called boy:
class Boy extends React.Component {
render() {
return <h2>Hi, I am a Boy!</h2>;
}
}Function Component
A Function component, like a Class component, returns HTML and behaves similarly, but Function components can be written with much less code and are easier to understand.
function Boy() {
return <h2>Hi, I am a Boy!</h2>;
}Rendering a component
Your React application now has a Boy component that returns an <h2> element.
To include this component in your application, use the following syntax: <Boy />
Display the Boy component in the "root" element:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Boy />);How to create React Card
How to Create React Cards
Initially, we will create a react app. Type out the following command on your command prompt to create a new app:
npx create-react-app reactcard
You then need to install bootstrap using the following command:
npm install react-bootstrap bootstrap
In App.js, import the card component and the bootstrap CSS.
Key Considerations When Designing a Card
- All contents should be presented in a single component.
- Other auxiliary elements are not required to provide context for the Card's information.
- From these small facts, we can focus on the entity's anatomy. Because most of those elements appear to be optional, we will only focus on these today:
- Container - includes all the Card's components, which usually influence the dimensions of the Card; nevertheless, I prefer to do the opposite, defining the ample space they can fill.
- Thumbnail - a significant visual feature, but just for stylistic reasons in this article.
- Buttons - in most cases, the controls are clustered together in a single space, and each button represents an activity that the user performs.
Note: One of the React cards traits that might fascinate you is its superb reaction behaviors. We encourage you to read the Material Design website, which covers what functionality this component should have in-depth.
Looking to land your dream job? Look no further! Discover the best Python course for job seekers. Master this powerful programming language and unlock endless career opportunities. Start your journey today!
Conclusion
In this guide, we have covered the React card components to help you get started. If this is your first React app, we cover much ground. Use the concepts discussed in this tutorial to create dynamic cards and add advanced features like react bootstrap card shadow.
One of the essential takeaways is that React uses a new language called JSX to specify graphics. JSX is more than just a way to design user interface elements. It also alters how you build your App overall. Because your browser cannot support JSX natively, you will need to convert it to JavaScript. To do this, make sure the transpiled JavaScript output matches the JSX source. Alternatively, you can try using the Babel package to convert JSX to JavaScript directly. While it is not recommended for live/production apps, the ease of learning React is hard to beat.
Are you ready to explore your knowledge of React JS and accelerate your web development career? Enroll in KnowledgeHut’s Best React JS course and upskill yourself to climb up the corporate ladder.
