Skip to main content

✏️ React with API (Multi-Week Project)

Goals: Build a React application that makes API calls. Follow along with the weekend lessons to make an API call with the useReducer() hook, and then a light/dark theme with context. Then spend the remaining class sessions building out a project with your pair or group. This project will utilize your skills with React to consume any API of your choosing.

Warm Up​

  • At what point in a React component's lifecycle might we make an API call and why?
  • When should we prefer to use the useReducer() hook versus the useState() hook for state management?
  • Is context a state management tool? Explain why or why not.
  • Name some use cases for context.
  • Name alternatives to using context.

Code​

React with API Calls and Context​

Work through the weekend homework to make a React application that makes an API call to the NY Times API. Then implement a light/dark mode in the Help Queue with the use of context.

Full Stack Project​

Spend the next three class sessions building a React application around an API of your choosing. You may create any type of application as long as it uses the following:

  • React
  • React hooks to manage state
  • The Fetch API

Note: If you wish, you may also try React Native, which is designed for mobile development. See the upcoming homework if you are interested.

For a starting list of potential APIs to choose from, take a look at this repository containing public APIs.

Peer Code Review​

  • Application parses API response and displays response data in the UI.
  • State is managed with hooks.
  • React application has detailed README with local deployment instructions and links to other repos related to the project if applicable.