Building Web Applications with React and ASP.NET Core

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.

Beginner

188 Lessons

60h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

163 Playgrounds

15 Quizzes

This course includes

163 Playgrounds

15 Quizzes

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

What You'll Learn

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

Course Content

Introduction

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

About This Course

Getting Started

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

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

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

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.

Working with Forms

15 Lessons

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

Managing State with Redux

11 Lessons

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

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.

10.

Creating REST API Endpoints

16 Lessons

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

11.

Improving Performance and Scalability

14 Lessons

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

12.

Securing the Backend

10 Lessons

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

13.

Interacting with RESTful APIs

16 Lessons

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

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.

15.

Configuring and Deploying to Azure

10 Lessons

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

16.

Implementing CI and CD with Azure DevOps

9 Lessons

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

17.

Conclusion

1 Lesson

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

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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!