In this video we are going to learn about How to setup the JSON-server for our fake APIs and use React Axios package to perform HTTP Requests in react. We will follow the RESTful API convention (GET, POST, PUT, DELETE) and see how easily we do CREATE, READ, UPDATE and DELETE operations on our contacts resource.
We will learn about how to send data to server and get the response back from server. We will see how we update our React state with the data received from server and render our UI with updated data.
***Checkout pre-requites videos in case you have missed ***
How to Learn React JS ? - https://youtu.be/06yVj8pcO5c
React JS Fundamentals Project for Beginners - https://youtu.be/QoJGKwo20is
Learn React Router With Project - https://youtu.be/kMBjhiGYoLY
🔥 Video contents… ENJOY 👇
0:00:00 - Intro
0:00:20 - What we want to build ?
0:02:00 - Setting up JSON-SERVER
0:03:34 - Understand Rest API convention
0:04:00 - Create Contacts Resource
0:05:50 - Start JSON-SERVER
0:06:45 - Install AXIOS package
0:08:15 - Fetch All Contacts (READ)
0:11:52 - Add new Contact (CREATE)
0:15:07 - Delete a Contact (DELETE)
0:16:25 - Create an Edit component
0:22:03 - Edit Contact (UPDATE)
0:25:18 - Testing CRUD operations
0:26:12 - Outro
Checkout these video to understand better
Learn JSON in 25 Minutes - https://youtu.be/6OhMbf2v_jI
JavaScript this Keyword - https://youtu.be/S2pBGSeUFCk
JavaScript ES6 Arrow Functions - https://youtu.be/TgzVxiPdCDU
JavaScript Higher Order Functions & Arrays Methods - https://youtu.be/m2_kagsc3_c
JavaScript ES6 Destructuring - https://youtu.be/rpYg2M2lNAE
Github link for Reference
https://github.com/dmalvia/React_Tutorial_Contact_Manager_App/archive/react-crud-axios.zip
More videos
Asynchronous Vs Synchronous Programming - https://youtu.be/oesicy3CcXE
Async JavaScript Callback - https://youtu.be/1zeuvEvw5uw
Async JavaScript Promises Tutorial - https://youtu.be/JvV4Rz2PpzA
https://youtu.be/59z1_3-vTOk
#react #javascript #json