Learn React JS and .NET Core API by Creating a Full Stack Web App from Scratch

Related Tutorials:
--------------------
React JS + Python Django + SQLite full-stack app
--------------------
React JS + .NET Core Web API + Microsoft SQL full stack app
--------------------
.NET Core API + Vue JS + Microsoft SQL full-stack web app
--------------------
ASP .NET Core Web API + Microsoft SQL CRUD APIs
--------------------
ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
--------------------
.NET Core Web API + PostgreSQL | CRUD APIs
--------------------
.Net Core Web API + MongoDB CRUD APIs
--------------------
Python Django + SQLite | REST APIs
--------------------
Python Django + PostgreSQL | REST API Tutorial
--------------------
Python Django + MySQL CRUD API Tutorial
--------------------
Python Django + MongoDB CRUD API Tutorial
--------------------
Python Django + Microsoft SQL Server CRUD API Tutorial
--------------------
Welcome to this course on Fullstack web development using React JS for front end, dot net core API for backend and
microsoft SQL server for the database.
You will learn how to add navigation menu with routing in react, display data in bootstrap table, add modal pop up window with
dropdowns and date pickers. Also learn how to upload photo and store it in the backend server.

[someguy]

These two comments made it work for me:

1. In App.js i had to use: element={<Home />} instead of component={Home}. just for anyone in the future trying to work it out. I also had to change Switch to Routes and replace Switch for Routes in the import:

import {BrowserRouter, Route, Routes} from 'react-router-dom';

<Routes>
<Route path='/' element={<Home />} exact/>
<Route path='/department' element={<Department />}/>

<Route path='/employee' element={<Employee />}/>
</Routes>


2. At 47:25, for people who couldnt see the data for the department table, try moving the .env file out of src folder and then put it in the root folder(where readme file is present).
Also change the REACT_APP_API address from 53535 to 5000. After finishing this, do a npm start once again

[CodeYourselfToDeath]

NOTE!! For anybody that is having trouble accessing the data at 47:23. Make sure that you are RUNNING the C# application in the background. It should solve you problem if you followed all the other steps properly. Cheers

[lakshmeeshashetty]

At 47:25, for people who couldnt see the data for the department table, try moving the .env file out of src folder and then put it in the root folder(where readme file is present). Also change the REACT_APP_API address from 53535 to 5000. After finishing this, do a npm start once again

[randZomG]

Front end section starts at 36:46 for anyone in the same boat as me :)

[Drifts]

at 43:20 we define the navigation, in the latest version of react-router-dom "Switch" is replaced with "Routes", hope this is helpful with anyone doing this project in late 2022
edit:
additionally, "component" prop inside "Route" needs to be replaced with "element" and "{Home}" with "{<Home />}"

[princetonnelson]

I got to come to your videos more often everything else on youtube taking all day . Thanks

[abouttimebrewing]

At 50:30 I got an error object Object. I removed the line from stringify that assigned the DepartmentID = null and then it worked.

[IchBinJager]

It seems this is a dated tutorial, with .NET 6 there is no more startup.cs, what would need to change in this tutorial to stay relevant?

[danielvelkov]

This is great but why don't you use ef core for manipulation of the database. It takes away writing those dynamic quarries which are often a subject of SQL injection attacks

[Sharper]

Hey there, fellow music producer, who is also into software development haha! Amazing tutorial, thanks!

[harryd]

At 43.32 i had to use: element={<Home />} instead of component={Home}. just for anyone in the future trying to work it out. I also had to change Switch to Routes and replace Switch for Routes in the import

[FlawdFragment]

Tutorial does not work with latest Visual Studio version. For .NET 6 Microsoft removed project type in this tutorial as well as removed the startup.cs file used in this tutorial.

[tongguo]

componentDidUpdate(){
this.refreshList();
}
causes App keeping to fetch from the API in React 17. is this a React 17 bug?

[LionetChen]

At 43:27, use element={<Home />} instead of component={Home} if you're using react-router-dom v6

[toybuck]

having problem in 50:37 alert message is Object object n cant add DepartmentName

[lassett]

I've tested everything with Postman and got no errors, yet I can't get the data to show up like at 47:23. My .env file is outside of folder src and my localhost API is set to 5000, what could be the issue?

[vishansirohi]

thanks bro so much I was able to make this project only because of you .I had to show it to my company .

[PabloRamirez-ricg]

At 43:41, if you are using react-router-dom v6 it looks like Switch has been replaced with Routes

[arlindaliu]

Everything works fine but i can't add Employes or Department. Does anyone has this problem?

[nartinjo]

I'm stuck at 23:53 because postman cannot find my api, i triple checked every name but i don't know how to connect to my table, anyone else?