0% completed

All LessonsFree Lessons (6)

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 Children Prop Function 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

Project

Create a Trello Clone with 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

Project

Build a REST API Using ASP.NET Core 6

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

Building Web Applications with React and ASP.NET Core/

...

/

Creating a Reducer

Creating a Reducer

Learn to create a reducer.

We'll cover the following...

Reducer

Reducer

A reducer is a function that will make the necessary changes to the state. It takes in the current state and the action being processed as parameters and returns the new state. In this section, we are going to implement a reducer. Let’s perform the following steps:

One of the parameters in the reducer is the action that invoked the state change. Let’s create a union type containing all the action types that will represent the reducer action parameter:

Press + to interact

type QuestionsActions =
  | ReturnType<typeof gettingUnansweredQuestionsAction>
  | ReturnType<typeof gotUnansweredQuestionsAction>
  | ReturnType<typeof gettingQuestionAction>
  | ReturnType<typeof gotQuestionAction>
  | ReturnType<typeof searchingQuestionsAction>
  | ReturnType<typeof searchedQuestionsAction>;

We have used the ReturnType utility type to get the return type of the action functions. ReturnType expects a function type to be passed into it, so we use the typeof keyword to get the type of each function.

Note: When typeof is used ...