Fork, Commit, Merge - Easy Issue (React.js)

[nikohoffren]

Fork, Commit, Merge - Easy Issue (React.js)

Create a simple card component in React that displays a random image

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Description:

• Your task is to create a simple card component in React that displays a random image.

Start by navigating inside of the directory used in this project with the command:

cd tasks/react/easy/react-easy

Then run npm i to install Vite, React and all the necessary dependencies for the project.

After installing the dependencies you can open the src directory and App.jsx file, and start implementing your solution!

All the CSS classes needed in this project has already been done for you in index.css.

Requirements:

• Add all the components inside of the div that has class center.
• Add h1 tag with the text "React/Vite - Easy" in it.
• Add a div with a class card.
• Inside the card-div, add img tag with this as source: "https://loremflickr.com/320/240". It will create a random image for the card.
• Add h2 tag with text "Card Title" inside of it.
• Finally, add a p tag with text "Card Description" in it.

After you are done with the card, make sure you are in the tasks/react/easy/react-easy in your terminal and run npm run dev to start the Vite server. Then, open "http://localhost:5173/" in your browser to check how the card looks.

If the card looks fine, you are ready to make a pull request!

---

To work with this issue, you need to have npm and NodeJS installed to your local machine.
Check out README.md for more instructions of installing npm and NodeJS as well as how to make a pull request.

---

Why use Vite?

This React project uses Vite for near-instant server start-ups and incredibly fast hot module replacements, providing a smooth and efficient development experience.
Also Vite requires minimal setup, allowing us to focus on writing React code without getting bogged down in complex configurations.
If you want to learn more about Vite, check out the documentation:
Vite Official Documentation

---

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

[KamH333]

Are the cards supposed to return a specific card title and description or are they literally supposed to say "card title" and "card description"?

[nikohoffren]

Are the cards supposed to return a specific card title and description or are they literally supposed to say "card title" and "card description"?

Yes they are supposed to say literally "card title" and "card description" since this is just simple educational issue, but feel free to add any text you want, or even add some props to show the desired text if you like.