book

ASP.NET Core 5 and React - Second Edition

Name: ASP.NET Core 5 and React - Second Edition
Author: Carl Rippon
ISBN: 9781800206168

by Carl Rippon

January 2021

Intermediate to advanced

568 pages

10h 9m

English

Packt Publishing

Read now

Unlock full access

ASP.NET Core 5 and React — Second Edition
Why subscribe?ContributorsAbout the authorAbout the reviewerPackt is searching for authors like you
Preface
Who this book is forWhat this book coversSection 1: Getting StartedSection 2: Building a Frontend with React and TypeScriptSection 3: Building an ASP.NET BackendSection 4: Moving into ProductionTo get the most out of this bookDownload the example code filesCode in ActionConventions usedGet in touchReviews
Section 1: Getting Started
Chapter 1: Understanding the ASP.NET 5 React Template
Technical requirementsSPA architectureUnderstanding the ASP.NET Core backendCreating an ASP.NET Core and React templated appUnderstanding the backend entry pointUnderstanding the Startup classCustom middlewareUnderstanding controllersUnderstanding the React frontendUnderstanding the frontend entry pointRunning in development modePublishing processUnderstanding the frontend dependenciesUnderstanding how the single page is servedUnderstanding how components fit togetherUnderstanding how components access the backend web APISummaryQuestionsAnswersFurther reading
Chapter 2: Creating Decoupled React and ASP.NET 5 Apps
Technical requirementsCreating a React and TypeScript appUnderstanding the benefits of TypeScriptCreating the app with CRAAdding linting to React and TypeScriptConfiguring Visual Studio Code to lint TypeScript codeConfiguring linting rulesAdding automatic code formatting to React and TypeScriptAdding PrettierResolving errorsSummaryQuestionsAnswersFurther reading
Section 2: Building a Frontend with React and TypeScript
Chapter 3: Getting Started with React and TypeScript
Technical requirementsUnderstanding JSXUnderstanding and enabling strict modeCreating function-based componentsCreating a Header componentAdding elements to the Header componentCreating a HomePage componentCreating mock dataImplementing component propsCreating HomePage child componentsOptional and default propsChildren propFunction propsImplementing component stateUsing useEffect to execute logicUsing useState to implement component stateHandling eventsHandling a button click eventHandling an input change eventSummaryQuestionsAnswersFurther reading
Chapter 4: Styling React Components with Emotion
Technical requirementsStyling components with CSSStyling the document bodyStyling the App componentStyling the Header componentStyling components with CSS modulesStyling components with EmotionInstalling EmotionStyling the App componentStyling the Header componentStyling pseudo-classes and nested elements with EmotionCreating a reusable styled component with EmotionCompleting the home page stylingStyling the QuestionList componentStyling the Question componentSummaryQuestionsAnswersFurther reading
Chapter 5: Routing with React Router
Technical requirementsInstalling React RouterDeclaring routesCreating some blank pagesCreating a component containing routesHandling routes not foundImplementing linksUsing the Link componentNavigating programmaticallyUsing route parametersAdding the question page routeImplementing more of the question pageCreating an AnswerList componentUsing query parametersLazy loading routesSummaryQuestionsAnswersFurther reading
Chapter 6: Working with Forms
Technical requirementsUnderstanding controlled componentsReducing boilerplate code with React Hook FormInstalling React Hook FormRefactoring the Header component to use React Hook FormCreating form styled componentsImplementing the ask formImplementing the answer formImplementing validationImplementing validation on the ask formImplementing validation on the answer formSubmitting formsImplementing form submission in the search formImplementing form submission in the ask formImplementing form submission in the answer formSummaryQuestionsAnswersFurther reading

