ASP.NET Core 3 and React

ASP.NET Core 3 and React

by Carl Rippon
Released December 2019
Publisher(s): Packt Publishing
ISBN: 9781789950229

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 modern, scalable, and cloud-ready single-page applications using ASP.NET Core, React, TypeScript, and Azure

Key Features

  • Explore the full potential and latest features of .NET Core 3.0, TypeScript 3, and React
  • Learn how to manage data, application design, and packaging, and secure your web apps
  • Discover best practices for using React and TypeScript to build a scalable frontend that interacts with REST APIs

Book Description

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.

What you will learn

  • Build RESTful APIs with .NET Core using API controllers
  • Create strongly typed, interactive, and function-based React components using Hooks
  • Build forms efficiently using reusable React components
  • Perform client-side state management with Redux and the React Context API
  • Secure REST APIs with ASP.NET identity and authorization policies
  • Run a range of automated tests on the frontend and backend
  • Implement continuous integration (CI) and continuous delivery (CD) processes into Azure using Azure DevOps

Who this book is for

If you're a web developer looking to build solid full-stack web applications with .NET Core and React, this book is for you. Although this book does not assume any knowledge of React, you're expected to have a basic understanding of .NET Core.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. ASP.NET Core 3 and React
  3. Dedication
  4. About Packt
    1. Why subscribe?
  5. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Code in Action
      4. Conventions used
    4. Get in touch
      1. Reviews
  7. Section 1: Getting Started
  8. Understanding the ASP.NET Core React Template
    1. Technical requirements
    2. SPA architecture
    3. Understanding the backend
      1. Creating an ASP.NET Core and React templated app
      2. Understanding the backend entry point
      3. Understanding the Startup class
        1. The ConfigureServices method
        2. The Configure method
      4. Custom middleware
      5. Understanding controllers
    4. Understanding the 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. Further reading
  9. Creating Decoupled React and ASP.NET Core Apps
    1. Technical requirements
    2. Creating an ASP.NET Core Web API project
    3. Creating a React and TypeScript app
      1. Understanding the benefits of TypeScript
      2. Creating the app with CRA
    4. Adding linting to React and TypeScript
      1. Configuring Visual Studio Code to lint TypeScript code
      2. Configuring linting rules
    5. Adding automatic code formatting to React and TypeScript
      1. Adding Prettier
    6. Summary
    7. Questions
    8. Further reading
  10. Section 2: Building a Frontend with React and TypeScript
  11. Getting Started with React and TypeScript
    1. Technical requirements
    2. Understanding JSX
    3. Creating function-based components
      1. Creating a Header component
        1. Creating our first component
        2. Adding elements to the Header component
        3. Creating a HomePage component
        4. Creating mock data
    4. Styling components
      1. Styling using CSS class references
      2. Understanding the benefits of CSS in JS
      3. Installing Emotion
      4. Styling the document body
      5. Styling components using Emotion
        1. Styling the App component
        2. Styling the Header component
        3. Styling the HomePage component
    5. Implementing component props
      1. Creating HomePage child components
        1. Creating the QuestionList component
        2. Creating the Question component
        3. Wiring up the components
      2. Optional and default props
      3. Children prop
      4. Function props
    6. Implementing component state
      1. Changing getUnansweredQuestions so that it's asynchronous
      2. Using useEffect to execute logic
      3. Using useState to implement component state
    7. Handling events
      1. Handling a button click event
      2. Handling an input change event
    8. Rendering optimization
    9. Summary
    10. Questions
    11. Further reading
  12. Routing with React Router
    1. Technical requirements
    2. Installing React Router with types
    3. Declaring routes
      1. Creating some blank pages
      2. Creating a component containing routes
      3. Redirecting a route
    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. Further reading
  13. Working with Forms
    1. Technical requirements
    2. Understanding controlled components
    3. Reducing boilerplate code with generic components
      1. Creating a Form component
      2. Creating a Field component
      3. Sharing state with a React context
        1. Understanding a React context
        2. Creating a form context
        3. Creating a form context provider
        4. Consuming the form context
      4. Implementing the ask form
      5. Implementing the answer form
    4. Implementing validation
      1. Adding validation rules to the Form component
      2. Tracking validation errors with state
      3. Invoking validation rules
      4. Rendering validation errors
      5. Implementing validation on the ask and answer forms
    5. Submitting forms
      1. Handling form submission
      2. Implementing form submission in the search, ask, and answer 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
        4. Trying out our forms
    6. Summary
    7. Questions
    8. Further reading
  14. Managing State with Redux
    1. Technical requirements
    2. Understanding the Redux pattern
      1. Principles
      2. Key concepts
    3. Installing Redux and Redux Thunk
    4. Creating the state
    5. Creating actions
    6. Creating action creators
      1. Implementing an action creator for getting unanswered questions
      2. Implementing an action creator for posting a question
      3. Implementing an action creator for clearing the posted question
    7. Creating a reducer
    8. Creating the store
    9. Connecting components to the store
      1. Adding a store provider
      2. Connecting the home page
      3. Connecting the ask page
    10. Summary
    11. Questions
    12. Further reading
  15. Section 3: Building an ASP.NET Core Backend
  16. 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. Configuring DbUp to do migrations on app startup
      3. Embedding SQL Scripts in our project
      4. Performing a database migration
    8. Summary
    9. Questions
    10. Further reading
  17. Creating REST API Endpoints
    1. Technical requirements
    2. Creating an API controller
      1. Creating an API controller for questions
      2. 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. Further reading
  18. Creating a Real-Time API with SignalR
    1. Technical requirements
    2. Understanding the benefits of SignalR
    3. Creating a SignalR hub
    4. Pushing data to SignalR clients from an API controller
    5. Creating the SignalR real-time API endpoint
    6. Interacting with the SignalR real-time API from React
      1. Installing the SignalR client
      2. Setting up the client connection
      3. Stopping the client connection
      4. Adding CORS to our backend
      5. Mapping a question from the real-time API to React state
    7. Summary
    8. Questions
    9. Further reading
  19. Improving Performance and Scalability
    1. Technical requirements
    2. Reducing database round trips
      1. 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 multi results
    3. Paging data
      1. Adding test questions for the load test
      2. Load testing the current implementation
      3. Implementing data paging
    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. Reducing garbage collection
      1. Load testing the current implementation
      2. Implementing custom model binding
    7. Summary
    8. Questions
    9. Further reading
  20. Securing the Backend
    1. Technical requirements
    2. Understanding OIDC
    3. Setting up Auth0 with our ASP.NET Core backend
      1. Setting up Auth0
      2. Configuring our ASP.NET Core 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. Summary
    7. Questions
    8. Further reading
  21. 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 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 flow
      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
      3. Testing protected endpoints with Postman
    6. Stopping a data state being set if the user navigates away from the page
    7. Summary
    8. Questions
    9. Further reading
  22. Section 4: Moving into Production
  23. 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
        1. Testing the action method to implement GetQuestions
        2. Testing the action method to get a single question
    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. Further reading
  24. 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. Further reading
  25. 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
    4. Implementing CD
      1. Deploying to staging
      2. Deploying to production
    5. Summary
    6. Questions
    7. Further reading
  26. Assessments
    1. Answers
      1. Chapter 1 – Understanding the ASP.NET Core React Template
      2. Chapter 2 – Creating Decoupled React and ASP.NET Core Apps
      3. Chapter 3 – Getting Started with React and TypeScript
      4. Chapter 4 – Routing with React Router
      5. Chapter 5 – Working with Forms
      6. Chapter 6 – Managing State with Redux
      7. Chapter 7 – Interacting with the Database with Dapper
      8. Chapter 8 – Creating REST API Endpoints
      9. Chapter 9 – Creating a Real-Time API with SignalR
      10. Chapter 10 – Improving Performance and Scalability
      11. Chapter 11 – Securing the Backend
      12. Chapter 12 – Interacting with RESTful APIs
      13. Chapter 13 – Adding Automated Tests
      14. Chapter 14 – Configuring and Deploying to Azure
      15. Chapter 15 – Implementing CI and CD with Azure DevOps
  27. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: ASP.NET Core 3 and React
  • Author(s): Carl Rippon
  • Release date: December 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789950229