On our homepage we need an icon/button to represent the users profile, and when we click on it it redirects to that users page. This icon could also be used for redirecting to other users profiles. We will need a ProfileIcon component.
For now just create a circular image/component with some sort of placeholder image and it should be able to handle a click and redirect to a page, we will deal with redirects later for now just let it handle a click.
Tutorial
Follow these steps to create the icon component:
1) Make sure the branch is properly updated. In the terminal run:
git checkout main
git pull
2) Before we write our code lets make a new branch:
git checkout -b <BranchName>
Remember: can be any name (like profileIcon)
3) Time to code:
Code Tutorial:
Here are the steps to make the component.
Within the templates folder you will want to make a new file called ProfileIcon.js
within the folder start with some boilerplate code:
Within the return we will need something to house an image. Fill with <img ' src="" alt="" />
Now what belongs in the src tag can just be a default profile photo, like one instagram uses. We will fill in the image later .
We are now done with making the component.
Optional:
Of course if you can, make a ProfileIcon.css file and apply styles to the img tag. This would require a className within the image tag, which you then style in the css file, specifically adding a border-radius: 50%; and adjusting the image size as one deems fit
4) Once you are done with implementation update your local branch with any new changes from main:
git merge main
5) Stage and commit your changes to the remote branch:
git add .
git commit -m <Your-message>
Please make it clear what you did in your message
6) Move the local branch changes to the remote branch. Since this is a new branch we do:
On our homepage we need an icon/button to represent the users profile, and when we click on it it redirects to that users page. This icon could also be used for redirecting to other users profiles. We will need a ProfileIcon component.
For now just create a circular image/component with some sort of placeholder image and it should be able to handle a click and redirect to a page, we will deal with redirects later for now just let it handle a click.
Tutorial
Follow these steps to create the icon component:
1) Make sure the branch is properly updated. In the terminal run:
2) Before we write our code lets make a new branch: can be any name (like profileIcon)
git checkout -b <BranchName>Remember:3) Time to code:
Code Tutorial:
Here are the steps to make the component.
Within the
templatesfolder you will want to make a new file calledProfileIcon.jswithin the folder start with some boilerplate code:
Within the
returnwe will need something to house an image. Fill with<img ' src="" alt="" />Now what belongs in the
srctag can just be a default profile photo, like one instagram uses. We will fill in the image later . We are now done with making the component.Optional: Of course if you can, make a
ProfileIcon.cssfile and apply styles to theimgtag. This would require aclassNamewithin the image tag, which you then style in the css file, specifically adding aborder-radius: 50%;and adjusting the image size as one deems fit4) Once you are done with implementation update your local branch with any new changes from main:
git merge main5) Stage and commit your changes to the remote branch:
Please make it clear what you did in your message
6) Move the local branch changes to the remote branch. Since this is a new branch we do:
git push --set-upstream origin <Your-Branch-Name>7) Create a pull request :)
Here are some useful resources:
https://react.dev/learn/your-first-component https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius https://www.w3schools.com/css/css3_images.asp