simple-hooks

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.

Custom Hook

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}.

Setup

1. Clone the repository: git clone https://github.com/bobmacneal/simple-hooks.git
2. Install Yarn for package management.
3. Install node dependencies using yarn: yarn

Run

• Run app locally: yarn start

Hat Tips

• 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 axios GET 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.