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

Table of contents :
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

Polecaj historie

ASP.NET Core 5 and React: Full-stack web development using .NET 5, React 17, and TypeScript 4 [2 ed.] 180020616X, 9781800206168

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

837 176 17MB Read more

Full-Stack React, TypeScript, and Node 9781839219931

2,652 476 18MB Read more

Full-Stack React Projects: Modern web development using React 16, Node, Express, and MongoDB 9781788832946, 1788832949

Unleash the power of MERN stack by building diverse web applications using React, Node.js, Express, and MongoDB Key Feat

2,082 493 22MB Read more

Full Stack Development with Spring Boot 3 and React: Build modern web applications using the power of Java, React, and TypeScript [4 ed.] 1805122460, 9781805122463

Get up and running with the Spring Boot and React stack – build an app from start to finish, test the frontend and backe

489 238 Read more

Learn React with TypeScript 3: Beginner’s guide to modern React web development with TypeScript 3 1789610257

6,918 1,936 6MB Read more

Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL 9781839219931

Discover the current landscape of full-stack development and how to leverage modern web technologies for building produc

10,678 3,646 28MB Read more

Full Stack Development with Spring Boot 3 and React: Build modern web apps using the power of Java, React and TypeScript [Fourth Edition] 9781805122463

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack de

499 105 22MB Read more

Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, and Docker 9781484257388, 1484257383

Explore what React, Node, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in m

7,504 1,306 6MB Read more

Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, and Docker [1 ed.] 9781484257388, 9781484257371

Explore what React, Node, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in m

1,997 389 4MB Read more

Full-Stack React, TypeScript, and Node 3024787345, 9781838558758, 9781839215414

1,698 175 47MB Read more