Building React and ASP.NET Core Applications

Building React and ASP.NET Core Applications

2h 41mIntermediate2019-12-03

Authors

Ervis Trupja

Ervis Trupja

Full-Stack .NET Web Developer with a mathematical background

Course details

React is a popular framework that's well suited for building single-page applications (SPAs) along with ASP.NET Core; however, wiring the two frameworks together can be challenging. In this course, instructor Ervis Trupja shows you how, sharing best practices for organizing and developing a web application with a back end that's built on top of the ASP.NET Web API and a front end that's built on top of React. Ervis steps through how to build the service layer with the ASP.NET Web API to expose the required endpoints to create, read, update, and delete entries. He then shows how to build a UI using React with Bootstrap, implement Redux in your React app, and handle user authentication with Auth0.

Learning objectives
Setting up the app infrastructure
Creating data models
Creating, reading, updating, and deleting API endpoints
Testing API endpoints using Postman
Reading data from React
Adding new data from React
Handling errors
Implementing Redux in an existing React app
Implementing authentication in your React app

Skills covered

ASP.NET Web APIASP.NETReact.jsMetaBack-End Web DevelopmentFull-Stack Web DevelopmentFront-End Web DevelopmentProjectWeb DevelopmentMicrosoft

Concepts

Introduction

  • Getting started with React
  • What you should know

Setting Up the App Infrastructure

  • Demo application overview
  • .NET Core templates
  • Create a new application
  • Web API architectural overview
  • React architectural overview

Setting Up Web API

  • Creating data models
  • Creating mock services
  • Create API endpoint
  • Read API endpoint
  • Update API endpoint
  • Delete API endpoint
  • Testing API endpoints using Postman

Getting Started with React

  • React key concepts
  • Designing the Trips page
  • Reading data from React
  • Designing the Create page
  • Adding new data from React
  • Challenge - Updating data from React
  • Solution - Updating data from React
  • Deleting data from React
  • Handling errors in React

Implementing Redux to an Existing React App

  • Why Redux
  • Redux actions
  • Redux store
  • Redux reducers
  • Connecting the dots

Implementing Authentication in Your React App

  • Setting up Auth0
  • Setting up authentication in React
  • Final steps

Conclusion

  • Where to go next
80,000 Toman