Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork, Commit, Merge - Easy Issue (React) #533

Closed
nikohoffren opened this issue Sep 14, 2023 · 0 comments
Closed

Fork, Commit, Merge - Easy Issue (React) #533

nikohoffren opened this issue Sep 14, 2023 · 0 comments

Comments

@nikohoffren
Copy link
Member

Fork, Commit, Merge - Easy Issue (React)

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!

JulianToppo added a commit to JulianToppo/fork-commit-merge that referenced this issue Sep 16, 2023
nikohoffren added a commit that referenced this issue Sep 16, 2023
#533 Creates a card with random images
GasparBonari added a commit to GasparBonari/fork-commit-merge that referenced this issue Sep 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant