ASP.NET Core 5 and React E-Book

Carl Rippon

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 495

Veröffentlichungsjahr: 2021

Beschreibung

Microsoft’s .NET framework is a robust server-side framework, now even more powerful thanks to the recent unification of the Microsoft ecosystem with the .NET 5 framework. This updated second edition addresses these changes in the .NET framework and the latest release of React.
The book starts by taking you through React and TypeScript components for building an intuitive single-page application and then shows you how to design scalable REST APIs that can integrate with a React-based frontend. Next, 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. As you progress through the chapters, you'll learn how to use React with TypeScript to make the frontend robust and maintainable and cover key ASP.NET 5 features such as API controllers, attribute routing, and model binding to build a sturdy backend. In addition to this, you’ll explore API security with ASP.NET 5 identity and authorization policies and write reliable unit tests using both .NET and React, before deploying your app on Azure.
By the end of this book, you’ll have gained the knowledge you need to enhance your C# and JavaScript skills and build full-stack, production-ready applications with ASP.NET 5 and React.

Leseprobe

ASP.NET Core 5 and React

Second Edition

Full-stack web development using .NET 5, React 17, and TypeScript 4

Carl Rippon

BIRMINGHAM—MUMBAI

ASP.NET Core 5 and React — Second Edition

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Ashwin Nair

Publishing Product Manager: Pavan Ramchandani

Acquisition Editor: Nitin Nainani

Senior Editor: Hayden Edwards

Content Development Editor: Aamir Ahmed

Technical Editor: Deepesh Patel

Copy Editor: Safis Editing

Project Coordinator: Kinjal Bari

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Jyoti Chauhan

First published: December 2019

Second edition: January 2021

Production reference: 1060121

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80020-616-8

www.packt.com

I'd like to thank Sarah, Ellie-Jayne, Lily-Rose, and Fudge for all the encouragement and support they've given me while writing this book. A special thanks to everyone in the Packt editorial team for their hard work and great feedback, especially Aamir Ahmed and Mohammed Imaratwale.

– Carl Rippon

Packt.com

Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionalsImprove your learning with Skill Plans built especially for youGet a free eBook or video every monthFully searchable for easy access to vital informationCopy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Contributors

About the author

Carl Rippon has been involved in the software industry for over 20 years, developing a complex line of business applications across various sectors. He has spent the last 9 years building single-page applications using a wide range of JavaScript technologies, including Angular, ReactJS, and TypeScript. Carl has written over 150 blog posts on various technologies.

About the reviewer

Adam Greene is a senior software engineer at Cvent, the market-leading meetings, events, and hospitality technology provider. Adam has close to 20 years' software development experience with Microsoft technologies and has worked for companies of all sizes, from start-ups to multinational corporations, in various leadership capacities. Adam is a full-stack web developer and has developed SaaS applications using ASP.NET, Angular, and React for several years.

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Table of Contents

Preface

Section 1: Getting Started

Chapter 1: Understanding the ASP.NET 5 React Template

Technical requirements

SPA architecture

Understanding the ASP.NET Core backend

Creating an ASP.NET Core and React templated app

Understanding the backend entry point

Understanding the Startup class

Custom middleware

Understanding controllers

Understanding the React frontend

Understanding the frontend entry point

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

Summary

Questions

Answers

Further reading

Chapter 2: Creating Decoupled React and ASP.NET 5 Apps

Technical requirements

Creating a React and TypeScript app

Understanding the benefits of TypeScript

Creating the app with CRA

Adding linting to React and TypeScript

Configuring Visual Studio Code to lint TypeScript code

Configuring linting rules

Adding automatic code formatting to React and TypeScript

Adding Prettier

Resolving errors

Summary

Questions

Answers

Further reading

Section 2: Building a Frontend with React and TypeScript

Chapter 3: Getting Started with React and TypeScript

Technical requirements

Understanding JSX

Understanding and enabling strict mode

Creating function-based components

Creating a Header component

Adding elements to the Header component

Creating a HomePage component

Creating mock data

Implementing component props

Creating HomePage child components

Optional and default props

Children prop

Function props

Implementing component state

Using useEffect to execute logic

Using useState to implement component state

Handling events

Handling a button click event

Handling an input change event

Summary

Questions

Answers

Further reading

Chapter 4: Styling React Components with Emotion

Technical requirements

Styling components with CSS

Styling the document body

Styling the App component

Styling the Header component

Styling components with CSS modules

Styling components with Emotion

Installing Emotion

Styling the App component

Styling the Header component

Styling pseudo-classes and nested elements with Emotion

Creating a reusable styled component with Emotion

Completing the home page styling

Styling the QuestionList component

Styling the Question component

Summary

Questions

Answers

Further reading

Chapter 5: Routing with React Router

Technical requirements

Installing React Router

Declaring routes

Creating some blank pages

Creating a component containing routes

Handling routes not found

Implementing links

Using the Link component

Navigating programmatically

Using route parameters

Adding the question page route

Implementing more of the question page

Creating an AnswerList component

Using query parameters

Lazy loading routes

Summary

Questions

Answers

Further reading

Chapter 6: Working with Forms

Technical requirements

Understanding controlled components

Reducing boilerplate code with React Hook Form

Installing React Hook Form

Refactoring the Header component to use React Hook Form

Creating form styled components

Implementing the ask form

Implementing the answer form

Implementing validation

Implementing validation on the ask form

Implementing validation on the answer form

Submitting forms

Implementing form submission in the search form

Implementing form submission in the ask form

