For enquiries call:

Phone

+1-469-442-0620

HomeBlogWeb DevelopmentWhat is the Card UI Component in ReactJS?

What is the Card UI Component in ReactJS?

Published
25th Apr, 2024
Views
view count loader
Read it in
12 Mins
In this article
    What is the Card UI Component in ReactJS?

    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 

    1. 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.
    2. 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.
    3. 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. 
    4. 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. 
    5. 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.  

    Frequently Asked Questions (FAQs)

    1What is the Card UI Component in ReactJS?

    A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. It is both adaptable and extendable, with various versions and possibilities.  

    2How do you use a React Card?

    Start by creating a React application and navigate to it. Then, install the material-ui modules and run commands from the project's root directory to run the program.

    3How do you make a React Card?

     Initially, create a file with all the card details included in it and then assemble the component's styles. Next, import the icons and begin with applying your component's styling. Navigate to the entry file and then import contents from the post.  

    4What is a React Native Card?

    React native Card is an excellent method to present information, typically containing content and activities related to a single topic. Images, buttons, text, and other elements can be included in cards. 

    5How Do You Use Cards React Native?

    First, create a project and install the necessary packages and modules using the npm command. Next, open the App.js file and paste the code inside it. Finally, run the code and use Card React Native on your system.

    6How Do You Make Card View in React Native?

    Begin with creating a react-native application, and then install react-native paper. Make a components folder and add the Cards.js file to it. Use card components directly from the react-native-paper library, and finally, add Create Card to your app.

    Profile

    Sachin Bhatnagar

    Blog Author

    Sachin Bhatnagar is an experienced education professional with 20+ years of expertise in Media & Entertainment and Web Technologies. Currently, as the Program Director - Full-Stack at KnowledgeHut, he excels in curriculum development, hands-on training, and strategic deployment of industry-centric educational programs. His online training programs on have attracted over 25,000 learners since 2014. He actively contributes to the development of full-stack training products, leveraging KnowledgeHut's advanced learning platform. Collaborating with organizational leaders, he ensures the success of these programs and has created several technology programs prominently featured in KnowledgeHut's course offerings.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon