React with .NET Web API - Basic App Tutorial

[@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.

[@robertoart5056]

This is not a simple way. why didn't use a string for the image, instead you used an id to grab images in an array then your using the image id to find an image, which if you have huge list of movies & album that will cause a memory leak. If your teaching people how to do it, then show them a simpler way so they understand.

[@jaycanale4026]

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

[@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.

[@brianhathaway9580]

Yep, got an error on that too. No export

[@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.

[@felixkimutai8478]

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

[@nightwing09x]

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!

[@asntube]

I spent ages trying to work this out! Thank you! 🙂

[@steve-ml2sv]

Solved Finally, Thanks for your help! 😃

[@chrisr2063]

i am befuddled as to why this was the reason and how this dude left it out.

[@theneonlotus]

You are my hero! Thank you!!

[@Antonio63312]

needed this! Thank you

[@mattmjlg5053]

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

[@NguyenNam-ne8fk]

u sleeping at school?

[@mattmjlg5053]

@@NguyenNam-ne8fk no brother! What I mean is you get a lot of more generalized info that you can read on google, and not as much applicable specific info that you might need in the industry

[@Anubis2828]

Yea they only teach you about 5% of what you need in school

[@esnatzea]

The Star Trek transition was awesome. Loved 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?

[@Ironlionm4n]

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

[@mattmjlg5053]

Wow so simple and short instead of over fluffed

[@ammarmangala9814]

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

[@DjangoBruh]

This course would've been perfect if there was a db portion instead of hardcoding the objects like that, still a great course tho

[@jetreject4719]

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

[@cseWorld]

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

[@ariansergi7929]

have you got any solution? i have the same problem

[@GavinLon]

Hi. 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 - learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022 In this 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.

[@DMC3586]

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

[@9263STYV]

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

[@lyafe1272]

FrontEnd Port: 44423 BackEnd Port: 7070 Also need to change export class d to export class Home in Home.js

[@lyafe1272]

fetch is hitting the frontend port instead of backend port, and I am not getting data in frontend port. I added localhost + port number in fetch, I am getting another error now.

[@mattpickel223]

This tutorial has been very frustrating for me. There a lot of differences in the templates, etc from when this was made (and he is still using class components??? not seeing those in ANY other current tutorials) and a bunch of the proxy stuff is different. It is a nightmare right now to figure out this proxy stuff to get my new Item endpoints to hit. They hitting in postman but defaulting to vite dev server in client. Additionally, the pacing and everything could be improved. A bunch of just dead silence intermittently.

[@nnasim5089]

I ahve been looking fot videos like this too thanks man

[@AM180x]

Hello I am on Linux, do you have setup instructions for Linux as it doesn't have Visual Studio 2022 available and only has VSCode?

[@varunaggarwal7126]

vscode

[@WoodyDataAI]

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

[@user-ks9jj5tj8x]

Does anyone can explain to me how the "item" reference in proxy.js file worked ?

[@nicobost1950]

i have the same question... it's not working for me and i wonder why

[@mahendranath2504]

Thank you so much 🎉❤🤝👏👍🤘🏻✌️🫰🏻🙏🏻😍

[@user-ot4zl1ii2z]

how to use this with typescript? Should I install it using npm?

[@daniborisov5957]

Thank you very much!

[@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?

[@Mikael_Puusaari]

transferData.getData takes the id of the element, since it is in the drop function, when u drop in the rankingGrid it takes part of the id of the element starting from index 5, which is the number in the id (the id of the divs in the rankingGrid is something like "rank-4")

[@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?

[@ehsanafzal1589]

Its goings to be very interesting tutorial

[@pronavsandhu]

great, a quick explaination of sql server data would have been great

[@gds1233]

Exactly what I needed.

[@ImadEz-zahi]

Amazing 👏

[@kyong444]

Haha, I like that green screen!

[@charlesdtrader8825]

More of this please.... finally

[@zanhbenz]

Do you know how can apply with NextJS?

[@spazn]

(Solved) Does anyone else have an issue with refreshing the rank-items route? Everything works but if I refresh on the rank-items route, I get http 404 error, but I can refresh on the fetch-data, counter, and home route just fine.

[@techz1511]

how did you solve this

[@spazn]

@@techz1511 I'm away on vacation ATM so i don't have it in front of me, but it had to do with changing the router that was wrapping the ,, with BrowserRouter I believe.

[@JohnnysCoolStuff]

When it launches a browser instance, javascript is disabled.

[@mrgippy123]

It's about 90% React and 10% .NET Web API. Its still a good tutorial though.

[@sikoy4518]

Thank you so much

[@gerrardxcc]

why not stop using var in react ?

[@kwhandy]

his background looks realistic, the sounds too. I wonder what kind of screencast software he use(?)

[@techz1511]

I have a problem with loading the movies titles, any idea where i went wrong? I got to around 25th minute of the video

[@pratap4147]

Awesome thank you very much 😊

[@minhduc8a21]

"Green screen" means a lot of things to me 😂

[@varunaggarwal7126]

I used typescript with redux, it worked better than this spa server.

[@bkcy18]

Can this be published to iis in the conventional way by creating a new site?

[@SayWhaaaaaaaaaaaaaaaaaaaaaaat]

NOT REAL DEVELOPER..USES BRIGHT THEME IN EDITOR.... ! :)

[@aniskadri140]

Merci

[@nicobost1950]

More like "Mercy"

[@varunaggarwal7126]

This tutorial is not good(sry), you have not explained spa server, how dotnet middleware is interacting with react for routing etc, this is important even though you want to keep the time short, moreover that drop logic and lists of array you have added you have not explained it clearly, you seem like backend developer who only dwelled in some frontend.

[@clarkflavor]

[@nb664rbk]

the intro 💀💀💀💀

[@RickSteadX]

wasted my time 👎👎

[@DevEmpower]

Hi. How we can be a member of freeCodeCamp and make tutorials?

[@samuelallieu]

I'm lost......hahahaaa funny me

[@kimle9554]

like 1

[@vella166]

Chatgpt demotivating me to learn web or app devs at higher level😟😟

[@bonk2935]

good

[@risechess7114]

this is not professional work because u have to clean up the code before u start and why is that, i tell u when because i dont have proxy.js and when i start new project with .netcore and react i dont have the same front end as u . so if u are professional u have to clean the code so all starters whatever the version can apply as u did, so this video is just for first 3 month. and then its complete lost

[@mswalsh68]

in .Net8.. its 2 folders for the project, a server and client, not 1 like shown here, but the proxy is found in the vite.config.js file on the client side this is all you have to do... scroll down and find where the weather proxy is.. and just add a new object to the proxy like I did here. server: { proxy: { '^/weatherforecast': { target, secure: false }, '^/item': { target, secure: false } },

[@bazz6932]

First Comment

[@thejezzi5219]

Really I feel so dumb. Even someone who lives in a forest is programming way better than me. EDIT: And he even has a pet dinosaur. What am I doing with my life 🤷‍♂

[@isaacjon]

Why's his vs code so ugly

[@isaacjon]

Soo light

[@patrickminega120]

It's not vs code

[@engineeringvision9507]

He's in a rainforest 😝😝😝

[@prabhjotarora2740]

It's not vs code,its just vs! Vs is an IDE and vscode is an light weight editor!

[@isaacjon]

@@prabhjotarora2740 so what's the pros of this compared to vs code?

[@chuck_norris]

js is bloatware by design.

[@thejezzi5219]

It is so weird to read your name first and then the joke.

[@lawliet2263]

What is this

[@thejezzi5219]

You call it a video. Young folks invented it but I dont think it's gonna trend for long.