Introduction

Completed

As a developer, consider what it means to build a program that's meant for a web audience. Technically, you can meet this goal simply by building a static webpage, with HTML, CSS, and JavaScript.

But more often than not, you're doing something more complicated than that. You're creating something that is multilayered, with one layer in HTML, CSS, and JavaScript, and another layer that's written in some other runtime.

In this module, you'll build one layer (sometimes referred to as a front-end app) by using the React framework. You'll build another layer (a back-end API) by using .NET 6 and a minimal API. The combination of the two layers forms a full stack app.

Scenario: Let's build a full stack app

You're a developer on a team. You have taken your first steps with the minimal API, and you love how easy it's to get started with just four lines of code. Now, you've been asked to add a front-end app to an existing API, so that end users on the web can use it.

What will you learn?

You'll learn how to create a front-end app for your minimal API app. This includes:

  • Building a front-end app by using React.
  • Using the React app to call the minimal API app. Configure the minimal API app to accept calls from the React app with CORS.
  • Add a design system to the React app to improve usability.

What is the main goal?

The main goal is to build a full stack application that lets users on the web use your API, via an interface written using React.