Build a TodoList Fast with React and ASP.NET Core API

Install dotnet core 6 using the official release candidate installers for mac arm64 or x64, or windows x64, then verify by running dotnet --version in the terminal.

Install and connect to SQL Server, configure the server name and Windows authentication, then create a new database named App and prepare an empty testing database for upcoming tables.

Create an ASP.NET Core API project in Visual Studio 2022 using .NET 6.0 with no authentication, inspect controllers, and prepare to marshal data from a database or data service.

Install Entity Framework Core and EF Design Tools through the package manager to prepare database connectivity for the ASP.NET Core API.

Set up a database connection by creating a default connection string in appsettings.json and using GetConnectionString in program.cs. Prepare a database model and a database context for future steps.

Create a todo model with id, title, and completed properties, then define a sql server db context with a todo dbset and configure services.

Create and apply an Entity Framework Core migration to mirror your todo list schema, then update the database and verify id, title, and completed columns in SQL Server.

Create an ASP.NET Core todos controller with CRUD actions using a private readonly to do context and entity framework to manage todos after migrations.

Build an async get-todo endpoint with entity framework core, query the context for a to-do, handle not found, and return the result.

Create a post to do method that saves a to-do to the database, uses the context to add it and save changes, and returns the new to-do with its id.

Update a todo item with Entity Framework Core using an async put, handle bad requests, mark the entity as modified, manage concurrency exceptions, and verify existence with a private method.

Implement an async delete method for todos using Entity Framework Core to locate, remove, and save changes, returning not found or no content, and test with Insomnia or Postman.

Run the ASP.NET Core restful API and test it with insomnia, observe the port allocated in the command line, and perform create, read, update, and delete operations on to-dos.

Create a new React app with create-react-app, install dependencies, and integrate a ui framework featuring buttons, pagination, date pickers, forms, and inputs, then run in Visual Studio.

Learn to set up a React project structure by creating services and components folders, adding a to-do service file, and building to-do form, item, list, and tab components.

Define a base URL (localhost:8000), with an optional environment variable to configure the API endpoint. Implement fetch methods to get all todos and to get a todo by id.

Build a todo service in React and ASP.NET Core API that creates todos with post request sending a JSON body containing title and completed, then adds update and delete methods.

Create a todo form in React, using form components and an onFinish handler, managed by useForm to capture title and reset fields as the first part of a multi-part form.

Finish wiring the on finish handler, apply a horizontal layout with a twenty gutter, and create a responsive two-column grid with a primary submit button labeled add todo.

Create the form item with a title input, set required and a validation message, add a placeholder for what needs to be done, and include the button.

Create a to-do item component with props for data, removal, and toggling completion, render a list item with actions, tooltip, tag list, a switch, and icons.

Build todo items by wiring actions with a two-value array, toggle completion via a switch, and use a tooltip with a pop-confirm to delete items from the list.

Create the todo tab by importing React and useEffect, wiring a todo data source to render items with a todo item component, and enable removal, toggle, and 10-item pagination.

Build a reusable React todo list component using useEffect and useState, with submit, remove, and toggle handlers to manage and refresh todo items and show status messages.

Create two refresh methods with hooks in a React app: refresh and onRefresh, using useCallback to reload todos. Manage refreshing state during fetch and apply a filter for incomplete tasks.

Finish TodoList guides you through building a React-based to-do list with an ASP.NET Core API, including tabbed views, form handling, state updates, and rendering fixes.

watch this bonus video to unlock a 30% lifetime discount on Code Brains courses, and gain monthly updates, weekly contact about new courses, early access, and forum access for subscribers.