Call an External API


Congratulations! You’ve finished your first React App. It was probably easy. After all, React’s documentation is excellent. It’s at the same time thorough but easy to follow. So let’s complicate things a little.

It’s time for you to combine a React App to a .NET WebAPI. Since this is the first time you’re doing it, we will keep it simple. We will only be showing data coming from the API via Get requests. This will reinforce what you’ve learned in the first app, and will exercise your creativity. Oh, and by the way, we will also be training .NET Web Apis again. Let’s go!


  • This is an application where you should present data coming from a .NET WebAPI using React.
  • Your application can only have GET requests.
  • You cannot use AXIOS to fetch the data, you have to use JS Fetch API
  • You should create an API of your choice, with a model representing a single table.
  • One of the properties of your API's model should be imageUrl, with a link to pictures that will be shown by the react app.
  • You can choose whatever ORM you want: Dapper, EF, ADO.NET.
  • Your app needs to have a list of records and a page to visualise an individual record.
  • Your app should show a 'Loading Data...' message while the request hasn't been completed.
  • If there's a server error, the user should be informed.


Connecting to an API using Fetch JS is incredibly easy. But chances are you’ll find a cross-origin error. Don’t forget to visit these links to solve it.


Log in to mark this article as read and save your progress.
An unhandled error has occurred. Reload 🗙