This is a sample ReactJs application. It demonstrates one way to use React's built-in hooks such as useEffect and useState, as well as shows an an example of a custom hook in function-based components. Each successful request to the JSONPlaceholder API displays a list of sample data items corresponding to the tab clicked by the user.
Material-UI React components are used for design and functional simplicity.
A React custom hook useAxiosGetItems is demonstrated. The custom hook uses axios to request items from the JSONPlaceholder API. useAxiosGetItems is referenced by a service layer function called getResources. The custom hook returns list items, a loading boolean for a progress indicator, and any HTTP errors that occur during the request: return {listItems, loading, error}.
- Clone the repository:
git clone https://github.com/bobmacneal/simple-hooks.git - Install Yarn for package management.
- Install node dependencies using yarn:
yarn
- Run app locally:
yarn start
-
simple-hooks was inspired by Stephen Grider's Udemy course Modern React with Redux - [2019 Update] which provides a primer on React hooks: Section 25: Hooks with Functional Components. How to fetch data with React Hooks by Robin Wieruch also informed this example.
-
simple-hooks uses JSONPlaceholder, the "Fake Online REST API for Testing and Prototyping", to make
axiosGET requests to fetch todos, posts, photos, and users data from a remote API. -
simple-hooks was bootstrapped with Create React App.
-
See companion simple-hooks-search for a sample search application.