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-easyThen 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
divthat has classcenter. - Add
h1tag with the text "React/Vite - Easy" in it. - Add a
divwith a classcard. - Inside the card-div, add
imgtag with this as source: "https://loremflickr.com/320/240". It will create a random image for the card. - Add
h2tag with text "Card Title" inside of it. - Finally, add a
ptag 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!
