Full React Tutorial #29 - Making a POST Request

Подписаться 1,6 млн

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

50% 1

🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

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

15 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@maskman4821 3 года назад

It is a good lesson to review post api, and learn how to do if condition render in reactjs, it is pretty similiar to vuejs, in vue we use directive 'v-if="state"' to switch between elements; in reactjs we use condition render 'state && element' , vue and react are basically the same except the syntax, so it is good to compare these two popular frameworks, I highy recommend Shaun's vuejs udemy course, you can learn both at the same time !!!

@ZTF666 3 года назад

indeed , coming from vue/nuxt after 2 years of use , i was afraid react would be bad or hard in its syntax but so far so good , i could easily pick it up

@SebastianHornbaek 3 года назад

It is nice to get a new video every other day, so you are forced to let the things you learn "sink in" before you go on to the next chapter! Thanks a lot Shaun!

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

Amazing as always shaun!! I gotta say that I had a bug and I really wanted to cry when I figured it out... When you're doing the fetch request, I typed 'header' without S, then spent 2 hours reading the documentation to figure that out hahahahaha oh well.. at least that bug, never again (hopefully hahaha)

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

I had the same bug. your comment saved me a lot of time. thank you

@yapjunchengmoe3162 8 месяцев назад

thank youuuuuuuu for your information

@rajmehta7114 3 года назад

Keep posting the good stuff. Thank you for such a nice tutorial on react

@tehtriangle6660 3 года назад

I'd use a ternary operator for the different loading buttons, as I think it's cleaner than having two { } blocks.

@KingstonFortune Год назад

this is true, infact I had to implement it this way

@davidjackson148 3 года назад

How about file upload? Love these, short and precise, and doesn't overload you.

@danyanderson9460 Год назад

Hello Ninja. This is surely the best course someone could ever have as a hands-on course in reactjs the project is so complete and touches so many different aspects of the framework. I'm really thankful. Please I wish I could have insights on how to modify the useFetch custom hook so that it handles post requests too

@marie-elizeventer7080 2 года назад

Thanks again for very short, to the point instructions Shaun!

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

so if you click 'add blog' button, it automatically recognize it as 'submit' button? I don't get how distinguish the button's function as 'submit'

@nakulankurmullam2982 3 года назад

I just visited your github link and realized that you are a musician woah amazing dude

@nkpvg6805 3 года назад

Yay!! Finally Another Epic Video As Alwaysssss I am also following the tutorials with you

@kristofferjohansson3768 3 года назад

Great tutorial as usual, but I miss one operation, that you also skipped in the node.js crash course: UPDATE :) Update with pre-populated form too. It would be great if you add that in the end, because you stated earlier that update is out of the scope in this tutorial too. Please please add Update too. .

@learnsimple4592 3 года назад

If my estimates are correct, the first videos of the next.js will be released next Monday 🚀. Please tell me whether you will be doing a electron course, by the way, thanks for the awesome content.

@NetNinja 3 года назад

Your estimates are correct :). Electron will come at some point, but I have other things to cover first!

@learnsimple4592 3 года назад

@@NetNinja thanks

@maskman4821 3 года назад

looking forward to nextjs tutorials !!!

@mex5341 3 года назад

one problem : i can't see new added post in main blog.... it is added to JSON file on a server and post has been created ( you can see all css ) but with no data , they are empty...

@martinabrzica3994 3 года назад

I have same problem... Have you solved it?

@mex5341 3 года назад

@@martinabrzica3994 yep, but don't remember how

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

I had the same issue. After some research I narrowed down the problem to this line, make sure you don't mistype it: headers: { 'Content-Type': 'application/json' } I typed "header" instead of "headers"..

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

@@posfail Thank you!

@maskman4821 3 года назад

summary ~implement post request with fetch api we learned how to implement post request with fetch api when user click add post button

@user-gq3iy1ef8i Год назад

Thanks for the awesome videos! Super helpful and very concise. Just what I was looking for!

@RahulShinde 3 года назад

