Introduction
It’s time to advance in your React knowledge by creating a full CRUD application with a .NET backend. This time you’ll also need a full CRUD .NET web API, so you get some extra practice in that as well. We’re recommending you stick to the basics and don’t use Redux (a popular state management library used in React). Its learning curve can be quite steep and you’re still taking baby-steps in React. You’ll also have a greater appreciation of Redux if you make a few apps without it first.
Requirements
- This is a CRUD Shopping List App with React and .NET Web API .
- Users should be able to cross items from the shopping-list without deleting them. You can use a IsPickedUp boolean for that.
- You should create two projects: A .NET WebApi and a React app.
- You can choose whatever database solution you want: Sqlite, SQL server or whatever you're comfortable with.
- You can choose whatever ORM you want: Dapper, EF, ADO.NET.
- To keep it simple, don't create a project that allows multiple shopping lists.
- Your database should have a single "ShoppingListItems" table. The objective is to focus on React, so we should avoid the complexities of relational data.
- You CANNOT use Axios or Redux.
Resources
The resources from the previous projects will be helpful in the completion of this project, plus this tutorial:
This is just an example of a tutorial where a React app uses it’s inbuilt Http client to call an api. However React is one of the most popular libraries out there, so feel free to search for other examples.
What you'll learn
- Start by building the complete CRUD .NET Webapi
- In your second step, make sure you can call the get method from the API using React. Once the data is flowing between apps, everything else becomes easier.
Review Repository
https://github.com/TheCSharpAcademy/CodeReviews.React.ShoppingList