In this exercise, the goal is to learn routing and hooks in react:
- Axios,
- React Hooks
- UseState
- Fork this repo
- Clone this repo
Whenever you create a first significant change, you should make your first commit.
- Follow these guidelines to add, commit and push changes.
In the end of this document, you will find guidelines on how to submit the exercise.
In this lab we will try to work with hooks in react. The main idea of this lab is to under react hooks in detail and also fetch data from external API, process it and display it. We have four components
- HomeComponent
- SearchJobComponent - use forms
- JobComponent -
- PageComponent
api = "https://jobs.github.com/positions.json"
if there is cross origin error
use this api = "https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json"
Kindly see the output:
Fetch the data from the above api in job component, pass the data to home component using props and display it in homeComponent.
Check the output for your reference.
In this progression, your task is to display the complete job description. Keep a button called as View Details. This a toggle button which should toggle between hide and show details.
Check the output for your reference.
In this progression, your task it to set the page number. Each page consists of twenty job posts. When the post exceeds more than twenty it should go to the next page.
Check the output for your reference.
Search form is a separate component. Your task is to include the search form at the top of the HomeComponent. Based on the search filter, fetch the details and display it for the user.
The home component is the parent component which embeds all other component. Please check the screenshots for your reference.
If you didn't add, commit and push the changes you made, this is the last call. 😄
please share your github links with your Mentors. Your Mentor's will check up your work and provide feedback.
If you managed to do it, good job! 🏆
We are proud of you!
Happy Coding ProGrad ❤️!