Hi @netNinja, I am following every React Tutorial from the past. First thankful to you for keeping me upgraded. I have noticed while post-action you might have missed adding unique ID using UUID or any other link Math.random(). I am really thankful to you for such great work. Love from India

@visnick8302 3 года назад

If I'm not mistaken he said that JSON-server adds a unique id for you.

@RahulShinde 3 года назад

@@visnick8302 thanks for correcting me. Might I have been missed that :)

@STUPIDYOUTUBE_HIDINGMSGS 3 года назад

Amazing, just amazing, you are amazing Shaun, keep at it! cheers

@krollhr2597 3 года назад

Hi Shaun, i am just wondering if we want to add images to this blog post , what will the best option s3 or anything else? Are you going to cover that sometime in this series?

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

wow i was about to ask the same question i tried adding an image but didnt work

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

Very clean and nice. I enjoy it from here. Thanks

@LG-bb5zq 10 месяцев назад

Im using the codeium extension and its literally completing the code word for word almost. Defintely trained on your repos

@alexciotor 3 года назад

Quick question, how would the request look like if the api had a nested field. say author would look like this: author:[ { "firstname":"John", 'lastname':"Smith" }, { "number_of_books":"5", "best_sellers":"3" } ] Can't seem to find any answers regarding nested post Request anywhere. Thanks

@Baz4antify 3 года назад

same problem! Any answers?

@Baz4antify 3 года назад

Okey, found the root of the problem- probably you're trying to dispaly just plain 'blog' without getting it into JSON.stringify for console.log. When you will switch to network=>detail=>Request Payload and set to 'view source' you'll see that it's okay and problem can be in typo (like mine)

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

My dude...You just saved me hours. Thank you.

@sanan4li 3 года назад

Hi shaun, thanks a lot for refreshing this course.. Please consider react with firebase course too. Its outdated now.

@Aergaia 3 года назад

This doesn't make sense? Why would he consider it if it's outdated? Or did you mean something else?

@srikarksv1317 3 года назад

@@Aergaia I believe he is talking about the old videos by Shaun on React with Firebase.

@Aergaia 3 года назад

@@srikarksv1317 Ahh I see. I agree in that case. Shaun is the best teacher on this platform!

@sanan4li 3 года назад

@@Aergaia I was talking about the course.. this is why i wrote "react with firebase course".

@Saradomin65 3 года назад

I'm still waiting for this, also for React + Redux too.

@ritzmillan7033 11 месяцев назад

Very simple and nice explaination. Thanks 👍

@ameensayed6514 3 года назад

Thanks! Great Explanation. please implement Update Request with pre-populated form too.

@anlbozkus4629 Год назад

{isPending ? Adding Blog.. : Add Blog} Also you can use that syntax to make it only one line :)

@mj2758 Год назад

or you can use this const buttonState = isPending ? "Pending..." : "Add Blog"; {buttonState} and add a setTimeout method inside then( to delay isPending(false)

@sanyam1845 3 года назад

Thanks for the amazing series.😊 Why do you create an arrow function every time (this time in context to the .then)? What's wrong with getting the event e?

@abubakarmahmood4440 3 года назад

Guy, u are superb! keep it up, what a great job weldon.

@matthewmarsh6736 3 года назад

Great Lesson but the course file for this lesson on GitHub is missing or is not updated. Could you please update it?

@maralnajafi Год назад

Thank you so much!! to the point and short!

@NetNinja Год назад

Thanks Maral!

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

Can I ask why we are not using asnyc/await for the fetch POST request? Is it because we use .then() ? If I use .then() I don't need to wrap the whole function in async / await + try / catch? Thanks

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

Best content regarding react ever.

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

Thanks Christopher :)

@christianjamesguevarra6257 5 месяцев назад

How do we cancel the request using the abort controller when the post form component unmounts just as with the posts list page?

@candle-likeghost9523 3 года назад

tenary operator is good too {isPending?Adding Blog...:Add Blog}

@chrisb9360 Год назад

