Building Applications with React 19 and ASP.NET Core 9

Learn how to structure JavaScript code with modules, export public members, hide internal functions, and use imports, default exports, and aliases in a practical project.

Explore how let and const declare variables and constants in JavaScript, with block scope, reassignment rules, and mutating underlying values in objects and arrays.

Learn how to use template strings in JavaScript with backticks for clean interpolation, multi-line strings, and embedding variables and function results to improve readability.

Define a class as a template for objects, with a constructor setting height and width. Show reusable behavior with an area method and inheritance by extending rectangle to square.

Explore asynchronous programming in JavaScript by sending HTTP requests to a public API with fetch, handling responses and errors using promises and async/await.

Learn the fundamentals of React through short examples, gain confidence building user interfaces, and take your first steps toward a project in this introductory module.

Explore the React project structure, from index.html and main.tsx to rendering with createRoot in a strict mode app, and learn how assets and public files are organized.

Learn how JSX extends JavaScript to create UI, and how transpilation converts JSX into JavaScript, with rules like a single parent element and className usage.

Learn how JSX expressions embed JavaScript code, variables, and functions in a React component, apply TypeScript types for parameters, and use expressions in element attributes such as image sources.

Delve into React events, wiring onClick and onKeyUp handlers, using handleClick and handleKeyUp, logging values, and introducing state to render updates.

Learn to pass content as a parameter in React via content projection, using the children prop and React nodes to render text, images, inputs, and other components.

Use the use context hook to pass a message through a value context provider, letting nested components subscribe and read the value, with a default when no provider exists.

Explore how to use useCallback to preserve function references and prevent unnecessary rerenders in memoized components, keeping table and row memo components efficient during updates.

Clean up the app by deleting the previous module work and recreating the project with a fresh React TypeScript setup, running the npm commands, and removing unnecessary components and styles.

Create a movies list component to render in theaters and upcoming releases by mapping over movie props, and style with a flex CSS module to display horizontally.

Centralize list rendering with a reusable generic list component in React using TypeScript generics, handling loading and empty states via customizable UI, and using children.

Create a generic list component to display a movie list and show a loading UI while data loads, and install Bootstrap to style a modern looking application.

Explore routing within your application to enable user navigation from the app's roots. Learn the fundamentals of routing and how to implement navigation paths in this module.

Disable the send button during form posting and show sending while awaiting response, using a boolean isSubmitting, async/await with a promise and setTimeout to simulate delay, preventing multiple submissions.

Centralize the genre form into a reusable component to power both create and edit flows, using a create genre model, props, default values, and React Hook Form.

Build a filter movies component with a filter movies dto, genre model, and red hook form to filter by title, genre, in theaters, and upcoming releases.

Validate actors form by building a validation rules object, enforcing name required with uppercase first letter, and date of birth required not in the future via validation rule and resolver.

Build a reusable select image component in a React and TypeScript app to upload, preview, and attach an actor image to a form, with edit-mode url support.

Create a movie creation model and a React movie form component with TypeScript, implementing validation for title and release date, and support for trailer and poster inputs.

Build a reusable two-list multi-selector for genres to model the many-to-many movie-genre relationship, fetching genres and moving items between non-selected and selected lists in create and edit movie forms.

Implement drag and drop in a React app to reorder actors by dragging one over another, swapping their positions and updating the underlying actors array.

Explore the basics of ASP.NET Core Web API and how the backend enables interaction with a real database to develop modern applications.

Explore the data types an action can return in ASP.NET Core, including action result, action result of T, and IActionResult, with not found 404 and ok responses.

Enable output cache to store action responses in memory, letting subsequent requests return immediately from cache for a 15-second expiration. Choose a sensible expiration to avoid outdated information.

Learn how model binding maps data from route values, query strings, and the body into action parameters in an ASP.NET Core API.

Apply data annotations to enforce a required name on genres and return 400 errors when validation fails. Customize error messages and rely on api controllers for automatic validation feedback.

Implement a custom validation rule at the controller action to prevent duplicate genre names by checking an in-memory repository, returning a 400 error when the name exists.

Explore how dependency injection reduces coupling by injecting repositories via constructor, enabling swaps from in-memory to SQL, Oracle, or MySQL repositories, and configure services in the asp.net core IOC container.

Adopt the dependency inversion principle by coding to an interface and injecting implementations (in-memory or SQL Server) via dependency injection, enabling swapping and low coupling.

Discover how to build web APIs with ASP.Net core by using controllers and actions, define routes for HTTP requests and cache responses, and apply middleware, validation, and dependency injection.

Clean up the back end by removing weather forecast and most services, preserving the output cache store and repository, while returning a genres list including drama and action for testing.

Learn to configure cross-origin resource sharing (CORS) in an ASP.NET Core API to allow a React app from localhost origins, by setting allowed origins, methods, and headers.

Implement back-end pagination in ASP.NET Core by introducing a pagination DTO, limiting records per page, using from query to fetch page data, and exposing total records in headers.

Learn to use order by in the genres Get action to remove a warning by sorting results by id or name, with optional ascending or descending, and verify by running.

Apply custom React hooks to encapsulate loading and data logic for a genres list, using useGenres to manage loading state, pagination, and API data in a React component.

Edit genres in React front-end by wiring nav links to the edit genre component, fetching genre data from the API, handling errors, and updating with put requests.

Delete a genre by its id using Entity Framework Core's execute delete async, returning 204 on success and 404 when not found, with cache update and swagger testing.

Implement a front-end delete workflow for genres in React using useCallback and useEffect, perform async API deletes, and confirm deletions with a custom confirm dialog that refreshes the list.

Build the actors index screen in Visual Studio Code using a new use actors hook, integrate an actor model, and enable pagination and delete actor actions on the front end.

Develop a front-end theaters crud workflow that creates and edits theaters via api post and get calls, navigates to theaters, and handles axios errors with reusable code.

Create movies using a movie creation DTO and poster form file, load genres and theatres with a post get DTO, and implement endpoints, mapping, and file storage.

Use a custom model binder to bind genre, theater, and actor IDs from a form when creating a movie, and map the creation DTO to the movie.

Finish the front-end movie filtering by fetching genres, applying title and genre filters, and implementing paginated results with URL-based state persistence.

Refactor the movie filter by extracting its logic into a custom React hook, useFilterMovies, to simplify the component and manage data loading, pagination, and URL updates.

Use the authorized component to hide menu items and buttons for admins by checking claims and is admin, and gate nested components like genres.

Protect routes by conditionally rendering content with an authorize component and outlet, falling back to a default UI when the user lacks admin claims.

Configure identity with entity framework core and jwt bearer authentication to manage users, roles, claims, and json web tokens, including migrations, identity db context, and signing key validation.

Develop a reusable rating component using stars, with hover and click interactions, track user votes and average ratings, and integrate with a backend API for submitting votes, addressing authentication issues.

deploy the web api to Azure and apply entity framework core migrations in production by configuring app settings, creating an Azure sql database, and publishing with swagger.

Deploy a production React app by configuring environment variables, publishing via Vercel and GitHub, then set allowed origins in Azure app service to enable admin access.