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.

Related Content you might be interested in

Current Title:

Small book image
ASP.NET Core 3 and React
Carl Rippon
Dec, 2019 | 598 pages
Small book image
Learn React with TypeScript 3
Carl Rippon
Nov, 2018 | 502 pages
Small book image
Learn React with TypeScript
Carl Rippon
Mar, 2023 | 474 pages
Table of Contents (22 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Section 1: Getting Started
Section 1: Getting Started
2
Understanding the ASP.NET Core React Template
Understanding the ASP.NET Core React Template
Technical requirements
SPA architecture
Understanding the backend
Understanding the frontend
Summary
Questions
Further reading
3
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
Summary
Questions
Further reading
4
Section 2: Building a Frontend with React and TypeScript
Section 2: Building a Frontend with React and TypeScript
5
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
Summary
Questions
Further reading
6
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
Summary
Questions
Further reading
7
Working with Forms
Working with Forms
Technical requirements
Understanding controlled components
Reducing boilerplate code with generic components
Implementing validation
Submitting forms
Summary
Questions
Further reading
8
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
Summary
Questions
Further reading
9
Section 3: Building an ASP.NET Core Backend
Section 3: Building an ASP.NET Core Backend
10
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
Summary
Questions
Further reading
11
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
Summary
Questions
Further reading
12
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
Summary
Questions
Further reading
13
Improving Performance and Scalability
Improving Performance and Scalability
Technical requirements
Reducing database round trips
Paging data
Making API controllers asynchronous
Caching data
Reducing garbage collection
Summary
Questions
Further reading
14
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
Summary
Questions
Further reading
15
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
Summary
Questions
Further reading
16
Section 4: Moving into Production
Section 4: Moving into Production
17
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
Summary
Questions
Further reading
18
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
Summary
Questions
Further reading
19
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
Summary
Questions
Further reading
20
Assessments
Assessments
Answers
21
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Understanding the frontend

It's time to turn our attention to the React frontend. In this section, we'll discover where the single HTML page is that hosts the React app. We'll also understand why it took over a minute to run the app for the first time.

Understanding the frontend entry point

We have a good clue as to where the entry point is from our examination of the Startup class in the ASP.NET Core backend. In the Configure method, the SPA middleware is set up with the source path as ClientApp:

app.UseSpa(spa =>
{
  spa.Options.SourcePath = "ClientApp";

  if (env.IsDevelopment())
  {
    spa.UseReactDevelopmentServer(npmScript: "start");
  }
});

If we look in the ClientApp folder, we&apos...

Previous Section
End of Section 5
Next Section