React ASP.NET Core Starter Guide

Create a web app with a React client and ASP.NET Core backend inside an ESB project, then run to view the working React interface.

Create your first React component by adding a JavaScript file, defining a class that extends React's component, and rendering JSX; export it and enable hot reload.

Discover how startup.cs serves as the main entry point, configuring services and the request pipeline, with program.cs as the application entry point.

Register and configure services in the startup class using IServiceCollection, control service lifetimes (singleton, scoped, transient), and enable features like swagger and custom services for your application.

Configure demonstrates building the request pipeline by sequencing middleware, from configuring services to enabling cross-origin requests and handling authentication, ensuring each API request follows a defined lifecycle.

Discover how a dependency injection container creates and injects services by registering interfaces and resolving concrete implementations in constructors, and understand transient, scoped, and singleton lifecycles in ASP.NET Core.

Explore how appsettings uses json configuration to store environment-specific settings, override development with production, and access nested keys via configuration paths in asp.net core.

Create a custom middleware in the ASP.NET Core pipeline, inject request delegates, and access HttpContext data such as IP addresses, wiring it via an extension method and startup configuration.

Install the Swagger package, configure the startup to add Swagger middleware, and access the Swagger UI at /swagger to view and interact with API endpoints.

Set up EF Core by adding a data context class and configuring DbContext options, then register UseSqlServer with a connection string in startup to connect to the database.

Learn to integrate Stackify Prefix middleware in an ASP.NET Core app to trace requests, monitor execution time, and inspect the generated SQL from EF with a simple items table.

Create api controllers to send and receive data between back end and front end. Add items controller with a get method that returns hello. Decorate methods with swagger for testing.

Explore creating a first get API endpoint with an items controller, inject the item service, fetch all items, test via swagger, and use optional query strings and id-based retrieval.

Explore posting data with the post method in the React ASP.NET Core starter guide, sending client data to the server and saving items via body-bound post actions.

Learn why post should be used to save data and put to update items, with Swagger demonstrations and cautionary notes on not misusing post for updates.

Learn to implement a delete method that uses a query string parameter to remove items from the database and explains why form data cannot be passed, using swagger for testing.

Learn how to create a basic React component, render JSX, and pass props from a parent to a child component using the render method and props access.

Explore React lifecycle methods such as componentDidMount and componentDidUpdate to load data on open, respond to updates, bind events, and use getSnapshotBeforeUpdate and deprecated lifecycle guidance.

This lecture demonstrates managing state in a component by initializing a count at zero, rendering it, and updating it with an increment method bound to a click.

Learn to handle click events in a React component, bind this, access and update state in the event, and pass arguments to update counts efficiently.

Learn to implement conditional rendering in a React component by toggling a message on and off using state and a render method.

Learn to render a dynamic list in a React component by mapping an items array to an ordered list and assigning a unique key to each item.

Create a form in a React component by defining text state, rendering an input and a submit button, and wiring change and submit handlers to update state and handle submissions.

Learn client-side error handling with try catch and finally to show clear error messages during calculation, and use component did catch to manage errors in child components.

Learn to use refs to access DOM elements inside a component, perform operations like setting an input value and focusing the element, and note version-specific syntax.

Fetch item data from the backend using the axios library, map the response to item objects, and render the items in an unordered list with a load button.

Learn to send data with a post request to the save endpoint, create a new item with a dummy title, and verify the returned item was added.

Learn to implement a put to update an item: create an update method, send the item id and new data, and run the app to verify the update.

Leverage the delete endpoint to remove items via a delete request, passing an item id and handling success messages, while tweaking the endpoint to access the delete query string.

Add an insert method in the item service to save new items to the database using the context, then expose the API and user interface to insert items.

Learn how to implement an update method in the item service, returning the updated item, test it with swagger, and verify updated queries to avoid performance bottlenecks.

Implement a delete method in the item service to remove items by id, persist changes to the database, and verify deletion via Swagger item listing.

Learn to fetch a single item by id from the database using a where clause, replacing the all-items approach for improved performance in the item service and controller.