React: Working with APIs (2018)
1h 18mIntermediate2018-02-27
Authors
Emmanuel Henri
Executive with 20+ years of experience in programming and design
Course details
While React simplifies the challenge of making API calls, figuring out how best to structure your application around an API is more difficult. There are two primary approaches: using the React built-in fetch methods, or using axios, a promise-based library. This course showcases the strengths of each technique. Instructor Emmanuel Henri covers the basic concepts behind REST APIs and shows how to build reusable components that use fetch methods to call real-world APIs like News API. He then shows how to connect to APIs using axios, which simplifies API calls by automatically transforming JSON data. By the end of the course, you should have the skills to structure API calls, maintain state, and make users happy.
Learning objectives
Setting up the React project
Fetching data
Updating your state
Using the axios library to make HTTP requests
Learning objectives
Setting up the React project
Fetching data
Updating your state
Using the axios library to make HTTP requests
Skills covered
React.jsAPIsMetaFront-End Web DevelopmentWeb DevelopmentSoftware DevelopmentDeep Dive (X:Y)
Concepts
Introduction
- Welcome
- What you should know
- Using the exercise files
Setting Up
- Introduction to your toolset
- Initialize a React project
- Useful concepts
- Introduction to the APIs
Fetch Methods for APIs
- Initial component for news
- Fetch data and update your state
- Finalize component with data
- Challenge - Refactor component for reuse
- Solution - Refactor component for reuse
axios
- Introduction to axios
- Update structure of the application
- Create a new component for side news
- Add new methods for axios
- Add an error component for fetch errors
Conclusion
- Next steps