ASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3

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