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 an API project with your pair or group. This project will combine a React front end with an API from your back end language class.

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 built during your back end language class. You may create any type of application as long as it uses the following:

  • React
  • React hooks to manage state
  • The Fetch API
  • A .NET or Rails API from your back end class

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

Peer Code Review​

  • Back end API works correctly.
  • Application parses API response and displays response data in the UI.
  • State is managed with hooks.
  • Front and back end have their own repositories and detailed READMEs with local deployment instructions and links to other repos related to the project.