No video :(

React + Node js + Express js - CRUD Operations | CRUD Rest API with Node & Express

Подписаться 13 тыс.

Просмотров 107 тыс.

50% 1

Hello guys, in this video we will be building full crud application with the help of Node Express & React. So, initially we will be creating all CRUD rest api with Node & Express then we will integrate those api in our React Web Application.
Join my FB Page :- / kodewithvishal
Follow me on Instagram Account :- / code_withvishal
You can get the source code from here :- ko-fi.com/s/4a... or www.buymeacoff...
Also please subscribe this channel to get more awesome content on React.

Опубликовано:

7 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@codewithvishal2968 2 года назад

You can get the source code from here :- ko-fi.com/s/4ab570d403 or www.buymeacoffee.com/CodeWithVishal/e/43215 Join my FB Page :- facebook.com/KodeWithVishal Follow me on Instagram Account :- instagram.com/code_withvishal/ Also please subscribe this channel to get more awesome content on React.

@maxwong4657 2 года назад

Thanks for this tutorial! Feel free to use the CSS file: .header{ overflow:hidden; background-color: #f1f1f1; } .header p{ float: left; color:black; text-align: center; padding:10px; text-decoration: none; font-size:18px; line-height: 15px; border-radius: 4px; } .header p.logo{ font-size: 25px; font-weight:bold; color: #5c5239; } .header p:hover{ background-color: #ddd; color: #5d6770; } .header p.active{ background-color:#917c46; color: white; } .header-right{ float: right; } @media screen and (max-width: 500px){ .header p{ float: none; display: block; text-align: left; } .header-right{ float:none; } }

@maxwong4657 2 года назад

View.css: .card{ width: 30%; display:flex; flex-direction:column; border-top: 1px solid red; align-content: center; margin: 0 auto } .card-header{ height: 30%; background-color:#5d6770; color: white; text-align: center; } .card-header p{ font-size:20px; } .container{ padding: 4px 16px; } ========================================================================================== AddEdit.css: input[type='text'], input[type='email'], input[type='number'], select{ width: 100%; padding:12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type='submit']{ width: 100%; background-color:#ccac6c; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius:4px; cursor: pointer; } input[type='submit']:hover{ background-color:#45a049; } ========================================================================================== Home.css: .styled-table{ border-collapse:collapse; margin: auto; font-size: 0.9em; font-family: sans-serif; max-width: 800px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) } .styled-table thead tr{ background-color:#327f87; color: #ffffff; text-align: left; } .styled-table thead th, .styled-table td{ padding:12px 15px; } .styled-table tbody tr{ border-bottom:1px solid #dddddd; } .styled-table tbody tr:nth-of-type(even){ background-color:#f3f3f3; } .styled-table tbody tr:last-of-type{ border-bottom:2px solid #009879; } .btn{ border: none; color: white; padding: 5px 8px; text-align: center; text-decoration: none; display: inline-block; border-radius: 5px; font-size: 16px; margin: 4px 2px; cursor: pointer; } .btn-edit{ background-color:#81a135; } .btn-delete{ background-color:#f44336 } .btn-view{ background-color:#9ed9db; color:black; }

@mahdilahmer9675 2 года назад

@@maxwong4657 thank you

@kalixaegus4042 2 года назад

for those having trouble in input on edit form change the value to defaultValue and change the useHistory to useNavigation

@raifaustino 2 года назад

its because of react-router-dom update to v6, right?

@ebrahimghantiwala5048 2 года назад

Even though I did the change but shows missing values.What to do?

@santanu29 Год назад

it's useNavigate().

@Havanese_Haz Год назад

18:21 postman 31:50 frontend 48:44 Home page 59:47 AddEdit page

@aninditapanda4859 6 месяцев назад

the course is very beneficial..thank you

@RealStory__hope 2 года назад

Hi , great tutorial , but make or send that how to connect this for the postman to mysql database for storing data. please sir

@hapz8925 2 года назад

Hi i want to update here on 36.50 Switch is giving error its replace with Routes and also Route attributes are changes component will changes to element now. Thank you :)

@mattw8814 Год назад

Great tutorial so far! 32:30 just marking where i'm at

@MG-xi7jz 2 года назад

Wow 🔥. Can you please add tutorial of Spfx react pnp crud option. Thanks

@pal_source 2 года назад

There is an error on 36:50, so you can remove it by changing code to this :

@codewithvishal2968 2 года назад

Yeah react router got update, so we need to update few things.

@panisaraketsri5882 2 года назад

Im struggling with this problem, thank you so muchhh!

@viigneshreddy3753 2 года назад

Even after giving this code i'm not able to get the result

@kittisakphatchaiphongsa3177 2 года назад

Thx youuuuuuu

@dessianwar9206 2 года назад

very helpfull thanks!

@elsompg Год назад

Hi! I cannot fill the input form in Add page. Cannot write data into the fields. (name, email, contact.) What is the problem?

@aayushnag9593 2 года назад

26:10 1:13:46 Delete Request 25:03 Delete Request

@nguyentienuc8219 Год назад

thank you bro

@TalonNight 2 года назад

Hey Vishal, I was looking at your video and I had a question to ask you about it. Lets say I have collection a and collection b, collection a has a foreign key that belongs to collection b. If I wanted to output the results from collection b based on the foreign key chosen, how would I do this?

@ayushverma1366 2 года назад

1:26:56 why using && . Can you explain?

@santanu29 Год назад

validation not working. It always says input is empty even when I add all the inputs. The records dont add to the table

@rekhak3862 2 года назад

In postman where i can add and delete user data. But not performing react code

@maximillionandrew8082 2 года назад

Bro after 27:10 how were you able to delete a user..You simply filtered the user and did not write anything to remove the user...then how did the array went empty after that...you filtered in a way that if the id does not match the params id then res.send (user deleted)...how did this delete a user...does that DELETE request in crud basically delete user by default or we need to write some code to delete it.. Iam new to programming..expecting an explaination bro

@kalixaegus4042 2 года назад

why cant i submit or add the form it always says the error to provide the each input even though i did not leave it blank

@kirana.g581 Год назад

same to me . is there anyone got the solution for it.

@kalixaegus4042 2 года назад

Can you do that tutorial again but use mongodb for your db i love your videos and I love and need to see that mongodb for mern

@kalixaegus4042 2 года назад

Why my code doesnt show when i put the toast container inside but when i take it off it shows

@naveenmanikanta9464 Год назад

if i click edit button form was open but default values not visible

@kalixaegus4042 2 года назад

bro why when i click the edit button it always show the delete successfully on the screen even though i want to edit it

@rekhak3862 2 года назад

Hi Vishal I have written the code as per your explanation. But unable to perform CRUD operation. Please help me And i m getting this error in terminal FATAL ERROR: invalid table size Allocation failed - JavaScript heap out of memory