ReactJS components continues to impress me!

Imagine you want to create a section that contains five cards using HTML, CSS, and vanilla JS! How many lines of code would you need? Maybe it would look like this:

<div class="card">
  <img src="path/to/image1.jpg" alt="Image 1">
  <h2>Card 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
  <img src="path/to/image2.jpg" alt="Image 2">
  <h2>Card 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
  <img src="path/to/image3.jpg" alt="Image 3">
  <h2>Card 3</h2>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="card">
  <img src="path/to/image4.jpg" alt="Image 4">
  <h2>Card 4</h2>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

OMG! That's a lot of lines!

But in React, you can create a reusable Card component in a separate file (e.g., Card.jsx) and pass props to it like this:

export default function Card(props) {
  const { name, title, src, alt } = props; // destructuring props object
  return (
    <div>
      <h1>{name}</h1>
      <img src={src} alt={alt} />
      <p>{title}</p>
    </div>
  );
}

Then, in your App.js file, you can simply import the Card component and use it like this:

import Card from './Card';

function App() {
  return (
    <div>
      <Card
        name="Card 1"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        src="path/to/image1.jpg"
        alt="Image 1"
      />
      <Card
        name="Card 2"
        title="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        src="path/to/image2.jpg"
        alt="Image 2"
      />
      <Card
        name="Card 3"
        title="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        src="path/to/image3.jpg"
        alt="Image 3"
      />
      <Card
        name="Card 4"
        title="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
        src="path/to/image4.jpg"
        alt="Image 4"
      />
    </div>
  );
}

You can use a loop (e.g., map) to generate the cards dynamically based on an array of data if you need to render a large number of cards.

so it's may look like this :

import arr from './Mocks/images_objects'
export default function App() {

    return ( 
       <div className='App'>
        {arr.map((object, index) => (
        <Card
          key = {index}
          name={"john Doe"}
          title={"welcome"}
          src={object.src}
          alt = {object.alt}
        />
      ))}
       </div>


      );
}

Blog

ReactJS components continues to impress me!

Izzedeen Alfarra

Join Our Newsletter. No Spam, Only the good stuff.

Related