HomeCoursesBuilding Web Applications with React and ASP.NET Core

Beginner

60h

Updated 1 month ago

Building Web Applications with React and ASP.NET Core
Save

Gain insights into building web applications with React and ASP.NET Core. Learn about React forms, state management, REST APIs, database interaction, security, and CI/CD deployment with Azure DevOps.

Join 2.7 million developers at

Overview

Content

Reviews

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 to interact with databases, create REST APIs, secure the backend, and perform automated testing. The course ends with the deployment and integration of the CI/CD pipeline with Azure DevOps. By the end of this course, you will possess the skills to craft robust and responsive web applications using ASP.NET Core and React. This proficiency will enhance your career prospects, making you a valuable contributor to modern and innovative software projects.

React is a popular library for building component-based frontends. It works fantastically well with ASP.NET Core, a great choice...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

Content

188 Lessons15 Quizzes

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

Create a Trello Clone with React

Project

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

Build a REST API Using ASP.NET Core 6

Project

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

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative resource is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 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 Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

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!

Course

ASP.NET Core MVC

Gain insights into creating dynamic web apps with ASP.NET Core MVC. Explore Razor, localization, advanced features, and best practices for building public and business applications.

26 h 40 m

intermediate

Course

The Ultimate Guide to gRPC in ASP.NET Core

Gain insights into using gRPC in ASP.NET Core. Discover remote procedures, Protobuf serialization, advanced features, and performance best practices to create low-latency, high-throughput applications.

15 h

intermediate

Course

JavaScript Fundamentals Before Learning React

Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

3 h

beginner

Course

Getting Started with React Router v6

Gain insights into React Router v6, learn types of routes, navigation, private routes, page animations, and code-splitting. Create dynamic, multi-page React apps through hands-on projects.

15 h

beginner

Course

Mastering C# and .NET

Delve into .NET development with C#, covering programming fundamentals, object-oriented principles, exception handling, and multithreading. Gain hands-on experience to build cross-platform applications effectively.

beginner

The Ultimate Guide to gRPC in ASP.NET Core

intermediate

15 hour

Course

JavaScript Fundamentals Before Learning React