React with .NET Web API – Basic App Tutorial

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.

✏️ Gavin Lon created this tutorial. Check out his channel: @GavinLon

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:54) Project Creation
⌨️ (0:05:47) Create the Server-side .NET Web API Code in C#
⌨️ (0:13:38) Create 'RankItems' React Component
⌨️ (0:20:11) Create Navigation Functionality
⌨️ (0:27:13) Write Code to Import Movie Images
⌨️ (0:31:31) Write Code to Display Movie Images
⌨️ (0:37:32) Write Code for 'RankingGrid' React Component
⌨️ (0:52:21) Write Code for Drag and Drop Functionality
⌨️ (1:15:26) Write Code for Ranking Albums
⌨️ (1:36:20) Write Code for Initialising Ranking Items (Reload Button)

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

[GavinLon]

I created this video to demonstrate a simple way to create a basic application that uses React for the frontend user interaction functionality and leverages a .NET Web API component that runs on .NET 6 on the server side. I hope you enjoy this video and benefit from it. A special thank you to FreeCodeCamp for sharing this video.

[jaycanale]

I cannot find this template in my VS2022 version 17.8.4. Anyone know how I can obtain it?

[Koden]

Just a heads up, the source code is pointing to local SSL_CRT_FILE and SSL_KEY_FILE, so you need to change this when running it else it won't load. You, the user, will need to go in and change it to the directory of yours, odds are it's just changing the user ID.

[DMC]

Awesome!! This is exactly what I was looking for.
Thanks a lot!
Please more content like this.

[esnatzea]

The Star Trek transition was awesome. Loved it.

[felixkimutai]

Gavin Lon has been my teacher for the last 1 year and I must say I have learned a lot. Thanks Gavin and FreeCodeCamp

[mattmjlg]

Wow so simple and short instead of over fluffed

[The_Ethical_Slacker]

By and large this is a useful example, but be careful if you follow the vid too literally, because things appear in his code without explanation. For example, the "export default" statement at the bottom of RankItems. One minute it isn't there, the next it is. We don't see it being typed, nor is there any commentary to explain it.

[twismfamily]

I'm using VS 2022 Community Edition and I don't have the same folders. I don't have the AppRoutes.js file in version 6. Was it moved or removed on an update?

[mattmjlg]

Y’all teach me more than my Software degree! Thanks code camp

[WoodyDataAI]

Thank you Gavin, it is super great tutorials. so fabulous !

[Ironlionmn]

Good course, cant help but feel that the local storage portion of the course should have been more focused on working with the backend. Felt more like a React course with a pinch of .NET

[nightwingx]

If anyone else gets stuck on Drop functionality not working, make sure you add
.rank-cell, .row-label {
width: 80px;
text-align: center;
display: flex;
align-items: center;
}

to your custom.css file or else it won't work!

[ammarmangala]

i've been praying for this! thank god my prayers have been answered.

[nnasim]

I ahve been looking fot videos like this too thanks man

[cseWorld]

This template is not found in my VS2022 version 17.9.1. How can i find it?

[STYV]

Just wondering how to deploy this kind of project to azure? I tried to do it, but the page shows 500 internal error after deployment. Thanks

[jetreject]

great tutorial overall, but... who uses var in javascript in 2023?

[dieentdeckung]

Great video! Only a few weird hiccups to get it launched & I plan on taking this project further from here! Curious why the drag/drop methods are using .substring(5) to get the moveIDs. Could anyone more knowledgeable maybe explain the practice here?

[RebeccaPeltz]

Very helpful. I get a missing key error on the RankingGrid. I've tried a few ways to fix but not successful. Any suggestions?