Chapter 7: Managing State with Redux
Technical requirementsUnderstanding the Redux patternPrinciplesKey conceptsInstalling ReduxCreating the stateCreating actionsUnderstanding the actions in the storeGetting unanswered questionsViewing a questionSearching questionsCreating a reducerCreating the storeConnecting components to the storeAdding a store providerConnecting the home pageConnecting the question pageSummaryQuestionsAnswersFurther reading
Section 3: Building an ASP.NET Backend
Chapter 8: Interacting with the Database with Dapper
Technical requirementsImplementing the databaseCreating the databaseCreating database tablesCreating stored proceduresUnderstanding what Dapper is and its benefitsInstalling and configuring DapperReading data using DapperCreating the repository classCreating a repository method to get questionsCreating a repository method to get questions by a searchCreating a repository method to get unanswered questions Creating a repository method to get a single questionCreating a repository method to check whether a question existsCreating a repository method to get an answerWriting data using DapperAdding methods to write data to the repository interfaceCreating a repository method to add a new questionCreating a repository method to change a questionCreating a repository method to delete a questionCreating a repository method to add an answerManaging migrations using DbUpInstalling DbUp into our projectEmbedding SQL Scripts in our projectPerforming a database migrationSummaryQuestionsAnswersFurther reading
Chapter 9: Creating REST API Endpoints
Technical requirementsCreating an API controllerInjecting the data repository into the API controllerCreating controller action methodsCreating an action method for getting questionsExtending the GetQuestions action method for searchingCreating an action method for getting unanswered questionsCreating an action method for getting a single questionCreating an action method for posting a questionCreating an action method for updating a questionCreating an action method for deleting a questionCreating an action method for posting an answerAdding model validationAdding validation to posting a questionAdding validation to updating a questionAdding validation to posting an answerRemoving unnecessary request fieldsRemoving unnecessary request fields from posting a questionRemoving unnecessary request fields from posting an answerSummaryQuestionsAnswersFurther reading
Chapter 10: Improving Performance and Scalability
Technical requirementsReducing database round tripsUnderstanding the N+1 problemUsing WebSurge to load test our endpointUsing Dapper multi-mapping to resolve the N+1 problemUsing Dapper's multi-results featurePaging dataAdding test questions for the load testLoad testing the current implementationMaking API controllers asynchronousTesting the current implementationImplementing an asynchronous controller action methodMixing asynchronous and synchronous codeCaching dataLoad testing the current implementationImplementing a data cacheUsing the data cache in an API controller action methodSummaryQuestionsAnswersFurther reading
Chapter 11: Securing the Backend
Technical requirementsUnderstanding OIDCSetting up Auth0 with our ASP.NET backendSetting up Auth0Configuring our ASP.NET backend to authenticate with Auth0Protecting endpointsProtecting endpoints with simple authorizationProtecting endpoints with a custom authorization policyUsing the authenticated user when posting questions and answersAdding CORSSummaryQuestionsAnswersFurther reading
Chapter 12: Interacting with RESTful APIs
Technical requirementsUsing fetch to interact with unauthenticated REST API endpointsGetting unanswered questions from the REST APIExtracting out a generic HTTP http functionGetting a question from the REST APISearching questions with the REST APIInteracting with Auth0 from the frontendInstalling the Auth0 JavaScript clientRecapping the sign-in and sign-out flowsCreating the sign-in and sign-out routesImplementing a central authentication contextImplementing the sign-in processImplementing the sign-out processConfiguring Auth0 settings in our frontendTesting the sign-in and sign-out processesControlling authenticated optionsDisplaying the relevant options in the headerOnly allowing authenticated users to ask a questionOnly allowing authenticated users to answer a questionUsing fetch to interact with authenticated REST API endpointsPosting a question to the REST APIPosting an answer to the REST APIAborting data fetchingSummaryQuestionsAnswersFurther reading
Section 4: Moving into Production
Chapter 13: Adding Automated Tests
Technical requirementsUnderstanding the different types of automated testUnit testsEnd-to-end testsIntegration testsImplementing .NET tests with xUnitGetting started with xUnitTesting controller action methodsImplementing React tests with JestGetting started with JestTesting React componentsTesting the Page componentTesting the Question componentTesting the HomePage componentImplementing end-to-end tests with CypressGetting started with Cypress Testing asking a question SummaryQuestionsAnswersFurther reading
Chapter 14: Configuring and Deploying to Azure
Technical requirementsGetting started with AzureSigning up to AzureUnderstanding the Azure services we are going to useConfiguring the ASP.NET Core backend for staging and productionPublishing our ASP.NET Core backend to AzurePublishing to productionPublishing to stagingConfiguring the React frontend for staging and productionPublishing the React frontend to AzurePublishing to productionPublishing to stagingSummaryQuestionsAnswersFurther reading
Chapter 15: Implementing CI and CD with Azure DevOps
Technical requirementsGetting started with CI and CDUnderstanding CI and CDEnabling our tests to run in CI and CDCreating an Azure DevOps projectImplementing CICreating a build pipelineImplementing a build pipeline for our Q&A appImplementing CDDeploying to stagingDeploying to productionTesting the automated deploymentSummaryQuestionsAnswersFurther reading
Other Books You May Enjoy
Leave a review - let other readers know what you think

Content preview from ASP.NET Core 5 and React - Second Edition

Chapter 4: Styling React Components with Emotion

In this chapter, we will style the Q&A app we have built so far with a popular CSS-in-JS library called Emotion. We will start by understanding how you can style components with plain CSS and its drawbacks. Next, we will move on to understanding how CSS-in-JS addresses the problems that plain CSS has before installing Emotion. Finally, we will style components using Emotion's css prop before creating some reusable styled components.

We'll cover the following topics in this chapter:

Styling components with CSS
Styling components with CSS modules
Styling components with Emotion
Styling pseudo-classes and nested elements with Emotion
Creating a reusable styled component with Emotion
Completing the ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781800206168

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

ASP.NET Core 5 and React - Second Edition

by Carl Rippon

Chapter 4: Styling React Components with Emotion

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.