Introduction
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!
Requirements
- 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.
Resources
- How to fetch data with React
- Enabling CORS (Cross Origin Resource Sharing) in .NET Web API
- Dealing With CORS errors (Stack Overflow)
- Handling Fetch API errors in React
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.
What you'll learn
- This app should be relatively easy to build. Try not to over complicate it.
- If you want to add extra features, think of: pagination, filters and the ability to create a list of 'favourite' records.
- Think of a project that has plenty of good images online and keep it simple. Examples: Dogs, Cats, Movies, Cars, Athletes, Singers, Bands, Drinks.
- Another variation of this project would be to call a public api. Click to view a massive list.
Review Repository
https://github.com/TheCSharpAcademy/CodeReviews.React.ExternalAPI