Implementing form submission in the answer form

Summary

Questions

Answers

Further reading

Chapter 7: Managing State with Redux

Technical requirements

Understanding the Redux pattern

Principles

Key concepts

Installing Redux

Creating the state

Creating actions

Understanding the actions in the store

Getting unanswered questions

Viewing a question

Searching questions

Creating a reducer

Creating the store

Connecting components to the store

Adding a store provider

Connecting the home page

Connecting the question page

Summary

Questions

Answers

Further reading

Section 3: Building an ASP.NET Backend

Chapter 8: Interacting with the Database with Dapper

Technical requirements

Implementing the database

Creating the database

Creating database tables

Creating stored procedures

Understanding what Dapper is and its benefits

Installing and configuring Dapper

Reading data using Dapper

Creating the repository class

Creating a repository method to get questions

Creating a repository method to get questions by a search

Creating a repository method to get unanswered questions 

Creating a repository method to get a single question

Creating a repository method to check whether a question exists

Creating a repository method to get an answer

Writing data using Dapper

Adding methods to write data to the repository interface

Creating a repository method to add a new question

Creating a repository method to change a question

Creating a repository method to delete a question

Creating a repository method to add an answer

Managing migrations using DbUp

Installing DbUp into our project

Embedding SQL Scripts in our project

Performing a database migration

Summary

Questions

Answers

Further reading

Chapter 9: Creating REST API Endpoints

Technical requirements

Creating an API controller

Injecting the data repository into the API controller

Creating controller action methods

Creating an action method for getting questions

Extending the GetQuestions action method for searching

Creating an action method for getting unanswered questions

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

Creating an action method for posting an answer

Adding model validation

Adding validation to posting a question

Adding validation to updating a question

Adding validation to posting an answer

Removing unnecessary request fields

Removing unnecessary request fields from posting a question

Removing unnecessary request fields from posting an answer

Summary

Questions

Answers

Further reading

Chapter 10: Improving Performance and Scalability

Technical requirements

Reducing database round trips

Understanding the N+1 problem

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

Adding test questions for the load test

Load testing the current implementation

Making API controllers asynchronous

Testing the current implementation

Implementing an asynchronous controller action method

Mixing asynchronous and synchronous code

Caching data

Load testing the current implementation

Implementing a data cache

Using the data cache in an API controller action method

Summary

Questions

Answers

Further reading

Chapter 11: Securing the Backend

Technical requirements

Understanding OIDC

Setting up Auth0 with our ASP.NET backend

Setting up Auth0

Configuring our ASP.NET backend to authenticate with Auth0

Protecting endpoints

Protecting endpoints with simple authorization

Protecting endpoints with a custom authorization policy

Using the authenticated user when posting questions and answers

Adding CORS

Summary

Questions

Answers

Further reading

Chapter 12: Interacting with RESTful APIs

Technical requirements

Using fetch to interact with unauthenticated REST API endpoints

Getting unanswered questions from the REST API

Extracting out a generic HTTP http function

Getting a question from the REST API

Searching questions with the REST API

Interacting with Auth0 from the frontend

Installing the Auth0 JavaScript client

Recapping the sign-in and sign-out flows

Creating the sign-in and sign-out routes

Implementing a central authentication context

Implementing the sign-in process

Implementing the sign-out process

Configuring Auth0 settings in our frontend

Testing the sign-in and sign-out processes

Controlling authenticated options

Displaying the relevant options in the header

Only allowing authenticated users to ask a question

Only allowing authenticated users to answer a question

Using fetch to interact with authenticated REST API endpoints

Posting a question to the REST API

Posting an answer to the REST API

Aborting data fetching

Summary

Questions

Answers

Further reading

Section 4: Moving into Production

Chapter 13: Adding Automated Tests

Technical requirements

Understanding the different types of automated test

Unit tests

End-to-end tests

Integration tests

Implementing .NET tests with xUnit

Getting started with xUnit

Testing controller action methods

Implementing React tests with Jest

Getting started with Jest

Testing React components

Testing the Page component

Testing the Question component

Testing the HomePage component

Implementing end-to-end tests with Cypress

Getting started with Cypress 

Testing asking a question 

Summary

Questions

Answers

Further reading

Chapter 14: Configuring and Deploying to Azure

Technical requirements

Getting started with Azure

Signing up to Azure

Understanding the Azure services we are going to use

Configuring the ASP.NET Core backend for staging and production

Publishing our ASP.NET Core backend to Azure

Publishing to production

Publishing to staging

Configuring the React frontend for staging and production

Publishing the React frontend to Azure

Publishing to production

Publishing to staging

Summary

Questions

Answers

Further reading

Chapter 15: Implementing CI and CD with Azure DevOps

Technical requirements

Getting started with CI and CD

Understanding CI and CD

Enabling our tests to run in CI and CD

Creating an Azure DevOps project

Implementing CI

Creating a build pipeline

Implementing a build pipeline for our Q&A app

Implementing CD

Deploying to staging

Deploying to production

Testing the automated deployment

Summary

Questions

Answers

Further reading

Other Books You May Enjoy

Section 1: Getting Started

This section provides a high-level introduction to ASP.NET Core and React and explains how to create projects that enable them to work well together. We will create the project for the app that we'll build throughout this book, which will allow users to submit questions and other users to submit answers to them—a Q&A app.

This section comprises the following chapters:

Chapter 1, Understanding the ASP.NET 5 React TemplateChapter 2, Creating Decoupled React and ASP.NET 5 Apps