Fetch data using Fetch API in React JS | Part-2 | React Basics

Поделиться
HTML-код
  • Опубликовано: 29 авг 2024
  • In this video, We're going to learn how to use Fetch API in React JS.
    This is Part-2. Visit below link to watch first part.
    Fetch data using Fetch API in React JS | Part-1:
    • Fetch data using Fetch...
    In this video we are going to cover:
    ▶ How to use fetch for POST method
    ▶ How to use fetch for PUT method
    ▶ How to use fetch for DELETE method
    In upcoming videos I'm going to cover lots of concepts of React, so do subscribe if you want to learn more!
    Code of this tutorial can be found here:
    github.com/cod...
    Fetch API (Official Documentation):
    developer.mozi...
    JSON placeholder API:
    jsonplaceholde...
    Like, Sub🥂 & Share! ♥
    Learn More About,
    Conditional Rendering in React JS:
    • Conditional Rendering ...
    Forms in React JS:
    • Form Handling in React...
    Event Handling in React JS:
    • Event Handling in Reac...
    Lifecycle Methods in React JS:
    • Lifecycle Methods in R...
    Props in React:
    • Props in React JS | Re...
    Higher-Order Component (HOC) in React:
    • Higher-Order Component...
    Error Handling in React JS:
    • Error Boundaries in Re...
    Pure Components in React JS:
    • Pure Component in Reac...
    Refs in React:
    • Refs in React JS | Adv...
    Build Weather App in React Using React Hooks:
    • Build a Weather App in...
    Build a Rich text Editor in React
    • Build a Text editor in...
    React Advanced Topic Playlist:
    • React Advanced Concept...
    If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.
    Thank You for watching! 😉
    Where else you can find me:
    𝐓𝐖𝐈𝐓𝐓𝐄𝐑 🐤 : / code_bucks
    𝐄𝐌𝐀𝐈𝐋 📧: codebucks27@gmail.com
    #FetchAPI
    #FetchAPIInReact
    #APIInReact

Комментарии • 20

  • @lisalee7946
    @lisalee7946 5 месяцев назад +1

    best React instructor from RUclips👍👍👍💯Thank you!!

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

      Thanks for your kind words😇

  • @jameshalstead6742
    @jameshalstead6742 2 года назад +1

    Short simple videos, I appreciate how you show the sites that you are providing the tutorial for. I hope you continue to make more. What I was looking for is a video that shows how to use the store and useSelector when I came across the video, I think that would be a great video to do for people if you enjoy doing videos. Good job, thanks for the video

    • @CodeBucks
      @CodeBucks  2 года назад

      Thanks man😄, will do! More videos to come🍻

  • @rajnandani4789
    @rajnandani4789 2 года назад +1

    Thank you sir for short and simple explanation, please make the series of this course

  • @prabhuraj1684
    @prabhuraj1684 2 года назад +1

    Please share more videos like this.

    • @CodeBucks
      @CodeBucks  2 года назад

      Sure I will😇 Let me know if you have any topic in mind🍻

  • @hamzaalmuhesn4250
    @hamzaalmuhesn4250 2 года назад +1

    thanks a lot

  • @rajanandhini4318
    @rajanandhini4318 3 года назад +1

    Can you please share videoe for put and delete also?

    • @CodeBucks
      @CodeBucks  3 года назад +2

      Hey, right now i can't give you video but instead you can try it yourself. have you read the guide of JSONPlaceholder API? here it is: jsonplaceholder.typicode.com/guide/
      It has all the methods.
      This is the put method: 👇
      ------------------------------------------------------------------------------------------------
      fetch('jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      body: JSON.stringify({
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1,
      }),
      headers: {
      'Content-type': 'application/json; charset=UTF-8',
      },
      })
      .then((response) => response.json())
      .then((json) => console.log(json));
      ---> Here you have to pass object you want to update in the body and also in the fetch url make sure there is id of post you want to update.
      ------------------------------------------------------------------------------------------------
      This is the Delete method: 👇
      ------------------------------------------------------------------------------------------------
      fetch('jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE',
      });
      ---> here in the delete method you just have to add post you want to delete in the url like /posts/1 for the 1st post and write DELETE in the method.
      ------------------------------------------------------------------------------------------------
      Ofcourse there is more then just these, You should refer MDN documentation from here:
      developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
      This on is for methods:
      developer.mozilla.org/en-US/docs/Web/HTTP/Methods
      Thanks for watching the video, maybe in future i will upload video about the API.
      If you need any help feel free to reach out again!😉

  • @AshwinKumar-ds5ip
    @AshwinKumar-ds5ip 3 года назад +1

    Can you please mention the code explain the functions for delete and put ?

    • @CodeBucks
      @CodeBucks  3 года назад +1

      Hey, sure I can explain it to you. but have you checked this guide jsonplaceholder.typicode.com/guide/ ? If no then i suggest you to give it a try and still if you can't then feel free to ask me!

  • @DeepakGupta-hj2dv
    @DeepakGupta-hj2dv 3 года назад +1

    Please make on video redux tutorial

    • @CodeBucks
      @CodeBucks  3 года назад +2

      Sure! I will try my best to make series on Redux.

    • @DeepakGupta-hj2dv
      @DeepakGupta-hj2dv 3 года назад

      @@CodeBucks please sir as soon as possible redux tutorial

  • @technicalanalysisinnepali1698
    @technicalanalysisinnepali1698 Год назад

    bro can u please teach how to fetch data using axios in readux toolkit for react js project

    • @CodeBucks
      @CodeBucks  Год назад

      Hey, sure I will create one tutorial for axios in the future. For now if you want to know more about redux and redux toolkit you can find the separate playlist for that in this channel.

    • @technicalanalysisinnepali1698
      @technicalanalysisinnepali1698 Год назад

      @@CodeBucks i have watched all about redux but was wondering if u could upload some 9-10 minutes video on that topic it would be great. i have an emergency that's why i was requesting