Cover image for ASP.NET Core 5 and React - Second Edition

ASP.NET Core 5 and React - Second Edition

Release Date: 2021/01/01
ISBN: 9781800206168
Topic:
0%
24
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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