I have been using $ jQuery in my hybrid app for making ajax calls. Now I am creating a single page app, using react. I will want to have the ability to make ajax request to the API, but I don't want to include jQuery just for this.
What are the recommended libraries or way to approach this? I have heard some buzz about axios.
We've just decided to go with Axios. It's very nicely done and fills in gaps that Fetch leaves out (see various stackoverflow discussions on the topic)
The thing Fetch has going for it is that it's a polyfill for the standard Fetch api, which means you'll be able to drop the lib as Fetch support grows.
Duncan Austin
Fullstack javascript developer
Start from basics. This great website will help anyone to jump from jQuery into Vanilla JS - You might not need jQuery
Talking about forms specifically, you can start from MDN articles about XMLHttpRequest (XHR) and new ES6 fetch API (XHR2) and also look on FormData API on how to easily send POST requests.
This Medium blog and this YouTube channel will help you to learn JavaScript and ES6 deeper. For rest MDN is still the #1 resource and you may Google many ES6 guides.
I would recommend to understand ES6 Promises first.
There are many packages available online which offers you AJAX functionality.
For example, in BunnyJS (Set of small modern VanillaJS libraries and UI components to make your life easier, simple like jQuery) you can find Ajax, BunnyFile which allows you to download files and BunnyImage which can download images and create Image instances for you to be used in canvas for example.
However, browsing the source code of different packages and contributing is one of the best ways to learn.
Last personal advice - I strongly recommend to create own some kind of Api object, tiny wrapper around any XHR implementation you gonna choose. This will give you a single entry point of all AJAX requests into your application and you have full control form the single place. Set up all the default headers like X-Requested-With and handle many exceptions like 404, 500 automatically and, may be, show some small alert in that case. On the top of that layer you may build tiny Api-speaking objects, your models. For example you could just call User.isEmailAvailable(email).then(...); and in error case your Api layer would display an alert itself.
Good luck with becoming a great JavaScript engineer!
P.S. probably you can also add ES6 and JavaScript tags to your question so more people could see it.
I suggest fetch API. For more details, read this story.
Ghazouane
code ♥ surf
My advice : use fetch. XHR is doomed -> MDN Fetch API
A polyfill : Github/fetch
Cheers !