Much neater!

@Nayem97 Год назад

awesome learned so much from this video

@Sohanjs 8 месяцев назад

Did some get his error as well? Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received I even tried using catch

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

Hi. It may be old. When the request hits my API (public JsonResult Post([FromBody] UserModel model)), I get all the results empty. Any idea how can I proceed? Thank you so much for this tuto. Very simple and efficient!

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

See my post above .. use headers instead of header

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

Thank you! Amazing content.

@franciscojpneto Год назад

Really cool video, thank you!

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

Thank you for such a nice tutorial on react

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

You're very welcome!

@proyas21 3 года назад

Hey Shaun, seems like there's a problem in the github file from lesson-29. Can you check it please? Love your tutorials btw.

@nurazyan1103 9 месяцев назад

hii i want to ask, how did you display the request body post api from create page to that home page ? what api do you call ?

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

can anyone help please? when I create a new blog I can't see the blog detail I only see "written by" . Im using react v6. Thank you.

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

Found the problem thanks to a post below ... I spelled "header" instead of "headers". I have changed my code to "headers" and it works Sometimes, I wish the language will throw an error when you use a property that doesn't exist (or is it a verbose mode ?)

@saadmalaeb8372 3 года назад

Good morning gang :)

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

Thank you, great tutorial)

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

Thanks for watching Peter

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

thank you very much for your help :P

@khanhcao727 3 года назад

Great. Thank so much!!!

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

question: how you will add multiple blog to json object first and then to api

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

Hey Shaun can u pls make a vid on how to add images with an input type form in a react js page

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

when implementing the post request, how does the JSON file get the id without sending it with blog object?

@SuperMBARutgers2013 Год назад

How come you didn't need to use await on the useFetch?

@saeidex 3 месяца назад

uses then() method here, it returns promises

@iitian2034 10 месяцев назад

thanks bro

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

great video man

@lykiamusic Год назад

great video. one question. my post request returns data that i want to store in state, how do I do that?

@muhammadahmedjaved7691 3 года назад

Shaun please make a series on Next.js

@michal3833 3 года назад

Hi Net Ninja, thank you for the amazing videos! I have a question please, is it possible to return the id of the new blog when it's created?

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

Good afternoon! Really helpfull video, but i have a question about, i want to save all the data to a database like node.js, i am fresh in coding so please i need your help, thanks a lot

@marek19922209 8 месяцев назад

is it not better to use Axios here ?

@erickbroos7233 3 года назад

i am ready for de next video !

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

Maybe it's because I'm kind of new to it , but for such a blog to be practical shouldn't it be connected to a database and if the example is not making a connection to a database this pure react example is theoretical and not really useful ? Can someone please explain ?

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

This is a beginner series that's why he used json file server.

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

almost done

@staplepin8099 3 года назад

Net ninjaaa 😍😍😍.. I’m a fan Boi ..

@GabrielMartinez-ez9ue 3 года назад

{loading ? ( Loading... ) : ( Add Blog )}

@EnglishRain Год назад

I wonder why you didn't get CORS error

@akhribabderahmane2405 Год назад

when i adden a new blog and return to home i can't see the title and the author cz of the key ={blog.id} and at first we didnt have an id

@BizzaroBrainBoi 10 месяцев назад

make sure it is "headers" with an S and not "header".

@mustaphaet-tanti135 3 года назад

one day i will donate for you " THE NET NINJA "

@jesseogola4590 Год назад

how about handling cors origin errors

@ridl27 3 года назад

@salahalhashmi6528 3 года назад

thanks

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

If I want to call a php method, how can I do that?

@braddey8918 3 года назад

Next I'm waiting for complete mern stack project 😃😃

@Maybehassanawad 3 года назад

I wish

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

you're the man

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

could someone explain me how the id added by itself and incremented by itself?, i didnt get it

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

i mean, i kinda get it but not how it works, just know that json-server do it automatically in some way if i add the "id" value to the "blog" object and also json-server will increment it in some way