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

Creating an ASP.NET Core Web API project

We are going to create the ASP.NET Core and React projects separately in this chapter. In Chapter 1, Understanding the ASP.NET Core React Template, we discovered that old versions of React and create-react-app were used. Creating the React project separately allows us to use a more recent version of React and create-react-app. Creating the React project separately also allows us to use TypeScript with React, which will help us be more productive as the code base grows.

Let's open Visual Studio and carry out the following steps to create our ASP.NET Core backend:

In the startup dialog, select Create a new project:

Choose ASP.NET Core Web Application in the wizard that opens and click the Next button:

Create a folder called backend in an appropriate location.
Name the project QandA and choose the backend folder location to save...