Back To Course Home

Building Web Applications with React and ASP.NET Core

0% completed

Introduction

About This Course

Getting Started

Understanding the ASP.NET React Template SPA Architecture Understanding the ASP.NET Core Backend Understanding the Backend Entry Point Understanding the Program.cs File in Newer Versions of ASP.NET Understanding Controllers Understanding the React Frontend Running in Development Mode Publishing Process Understanding the Frontend Dependencies Understanding How the Single Page Is Served Understanding How Components Fit Together Understanding How Components Access the Backend Web API Quiz: ASP.NET React Template Summary: ASP.NET React Template

Creating Decoupled React and ASP.NET 5 Apps

Introduction: Decoupled React and ASP.NET Apps Creating an ASP.NET Core Web API Project Creating a React and TypeScript App Adding Linting to React and TypeScript Adding Automatic Code Formatting to React and TypeScript Quiz: Decoupled React and ASP.NET App Summary: Decoupled React and ASP.NET App

Building a Frontend with React and TypeScript

Introduction: Creating React Frontend with Typescript

Understanding JSX

Understanding and Enabling Strict Mode

Creating Function-Based Components

Adding Elements to the Header Component

Creating Mock Data

Implementing Component Props

Optional and Default Props

Implementing Component State

Using useEffect to Execute Logic

Handling Events

Quiz: Creating React Frontend with TypeScript

Challenge: Creating a New Footer in Our Web Page

Solution: Creating a New Footer in Our Web Page

Summary: Creating React Frontend with TypeScript

Styling React Components with Emotion

Introduction: Styling React Components with Emotion Styling Components with CSS Styling Components with CSS Modules Styling Components with Emotion Styling Pseudo-Classes and Nested Elements with Emotion Creating a Reusable Styled Component with Emotion Completing the Home Page Styling Quiz: Styling React Components with Emotion Challenge: Adding a Button and Styling it with Emotion Solution: Adding Button and Styling It with Emotion Summary: Styling React Components with Emotion

Routing with React Router

Introduction: Routing with React Setting Up React Router Handling Routes Not Found Implementing Links Using Route Parameters Implementing More of the Question Page Creating an AnswerList Component Using Query Parameters Lazy Loading Routes Quiz: Routing with React Challenge: Create a Button That Routes to Another Web Page Solution: Create a Button That Routes to Another Web Page Summary: Routing with React

Working with Forms

Introduction: Working with Forms Understanding Controlled Components Reducing Boilerplate Code with React Hook Form Creating Form Styled Components Implementing the Ask Form Implementing the Answer Form Implementing Validation Implementing Validation on the Answer Form Submitting Forms Implementing Form Submission in the Ask Form Implementing Form Submission in the Answer Form Quiz: Working with Forms Challenge: Create a Comment Field on the Ask Page with Validation Solution: Create a Comment Field on the Ask Page with Validation Summary: Working with Forms

Managing State with Redux

Introduction: Using Redux in React Understanding the Redux Pattern Setting up Redux and Creating State Objects Creating Actions Creating a Reducer Creating the Store Connecting Components to the Store Connecting the Question Page Connecting the Search Page Quiz: Using Redux in React Summary: Using Redux in React

Interacting with the Database with Dapper

Introduction: Interacting with Database Implementing the Database Understanding what Dapper Is and Its Benefits Reading Data Using Dapper Creating a Repository Method to Get Questions Creating a Repository Method to Get Questions by a Search Creating a Repository Method to Get a Single Question Writing Data Using Dapper Managing Migrations Using DbUp Embedding SQL Scripts in Our Project Quiz: Interacting with Database Summary: Interacting with Database

Creating REST API Endpoints

Introduction: Rest API Endpoints Creating an API Controller Creating Controller Action Methods Extending the GetQuestions Action Method for Searching Creating an Action Method for Getting a Single Question Creating an Action Method for Posting a Question Creating an Action Method for Updating a Question Creating an Action Method for Deleting a Question Adding Model Validation Adding Validation to Updating a Question Removing Unnecessary Request Fields Removing Unnecessary Request Fields from Posting an Answer Quiz: Rest API Endpoints Challenge: Create an Action Method for Searching Question Solution: Create an Action Method for Searching Question Summary: Rest API Endpoints

Improving Performance and Scalability

Introduction: Improving Performance and Scalability Reducing Database Round Trips Using WebSurge to Load Test Our Endpoint Using Dapper Multi-Mapping to Resolve the N+1 Problem Using Dapper's Multi-Results Feature Paging Data Making API Controllers Asynchronous Implementing an Asynchronous Controller Action Method Mixing Asynchronous and Synchronous Code Caching Data Using the Data Cache in An API Controller Action Method Quiz: Improving Performance and Scalability Try Out Load Testing Our Endpoints with Vegeta Summary: Improving Performance and Scalability

Securing the Backend

Introduction: Securing the Backend Using Auth0 Understanding OIDC Setting Up Auth0 with Our ASP.NET Backend Configuring Our ASP.NET Backend to Authenticate with Auth0 Protecting Endpoints Protecting Endpoints with a Custom Authorization Policy Using the Authenticated User When Posting Questions and Answers Adding CORS Quiz: Securing the Backend Using Auth0 Summary: Securing the Backend Using Auth0

Interacting with RESTful APIs

Introduction: Interaction with RESTful APIs Using Fetch to Interact with Unauthenticated REST API Endpoints Extracting Out a Generic http Function Getting a Question from the REST API Interacting with Auth0 from the Frontend Implementing a Central Authentication Context Implementing the Sign-In Process Configuring Auth0 Settings in Our Frontend Controlling Authenticated Options Only Allowing Authenticated Users to Answer a Question Using Fetch to Interact With Authenticated REST API Endpoints Aborting Data Fetching Quiz: Interaction with RESTful APIs Challenge: Create a Button to Delete Unanswered Questions Solution: Create a Button to Delete Unanswered Questions Summary: Interaction with RESTful APIs

Adding Automated Tests

Introduction: Automated Testing Understanding the Different Types of Automated Test Implementing .NET Tests with xUnit Testing Controller Action Methods Implementing React Tests with Jest Testing React Components Implementing End-to-End Tests with Cypress Testing Asking a Question Quiz: Automated Testing Summary: Automated Testing

Configuring and Deploying to Azure

Introduction: Configuration and Deployment to Azure Getting Started with Azure Configuring the ASP.NET Core Backend Publishing the ASP.NET Core Backend to Azure Publishing to Staging Configuring the React Frontend Publishing the React Frontend to Azure Publishing to Staging Quiz: Configuration and Deployment to Azure Summary: Configuration and Deployment to Azure

Implementing CI and CD with Azure DevOps

Introduction: Implementation of CI and CD Using DevOps Getting Started with CI and CD Implementing CI Implementing a Build Pipeline for Our Q&A App Implementing a Build Pipeline for Frontend Implementing CD Deploying to Production Quiz: Implementation of CI and CD Using DevOps Summary: Implementation of CI and CD Using DevOps

Conclusion

Creating Mock Data

Learn to create mock data for our frontend.

We'll cover the following

Steps to create mock data
- Test yourself

We desperately need some data so that we can develop our frontend. In this section, we’ll create some mock data in our frontend. We will also create a function that components will call to get data. Eventually, this function will call our real ASP.NET Core backend.

Steps to create mock data

Follow these steps:

Create a new file in the src folder called QuestionsData.ts with the following interface:

Get hands-on with 1200+ tech skills courses.