Belajar React JS: Card Part 3

Now that we’ve learned how to create a basic card component in React, let’s take it to the next level and add some more features to our card.

Adding an Image

To make our card more visually appealing, let’s add an image to it. We can do this by adding an <img> tag inside our card component. Here’s an example:

  
  function Card() {
    return (
      <div className="card">
        <img src="image.jpg" alt="Card image" />
        <div className="card-content">
          <h2>Card Title</h2>
          <p>This is a card description.</p>
        </div>
      </div>
    );
  }
  
  

Adding a Button

Another common feature of a card is a button. We can easily add a button to our card component using the <button> tag. Here’s an example:

  
  function Card() {
    return (
      <div className="card">
        <img src="image.jpg" alt="Card image" />
        <div className="card-content">
          <h2>Card Title</h2>
          <p>This is a card description.</p>
          <button>Click me</button>
        </div>
      </div>
    );
  }
  
  

Styling the Card

Finally, let’s add some CSS to style our card. We can use the <style> tag to add internal styles to our card component. Here’s an example:

  
  function Card() {
    return (
      <div className="card">
        <img src="image.jpg" alt="Card image" />
        <div className="card-content">
          <h2>Card Title</h2>
          <p>This is a card description.</p>
          <button>Click me</button>
          <style>
          .card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 2px 2px 5px #ccc;
          }
          .card-content {
            padding: 10px;
          }
          </style>
        </div>
      </div>
    );
  }
  
  

With these additional features, our card component is now looking more complete and functional. By using HTML tags and React, we can easily create dynamic and interactive card components for our web applications.