React with .NET Web API – Basic App Tutorial

Learn how to create a basic React application that leverages a .NET Web API Component (that we write using C#). In order to integrate React with a .NET Web API component we utilise the 'ASP.NET Core with React.js' project template from within the free version of Visual Studio 2022 (the community edition). The App that we build enables users to rank items by dragging and dropping the items (displayed in a list) to a cell position on the ranking grid (the grid is positioned above the list of relevant items). Each cell position on the grid denotes a ranking value for e.g. the top left cell is position number 1, denoting the top ranked item, the cell positioned to the immediate right of this cell denotes the 2nd ranked item and so on...the bottom right cell denotes the worst possible ranking position. So this is a fun app to code that will give a learner an insight into how to build a simple app using React on the front-end that leverages a .NET Web API component on the backend. ⚙️ Code: https://github.com/GavinLonDigital/RankingApp ✏️ Gavin Lon created this tutorial. Check out his channel: @GavinLon ❤️ Try interactive React courses we love, right in your browser: https://scrimba.

免费1 节课1小时35分钟入门

freeCodeCamp.org 频道

2023年1月

5 天前核查

免费

这门课免费,发布在 YouTube 上。作者是该频道本人,我们只做整理,并确认视频能够打开。

开始学习

相关主题

本课程包含

  • 1小时35分钟 视频
  • 1 节课
  • 难度:入门
  • 语言:English
  • 记住你看到哪里
  • 完全免费,无需银行卡

课时

1 个部分 · 1 节课 · 1小时35分钟 总时长

第 1 至 1 节1 节课 · 1小时35分钟

需要什么

  • 无需基础:课程从零讲起。

课程介绍

Learn how to create a basic React application that leverages a .NET Web API Component (that we write using C#). In order to integrate React with a .NET Web API component we utilise the 'ASP.NET Core with React.js' project template from within the free version of Visual Studio 2022 (the community edition). The App that we build enables users to rank items by dragging and dropping the items (displayed in a list) to a cell position on the ranking grid (the grid is positioned above the list of relevant items). Each cell position on the grid denotes a ranking value for e.g. the top left cell is position number 1, denoting the top ranked item, the cell positioned to the immediate right of this cell denotes the 2nd ranked item and so on...the bottom right cell denotes the worst possible ranking position. So this is a fun app to code that will give a learner an insight into how to build a simple app using React on the front-end that leverages a .NET Web API component on the backend. ⚙️ Code: https://github.com/GavinLonDigital/RankingApp ✏️ Gavin Lon created this tutorial. Check out his channel: @GavinLon ❤️ Try interactive React courses we love, right in your browser: https://scrimba.

适合谁

  • 从零开始学React的人。

这两项是我们根据课程难度得出的判断,课程介绍是作者本人写的。

React with .NET Web API – Basic App Tutorial,freeCodeCamp.org 频道