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.
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.
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.
@@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
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.
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
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!
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?
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.
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.
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.
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?
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")
(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 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.
20 minutes in and i've never been more confused, The files are different what he is working on, and Dead Silence in between and no concept of what he's writing in the code
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.
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
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 } },
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 🤷♂
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.
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.
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.
Y’all teach me more than my Software degree! Thanks code camp
u sleeping at school?
@@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
Yea they only teach you about 5% of what you need in school
The Star Trek transition was awesome. Loved it.
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.
Yep, got an error on that too. No export
Gavin Lon has been my teacher for the last 1 year and I must say I have learned a lot. Thanks Gavin and FreeCodeCamp
I cannot find this template in my VS2022 version 17.8.4. Anyone know how I can obtain it?
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
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!
I spent ages trying to work this out! Thank you! 🙂
Solved Finally, Thanks for your help! 😃
i am befuddled as to why this was the reason and how this dude left it out.
You are my hero! Thank you!!
needed this! Thank you
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?
Wow so simple and short instead of over fluffed
i've been praying for this! thank god my prayers have been answered.
This course would've been perfect if there was a db portion instead of hardcoding the objects like that, still a great course tho
great tutorial overall, but... who uses var in javascript in 2023?
Awesome!! This is exactly what I was looking for.
Thanks a lot!
Please more content like this.
I ahve been looking fot videos like this too thanks man
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.
This template is not found in my VS2022 version 17.9.1. How can i find it?
have you got any solution? i have the same problem
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.
Thank you Gavin, it is super great tutorials. so fabulous !
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
how to use this with typescript? Should I install it using npm?
Thank you so much 🎉❤🤝👏👍🤘🏻✌️🫰🏻🙏🏻😍
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?
vscode
Very helpful. I get a missing key error on the RankingGrid. I've tried a few ways to fix but not successful. Any suggestions?
FrontEnd Port: 44423
BackEnd Port: 7070
Also need to change export class d to export class Home in Home.js
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.
Amazing 👏
great, a quick explaination of sql server data would have been great
Thank you very much!
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?
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")
Do you know how can apply with NextJS?
Its goings to be very interesting tutorial
Haha, I like that green screen!
his background looks realistic, the sounds too. I wonder what kind of screencast software he use(?)
Does anyone can explain to me how the "item" reference in proxy.js file worked ?
i have the same question... it's not working for me and i wonder why
Exactly what I needed.
When it launches a browser instance, javascript is disabled.
More of this please.... finally
Can this be published to iis in the conventional way by creating a new site?
why not stop using var in react ?
(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.
how did you solve this
@@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.
Thank you so much
Awesome thank you very much 😊
Merci
More like "Mercy"
20 minutes in and i've never been more confused, The files are different what he is working on, and Dead Silence in between and no concept of what he's writing in the code
I have a problem with loading the movies titles, any idea where i went wrong? I got to around 25th minute of the video
It's about 90% React and 10% .NET Web API. Its still a good tutorial though.
"Green screen" means a lot of things to me 😂
wasted my time 👎👎
I used typescript with redux, it worked better than this spa server.
NOT REAL DEVELOPER..USES BRIGHT THEME IN EDITOR.... ! :)
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.
the intro 💀💀💀💀
Hi. How we can be a member of freeCodeCamp and make tutorials?
I'm lost......hahahaaa funny me
like 1
Chatgpt demotivating me to learn web or app devs at higher level😟😟
good
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
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
}
},
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 🤷♂
First Comment
Why's his vs code so ugly
Soo light
It's not vs code
He's in a rainforest 😝😝😝
It's not vs code,its just vs!
Vs is an IDE and vscode is an light weight editor!
@@prabhjotarora2740 so what's the pros of this compared to vs code?
js is bloatware by design.
It is so weird to read your name first and then the joke.
What is this
You call it a video. Young folks invented it but I dont think it's gonna trend for long.