React with .NET Web API - Let's Build a Basic App
In this video we write 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.
***Please Note****
Below is a helpful note for anyone having problems with finding the project template used in this video course.
Before you start you must make sure that you have installed the ASP.NET and web development workload. You can use the React and ASP .NET core project template as described in this Microsoft Learn document - https://learn.microsoft.com/en-us/vis...
In the Microsoft Learn document it describes how to get started with the "React and ASP.NET Core" project template. A difference between the project template that I used in this video course and the one discussed in the Microsoft Learn article is that the client React code and the Asp.NET Core code are separated into two projects within the same solution. I just tried this template and everything works out of the box. I hope this helps.
🕐 Video Time Indexes
-----------------------------------------
00:00:00 - Introduction
00:01:40 - Project Creation
00:05:33 - Create the Server-side .NET Web API Code in C#
00:13:24 - Create 'RankItems' React Component
00:19:57 - Create Navigation Functionality
00:26:59 - Write Code to Import Movie Images
00:31:17 - Write Code to Display Movie Images
00:37:18 - Write Code for 'RankingGrid' React Component
00:52:07 - Write Code for Drag and Drop Functionality
01:15:12 - Write Code for Ranking Albums
01:36:06 - Write Code for Initialising Ranking Items (Reload Button)
⚙️Code
🔗 https://github.com/GavinLonDigital/Ra...
Prerequisites
---------------------
Download Visual Studio 2022 Community Edition
🔗https://visualstudio.microsoft.com/fr...
Install Nodejs
https://nodejs.org/en/
React for Beginners Project Based Course - Full Free Course - FreeCodeCamp.org
----------------------------------------------------------------------------------------------------------------------------------
🔗 Course video: • React JavaScript Framework for Beginn...
Instructors
🔗 John Smilga Youtube Channel: / codingaddict
🔗 Sanjeev Thiyagarajan Youtube Channel: / sanjeevthiyagarajan
*********Brilliant**********
The first 200 people to sign up for an Annual Subscription
using the link below will get 20% off
🔗 https://brilliant.sjv.io/ZdYgBz
Support the Channel 👍
------------------------------------
Buy me a Coffee ☕️
🔗 https://www.buymeacoffee.com/GavinLon
PayPal
🔗 https://www.paypal.com/paypalme/GavinLon
🪙 BitCoin
12JZYMiRq5YRDN5R5zuyYt7jMN8eTpkgns
Free Courses and Educational Videos - Gavin Lon
-------------------------------------------------------------------------------
Blazor (Webassembly) Shopping Cart Application full playlist
🔗 • Blazor (WebAssembly) and Web API on ....
Full playlist - Let's Build an ASP .NET Core MVC Web Application on .Net 5
🔗 • Part 1 - Overview - Let's Build an AS...
Full playlist - Advanced C# Course
🔗 • Introduction - Advanced C# Tutorial (...
Full playlist - C# for Beginners Course
🔗 • C# for Beginners - Part 1 - Introduct...
.NET Playlist
🔗 • .NET Framework and .NET Core
🎶All Music in this Video was Created by Gavin Lon