Book Image

ASP.NET Core 3 and React

By : Carl Rippon

Book Image

ASP.NET Core 3 and React

By: Carl Rippon

Overview of this book

Microsoft's ASP.NET Core is a robust and high-performing cross-platform web API framework, and Facebook's React uses declarative JavaScript to drive a rich, interactive user experience on the client-side web. Together, they can be used to build full stack apps with enhanced security and scalability at each layer. This book will start by taking you through React and TypeScript components to build an intuitive single-page application. You’ll understand how to design scalable REST APIs that can integrate with a React-based frontend. You’ll get to grips with the latest features, popular patterns, and tools available in the React ecosystem, including function-based components, React Router, and Redux. The book shows how you can use TypeScript along with React to make the frontend robust and maintainable. You’ll then cover important .NET Core features such as API controllers, attribute routing, and model binding to help you build a sturdy backend. Additionally, you’ll explore API security with ASP.NET Core identity and authorization policies, and write reliable unit tests using both .NET Core and React before you deploy your app to the Azure cloud. By the end of the book, you’ll have gained all the knowledge you need to enhance your C# and JavaScript skills and build full stack, production-ready applications with ASP.NET Core and React.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Section 1: Getting Started

Section 1: Getting Started

Understanding the ASP.NET Core React Template

Understanding the ASP.NET Core React Template

Technical requirements

SPA architecture

Understanding the backend

Understanding the frontend

Further reading

Creating Decoupled React and ASP.NET Core Apps

Creating Decoupled React and ASP.NET Core Apps

Technical requirements

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

Further reading

Section 2: Building a Frontend with React and TypeScript

Section 2: Building a Frontend with React and TypeScript

Getting Started with React and TypeScript

Getting Started with React and TypeScript

Technical requirements

Understanding JSX

Creating function-based components

Styling components

Implementing component props

Implementing component state

Handling events

Rendering optimization

Further reading

Routing with React Router

Routing with React Router

Technical requirements

Installing React Router with types

Declaring routes

Handling routes not found

Implementing links

Using route parameters

Using query parameters

Lazy loading routes

Further reading

Working with Forms

Working with Forms

Technical requirements

Understanding controlled components

Reducing boilerplate code with generic components

Implementing validation

Submitting forms

Further reading

Managing State with Redux

Managing State with Redux

Technical requirements

Understanding the Redux pattern

Installing Redux and Redux Thunk

Creating the state

Creating actions

Creating action creators

Creating a reducer

Creating the store

Connecting components to the store

Further reading

Section 3: Building an ASP.NET Core Backend

Section 3: Building an ASP.NET Core Backend

Interacting with the Database with Dapper

Interacting with the Database with Dapper

Technical requirements

Implementing the database

Understanding what Dapper is and its benefits

Installing and configuring Dapper

Reading data using Dapper

Writing data using Dapper

Managing migrations using DbUp

Further reading

Creating REST API Endpoints

Creating REST API Endpoints

Technical requirements

Creating an API controller

Creating controller action methods

Adding model validation

Removing unnecessary request fields

Further reading

Creating a Real-Time API with SignalR

Creating a Real-Time API with SignalR

Technical requirements

Understanding the benefits of SignalR

Creating a SignalR hub

Pushing data to SignalR clients from an API controller

Creating the SignalR real-time API endpoint

Interacting with the SignalR real-time API from React

Further reading

Improving Performance and Scalability

Improving Performance and Scalability

Technical requirements

Reducing database round trips

Making API controllers asynchronous

Reducing garbage collection

Further reading

Securing the Backend

Securing the Backend

Technical requirements

Understanding OIDC

Setting up Auth0 with our ASP.NET Core backend

Protecting endpoints

Using the authenticated user when posting questions and answers

Further reading

Interacting with RESTful APIs

Interacting with RESTful APIs

Technical requirements

Using fetch to interact with unauthenticated REST API endpoints

Interacting with Auth0 from the frontend

Controlling authenticated options

Using fetch to interact with authenticated REST API endpoints

Stopping a data state being set if the user navigates away from the page

Further reading

Section 4: Moving into Production

Section 4: Moving into Production

Adding Automated Tests

Adding Automated Tests

Technical requirements

Understanding the different types of automated test

Implementing .NET tests with xUnit

Implementing React tests with Jest

Testing React components

Implementing end-to-end tests with Cypress

Further reading

Configuring and Deploying to Azure

Configuring and Deploying to Azure

Technical requirements

Getting started with Azure

Configuring the ASP.NET Core backend for staging and production

Publishing our ASP.NET Core backend to Azure

Configuring the React frontend for staging and production

Publishing the React frontend to Azure

Further reading

Implementing CI and CD with Azure DevOps

Implementing CI and CD with Azure DevOps

Technical requirements

Getting started with CI and CD

Implementing CI

Implementing CD

Further reading

Assessments

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Summary

In this chapter, we learned that the browser has a handy fetch function that allows us to interact with REST APIs. This allows us to specify HTTP headers such as authorization, which we use to supply the user's access token in order to access the protected endpoints.

Leveraging the standard Auth0 JavaScript library allows single-page applications to interact with the Auth0 identity provider. It makes all of the required requests and redirects to Auth0 in a secure manner.

Using the React context to share information about the user to components allows them to render information and options that are only relevant to the user. The AuthProvider and AuthorizedPage components we built in this chapter are generic components that could be used in other apps to help to implement frontend authorization logic.

Our app is very nearly complete now. In the next chapter, we are...