ASP.NET Core 5 and React - Second Edition

ASP.NET Core 5 and React - Second Edition

by Carl Rippon
Released January 2021
Publisher(s): Packt Publishing
ISBN: 9781800206168

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build fully functional, cloud-ready, and professional web applications using the latest features in the .NET 5 framework and React.js with Microsoft Azure

Key Features

  • Explore the new features of .NET 5 with this updated edition of ASP.NET Core 5 and React
  • Discover strategies for adopting a full-stack development approach, clean architecture techniques, and development best practices
  • Learn how to manage data, design and package applications, and secure your web apps

Book Description

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.

What you will learn

  • Build RESTful APIs with .NET 5 using API controllers
  • Secure REST APIs with identity and authorization policies
  • Create strongly typed, interactive, and function-based React components using Hooks
  • Understand how to style React components using Emotion.js
  • Perform client-side state management with Redux
  • Run a range of automated tests on the frontend and backend
  • Implement continuous integration and continuous delivery (CI/CD) processes in Azure using Azure DevOps

Who this book is for

If you're a web developer looking to get up to speed with full-stack web application development with .NET Core and React, this book is for you. Although the book does not assume any knowledge of React, a basic understanding of .NET Core will help you to get to grips with the concepts covered.

Table of contents

  1. ASP.NET Core 5 and React — Second Edition
  2. Why subscribe?
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Packt is searching for authors like you
  7. Preface
    1. Who this book is for
    2. What this book covers
      1. Section 1: Getting Started
      2. Section 2: Building a Frontend with React and TypeScript
      3. Section 3: Building an ASP.NET Backend
      4. Section 4: Moving into Production
    3. To get the most out of this book
    4. Download the example code files
    5. Code in Action
    6. Conventions used
    7. Get in touch
    8. Reviews
  8. Section 1: Getting Started
  9. Chapter 1: Understanding the ASP.NET 5 React Template
    1. Technical requirements
    2. SPA architecture
    3. Understanding the ASP.NET Core backend
      1. Creating an ASP.NET Core and React templated app
      2. Understanding the backend entry point
      3. Understanding the Startup class
      4. Custom middleware
      5. Understanding controllers
    4. Understanding the React frontend
      1. Understanding the frontend entry point
      2. Running in development mode
      3. Publishing process
      4. Understanding the frontend dependencies
      5. Understanding how the single page is served
      6. Understanding how components fit together
      7. Understanding how components access the backend web API
    5. Summary
    6. Questions
    7. Answers
    8. Further reading
  10. Chapter 2: Creating Decoupled React and ASP.NET 5 Apps
    1. Technical requirements
    2. Creating a React and TypeScript app
      1. Understanding the benefits of TypeScript
      2. Creating the app with CRA
    3. Adding linting to React and TypeScript
      1. Configuring Visual Studio Code to lint TypeScript code
      2. Configuring linting rules
    4. Adding automatic code formatting to React and TypeScript
      1. Adding Prettier
      2. Resolving errors
    5. Summary
    6. Questions
    7. Answers
    8. Further reading
  11. Section 2: Building a Frontend with React and TypeScript
  12. Chapter 3: Getting Started with React and TypeScript
    1. Technical requirements
    2. Understanding JSX
    3. Understanding and enabling strict mode
    4. Creating function-based components
      1. Creating a Header component
      2. Adding elements to the Header component
      3. Creating a HomePage component
      4. Creating mock data
      5. Implementing component props
      6. Creating HomePage child components
      7. Optional and default props
      8. Children prop
      9. Function props
    5. Implementing component state
      1. Using useEffect to execute logic
      2. Using useState to implement component state
    6. Handling events
      1. Handling a button click event
      2. Handling an input change event
    7. Summary
    8. Questions
    9. Answers
    10. Further reading
  13. Chapter 4: Styling React Components with Emotion
    1. Technical requirements
    2. Styling components with CSS
      1. Styling the document body
      2. Styling the App component
      3. Styling the Header component
    3. Styling components with CSS modules
    4. Styling components with Emotion
      1. Installing Emotion
      2. Styling the App component
      3. Styling the Header component
    5. Styling pseudo-classes and nested elements with Emotion
    6. Creating a reusable styled component with Emotion
    7. Completing the home page styling
      1. Styling the QuestionList component
      2. Styling the Question component
    8. Summary
    9. Questions
    10. Answers
    11. Further reading
  14. Chapter 5: Routing with React Router
    1. Technical requirements
    2. Installing React Router
    3. Declaring routes
      1. Creating some blank pages
      2. Creating a component containing routes
    4. Handling routes not found
    5. Implementing links
      1. Using the Link component
      2. Navigating programmatically
    6. Using route parameters
      1. Adding the question page route
      2. Implementing more of the question page
      3. Creating an AnswerList component
    7. Using query parameters
    8. Lazy loading routes
    9. Summary
    10. Questions
    11. Answers
    12. Further reading
  15. Chapter 6: Working with Forms
    1. Technical requirements
    2. Understanding controlled components
    3. Reducing boilerplate code with React Hook Form
      1. Installing React Hook Form
      2. Refactoring the Header component to use React Hook Form
      3. Creating form styled components
      4. Implementing the ask form
      5. Implementing the answer form
    4. Implementing validation
      1. Implementing validation on the ask form
      2. Implementing validation on the answer form
    5. Submitting forms
      1. Implementing form submission in the search form
      2. Implementing form submission in the ask form
      3. Implementing form submission in the answer form
    6. Summary
    7. Questions
    8. Answers
    9. Further reading
  16. Chapter 7: Managing State with Redux
    1. Technical requirements
    2. Understanding the Redux pattern
      1. Principles
      2. Key concepts
    3. Installing Redux
    4. Creating the state
    5. Creating actions
      1. Understanding the actions in the store
      2. Getting unanswered questions
      3. Viewing a question
      4. Searching questions
    6. Creating a reducer
    7. Creating the store
    8. Connecting components to the store
      1. Adding a store provider
      2. Connecting the home page
      3. Connecting the question page
    9. Summary
    10. Questions
    11. Answers
    12. Further reading
  17. Section 3: Building an ASP.NET Backend
  18. Chapter 8: Interacting with the Database with Dapper
    1. Technical requirements
    2. Implementing the database
      1. Creating the database
      2. Creating database tables
      3. Creating stored procedures
    3. Understanding what Dapper is and its benefits
    4. Installing and configuring Dapper
    5. Reading data using Dapper
      1. Creating the repository class
      2. Creating a repository method to get questions
      3. Creating a repository method to get questions by a search
      4. Creating a repository method to get unanswered questions 
      5. Creating a repository method to get a single question
      6. Creating a repository method to check whether a question exists
      7. Creating a repository method to get an answer
    6. Writing data using Dapper
      1. Adding methods to write data to the repository interface
      2. Creating a repository method to add a new question
      3. Creating a repository method to change a question
      4. Creating a repository method to delete a question
      5. Creating a repository method to add an answer
    7. Managing migrations using DbUp
      1. Installing DbUp into our project
      2. Embedding SQL Scripts in our project
      3. Performing a database migration
    8. Summary
    9. Questions
    10. Answers
    11. Further reading
  19. Chapter 9: Creating REST API Endpoints
    1. Technical requirements
    2. Creating an API controller
      1. Injecting the data repository into the API controller
    3. Creating controller action methods
      1. Creating an action method for getting questions
      2. Extending the GetQuestions action method for searching
      3. Creating an action method for getting unanswered questions
      4. Creating an action method for getting a single question
      5. Creating an action method for posting a question
      6. Creating an action method for updating a question
      7. Creating an action method for deleting a question
      8. Creating an action method for posting an answer
    4. Adding model validation
      1. Adding validation to posting a question
      2. Adding validation to updating a question
      3. Adding validation to posting an answer
    5. Removing unnecessary request fields
      1. Removing unnecessary request fields from posting a question
      2. Removing unnecessary request fields from posting an answer
    6. Summary
    7. Questions
    8. Answers
    9. Further reading
  20. Chapter 10: Improving Performance and Scalability
    1. Technical requirements
    2. Reducing database round trips
      1. Understanding the N+1 problem
      2. Using WebSurge to load test our endpoint
      3. Using Dapper multi-mapping to resolve the N+1 problem
      4. Using Dapper's multi-results feature
    3. Paging data
      1. Adding test questions for the load test
      2. Load testing the current implementation
    4. Making API controllers asynchronous
      1. Testing the current implementation
      2. Implementing an asynchronous controller action method
      3. Mixing asynchronous and synchronous code
    5. Caching data
      1. Load testing the current implementation
      2. Implementing a data cache
      3. Using the data cache in an API controller action method
    6. Summary
    7. Questions
    8. Answers
    9. Further reading
  21. Chapter 11: Securing the Backend
    1. Technical requirements
    2. Understanding OIDC
    3. Setting up Auth0 with our ASP.NET backend
      1. Setting up Auth0
      2. Configuring our ASP.NET backend to authenticate with Auth0
    4. Protecting endpoints
      1. Protecting endpoints with simple authorization
      2. Protecting endpoints with a custom authorization policy
    5. Using the authenticated user when posting questions and answers
    6. Adding CORS
    7. Summary
    8. Questions
    9. Answers
    10. Further reading
  22. Chapter 12: Interacting with RESTful APIs
    1. Technical requirements
    2. Using fetch to interact with unauthenticated REST API endpoints
      1. Getting unanswered questions from the REST API
      2. Extracting out a generic HTTP http function
      3. Getting a question from the REST API
      4. Searching questions with the REST API
    3. Interacting with Auth0 from the frontend
      1. Installing the Auth0 JavaScript client
      2. Recapping the sign-in and sign-out flows
      3. Creating the sign-in and sign-out routes
      4. Implementing a central authentication context
      5. Implementing the sign-in process
      6. Implementing the sign-out process
      7. Configuring Auth0 settings in our frontend
      8. Testing the sign-in and sign-out processes
    4. Controlling authenticated options
      1. Displaying the relevant options in the header
      2. Only allowing authenticated users to ask a question
      3. Only allowing authenticated users to answer a question
    5. Using fetch to interact with authenticated REST API endpoints
      1. Posting a question to the REST API
      2. Posting an answer to the REST API
    6. Aborting data fetching
    7. Summary
    8. Questions
    9. Answers
    10. Further reading
  23. Section 4: Moving into Production
  24. Chapter 13: Adding Automated Tests
    1. Technical requirements
    2. Understanding the different types of automated test
      1. Unit tests
      2. End-to-end tests
      3. Integration tests
    3. Implementing .NET tests with xUnit
      1. Getting started with xUnit
      2. Testing controller action methods
    4. Implementing React tests with Jest
      1. Getting started with Jest
    5. Testing React components
      1. Testing the Page component
      2. Testing the Question component
      3. Testing the HomePage component
    6. Implementing end-to-end tests with Cypress
      1. Getting started with Cypress 
      2. Testing asking a question 
    7. Summary
    8. Questions
    9. Answers
    10. Further reading
  25. Chapter 14: Configuring and Deploying to Azure
    1. Technical requirements
    2. Getting started with Azure
      1. Signing up to Azure
      2. Understanding the Azure services we are going to use
    3. Configuring the ASP.NET Core backend for staging and production
    4. Publishing our ASP.NET Core backend to Azure
      1. Publishing to production
      2. Publishing to staging
    5. Configuring the React frontend for staging and production
    6. Publishing the React frontend to Azure
      1. Publishing to production
      2. Publishing to staging
    7. Summary
    8. Questions
    9. Answers
    10. Further reading
  26. Chapter 15: Implementing CI and CD with Azure DevOps
    1. Technical requirements
    2. Getting started with CI and CD
      1. Understanding CI and CD
      2. Enabling our tests to run in CI and CD
      3. Creating an Azure DevOps project
    3. Implementing CI
      1. Creating a build pipeline
      2. Implementing a build pipeline for our Q&A app
    4. Implementing CD
      1. Deploying to staging
      2. Deploying to production
      3. Testing the automated deployment
    5. Summary
    6. Questions
    7. Answers
    8. Further reading
  27. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: ASP.NET Core 5 and React - Second Edition
  • Author(s): Carl Rippon
  • Release date: January 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800206168