ASP.NET Core 5 and React

✍ Scribed by Carl Rippon;

• Publisher: Lotus Pr.
• Year: 2021
• Tongue: English
• Leaves: 568
• Edition: 2
• Category: Library

✦ Table of Contents

Cover
Title page
Copyright and Credits
Dedication
About Packt
Contributors
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
Index