Fork, Commit, Merge - Easy Issue (React)
nikohoffren opened this issue · 6 comments
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
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!
Also, kindly give this project a star to enhance its visibility for new developers!
I have created a react component that generates random images. Now I am unable to create a pull request.
Take a look image attached below. Kindly Suggest possible solutions.
I have created a react component that generates random images. Now I am unable to create a pull request. Take a look image attached below. Kindly Suggest possible solutions.
You have to be in your own cloned repository to make the pull request. So when you go to ananyajain10/fork-commit-merge repo, you should see text "fork-commit-merge had recent pushes" and button "Compare & Pull request" next to it.
Click the "Compare & Pull request" button to proceed to the pull request page of the original fork-commit-merge repository.
I have created a react component that generates random images. Now I am unable to create a pull request. Take a look image attached below. Kindly Suggest possible solutions.
You have to be in your own cloned repository to make the pull request. So when you go to ananyajain10/fork-commit-merge repo, you should see text "fork-commit-merge had recent pushes" and button "Compare & Pull request" next to it. Click the "Compare & Pull request" button to proceed to the pull request page of the original fork-commit-merge repository.
This is my own cloned repository. After I clicked on the "Compare & Pull request" button. Here is the scenario.
How can I create a Pull request here?:(
I have created a react component that generates random images. Now I am unable to create a pull request. Take a look image attached below. Kindly Suggest possible solutions.
You have to be in your own cloned repository to make the pull request. So when you go to ananyajain10/fork-commit-merge repo, you should see text "fork-commit-merge had recent pushes" and button "Compare & Pull request" next to it. Click the "Compare & Pull request" button to proceed to the pull request page of the original fork-commit-merge repository.
This is my own cloned repository. After I clicked on the "Compare & Pull request" button. Here is the scenario.
How can I create a Pull request here?:(
I think the issue is that you don't have anything on the fix-issues branch. As you can see in the screen, the card is not there. Maybe you committed the code in the wrong branch or did not add and commit at all.
You can try to go back to VS Code or whatever editor you are using and try to add and commit the changes again to the fix-issues branch.
I have created a react component that generates random images. Now I am unable to create a pull request. Take a look image attached below. Kindly Suggest possible solutions.
Now the issue is fixed and I have created a pull request. THANKYOU!!
I have created a react component that generates random images. Now I am unable to create a pull request. Take a look image attached below. Kindly Suggest possible solutions.
Now the issue is fixed and I have created a pull request. THANKYOU!!
No problem! I'm glad to hear it works now.