Log In
0% completed
All Lessons
Free Lessons (6)
Introduction
About This Course
Getting Started
Understanding the ASP.NET React Template
SPA Architecture
Understanding the ASP.NET Core Backend
Understanding the Backend Entry Point
Understanding the Program.cs File in Newer Versions of ASP.NET
Understanding Controllers
Understanding the React Frontend
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
Quiz: ASP.NET React Template
Summary: ASP.NET React Template
Creating Decoupled React and ASP.NET 5 Apps
Introduction: Decoupled React and ASP.NET Apps
Creating an ASP.NET Core Web API Project
Creating a React and TypeScript App
Adding Linting to React and TypeScript
Adding Automatic Code Formatting to React and TypeScript
Quiz: Decoupled React and ASP.NET App
Summary: Decoupled React and ASP.NET App
Building a Frontend with React and TypeScript
Introduction: Creating React Frontend with Typescript
Understanding JSX
Understanding and Enabling Strict Mode
Creating Function-Based Components
Adding Elements to the Header Component
Creating Mock Data
Implementing Component Props
Optional and Default Props
Children Prop
Function Props
Implementing Component State
Using useEffect to Execute Logic
Handling Events
Quiz: Creating React Frontend with TypeScript
Challenge: Creating a New Footer in Our Web Page
Solution: Creating a New Footer in Our Web Page
Summary: Creating React Frontend with TypeScript
Styling React Components with Emotion
Introduction: Styling React Components with Emotion
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 Home Page Styling
Quiz: Styling React Components with Emotion
Challenge: Adding a Button and Styling it with Emotion
Solution: Adding Button and Styling It with Emotion
Summary: Styling React Components with Emotion
Routing with React Router
Introduction: Routing with React
Setting Up React Router
Handling Routes Not Found
Implementing Links
Using Route Parameters
Implementing More of the Question Page
Creating an AnswerList Component
Using Query Parameters
Lazy Loading Routes
Quiz: Routing with React
Challenge: Create a Button That Routes to Another Web Page
Solution: Create a Button That Routes to Another Web Page
Summary: Routing with React
Working with Forms
Introduction: Working with Forms
Understanding Controlled Components
Reducing Boilerplate Code with React Hook Form
Creating Form Styled Components
Implementing the Ask Form
Implementing the Answer Form
Implementing Validation
Implementing Validation on the Answer Form
Submitting Forms
Implementing Form Submission in the Ask Form
Implementing Form Submission in the Answer Form
Quiz: Working with Forms
Challenge: Create a Comment Field on the Ask Page with Validation
Solution: Create a Comment Field on the Ask Page with Validation
Summary: Working with Forms
Managing State with Redux
Introduction: Using Redux in React
Understanding the Redux Pattern
Setting up Redux and Creating State Objects
Creating Actions
Creating a Reducer
Creating the Store
Connecting Components to the Store
Connecting the Question Page
Connecting the Search Page
Quiz: Using Redux in React
Summary: Using Redux in React
Interacting with the Database with Dapper
Introduction: Interacting with Database
Implementing the Database
Understanding what Dapper Is and Its Benefits
Reading Data Using Dapper
Creating a Repository Method to Get Questions
Creating a Repository Method to Get Questions by a Search
Creating a Repository Method to Get a Single Question
Writing Data Using Dapper
Managing Migrations Using DbUp
Embedding SQL Scripts in Our Project
Quiz: Interacting with Database
Summary: Interacting with Database
Creating REST API Endpoints
Introduction: Rest API Endpoints
Creating an API Controller
Creating Controller Action Methods
Extending the GetQuestions Action Method for Searching
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
Adding Model Validation
Adding Validation to Updating a Question
Removing Unnecessary Request Fields
Removing Unnecessary Request Fields from Posting an Answer
Quiz: Rest API Endpoints
Challenge: Create an Action Method for Searching Question
Solution: Create an Action Method for Searching Question
Summary: Rest API Endpoints
Improving Performance and Scalability
Introduction: Improving Performance and Scalability
Reducing Database Round Trips
Using WebSurge to Load Test Our Endpoint
Using Dapper Multi-Mapping to Resolve the N+1 Problem
Using Dapper's Multi-Results Feature
Paging Data
Making API Controllers Asynchronous
Implementing an Asynchronous Controller Action Method
Mixing Asynchronous and Synchronous Code
Caching Data
Using the Data Cache in An API Controller Action Method
Quiz: Improving Performance and Scalability
Try Out Load Testing Our Endpoints with Vegeta
Summary: Improving Performance and Scalability
Securing the Backend
Introduction: Securing the Backend Using Auth0
Understanding OIDC
Setting Up Auth0 with Our ASP.NET Backend
Configuring Our ASP.NET Backend to Authenticate with Auth0
Protecting Endpoints
Protecting Endpoints with a Custom Authorization Policy
Using the Authenticated User When Posting Questions and Answers
Adding CORS
Quiz: Securing the Backend Using Auth0
Summary: Securing the Backend Using Auth0
Interacting with RESTful APIs
Introduction: Interaction with RESTful APIs
Using Fetch to Interact with Unauthenticated REST API Endpoints
Extracting Out a Generic http Function
Getting a Question from the REST API
Interacting with Auth0 from the Frontend
Implementing a Central Authentication Context
Implementing the Sign-In Process
Configuring Auth0 Settings in Our Frontend
Controlling Authenticated Options
Only Allowing Authenticated Users to Answer a Question
Using Fetch to Interact With Authenticated REST API Endpoints
Aborting Data Fetching
Quiz: Interaction with RESTful APIs
Challenge: Create a Button to Delete Unanswered Questions
Solution: Create a Button to Delete Unanswered Questions
Summary: Interaction with RESTful APIs
Adding Automated Tests
Introduction: Automated Testing
Understanding the Different Types of Automated Test
Implementing .NET Tests with xUnit
Testing Controller Action Methods
Implementing React Tests with Jest
Testing React Components
Implementing End-to-End Tests with Cypress
Testing Asking a Question
Quiz: Automated Testing
Summary: Automated Testing
Configuring and Deploying to Azure
Introduction: Configuration and Deployment to Azure
Getting Started with Azure
Configuring the ASP.NET Core Backend
Publishing the ASP.NET Core Backend to Azure
Publishing to Staging
Configuring the React Frontend
Publishing the React Frontend to Azure
Publishing to Staging
Quiz: Configuration and Deployment to Azure
Summary: Configuration and Deployment to Azure
Implementing CI and CD with Azure DevOps
Introduction: Implementation of CI and CD Using DevOps
Getting Started with CI and CD
Implementing CI
Implementing a Build Pipeline for Our Q&A App
Implementing a Build Pipeline for Frontend
Implementing CD
Deploying to Production
Quiz: Implementation of CI and CD Using DevOps
Summary: Implementation of CI and CD Using DevOps
Conclusion
Summary
Building Web Applications with React and ASP.NET Core
/
...
/
Summary
Summary
Conclude the course and discuss what to do next.
We'll cover the following...
Wrap up
Access this course and
1400+
top-rated courses and projects.
Unlock Full Access
Preview Free Lessons
→
Preview Free Lessons