Home>Courses>Building Web Applications with React and ASP.NET Core

Building Web Applications with React and ASP.NET Core

Learn to build modern web applications using Microsoft’s .NET framework and the popular JavaScript library, React, for creating user interfaces.

Beginner

188 Lessons

60h

Certificate of Completion

Learn to build modern web applications using Microsoft’s .NET framework and the popular JavaScript library, React, for creating user interfaces.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

163 Playgrounds

15 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

React is a popular library for building component-based frontends. It works fantastically well with ASP.NET Core, a great choice for building highly performant backends that interact with SQL Server and are hosted in Azure. The course begins with an introduction to React and ASP.NET Core fundamentals. The first part of the course covers topics on React, such as React forms, Emotion for styling React components, React Router, and Redux for state management. In the second part, you will learn to use Dapper t...Show More

What You'll Learn

An understanding of React and ASP.NET to build web applications

Hands-on experience in building frontend using React and TypeScript

The ability to create REST APIs using ASP.NET Core

Hands-on experience in securing the backend using Auth0

Working knowledge of Azure DevOps to implement CI/CD Pipeline

The ability to interact with databases using Dapper

An understanding of React and ASP.NET to build web applications

Course Content

Introduction

1 Lessons

Get familiar with building full-stack applications using ASP.NET Core and React.

About This Course

Getting Started

15 Lessons

Get started with building SPAs using React and ASP.NET Core, covering integration, architecture, and development essentials.

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

7 Lessons

Work your way through building a TypeScript-based Q&A app with React and ASP.NET Core.

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

17 Lessons

Grasp the fundamentals of building interactive React frontends with TypeScript, JSX, props, and state.

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

11 Lessons

Dig into styling React components using Emotion, CSS modules, reusable components, and pseudo-classes.

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

13 Lessons

See how it works to integrate React Router for multi-page navigation within a SPA.

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

15 Lessons

Piece together the parts of building forms in React using controlled components and React Hook Form.

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

11 Lessons

Learn how to use Redux to enhance state management in React applications.

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

12 Lessons

Unpack the core of database interaction and management with Dapper and DbUp.

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

10.

Creating REST API Endpoints

16 Lessons

Go hands-on with creating and managing REST API endpoints using ASP.NET Core.

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

11.

Improving Performance and Scalability

14 Lessons

Apply your skills to enhance API performance, scalability, async methods, and caching.

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

12.

Securing the Backend

10 Lessons

Take a closer look at securing React and ASP.NET apps with Auth0, OIDC, and CORS.

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

13.

Interacting with RESTful APIs

16 Lessons

Tackle secure interactions with RESTful APIs using fetch, Auth0, and React context methods.

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

14.

Adding Automated Tests

10 Lessons

Master the steps to implement comprehensive automated testing for both backend and frontend.

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

15.

Configuring and Deploying to Azure

10 Lessons

Step through the deployment of React and ASP.NET Core apps to Azure environments.

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

16.

Implementing CI and CD with Azure DevOps

9 Lessons

Walk through the CI/CD implementation using Azure DevOps, improving reliability and deployment.

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

17.

Conclusion

1 Lessons

Examine building web apps with ASP.NET Core and React, including deployment and security.

Summary

Course Author

Packt

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

JavaScript Fundamentals Before Learning React

Gain insights into essential JavaScript ES6 features, syntax, and concepts like ternary operators, built-in functions, and higher-order functions to enhance your React learning experience.

beginner

3 hours

Course

Getting Started with React Router v6

beginner

15 hours

Course

Mastering C# and .NET

Learn the fundamentals of .NET and gain skills for writing applications using the C# programming language.

beginner

16 hours 4 mins

Course