We have already learn about how to make API calls in HTML using jQuery and AJAX , if you do miss the article here is the quick link to the posts.
- GET API Call using jQuery and AJAX - How to make a get API call in HTML/web app using jQuery and AJAX
React
React is a JavaScript UI library for building super responsive web application. We can connect React with Nodejs-Express API/ any API (already covered the API creation with Node-Express in the past tutorials, following links will be helpful for revisiting those posts)
Create API with Node-Express
- How to create a REST API using Mongodb and Express in Nodejs - How to create a REST API using Express and MongoDB in Nodejs
- What is an API and how to create an API ? - What is an API, what is the need of an API. Learn to build and use API in web applications and non web applications
POST API call with Axios
Axios is a NPM package which let you use API in react. To use axios we have to install the package and make API request.
npm i --save axios
A POST request is used to pass data to the server, for example register a new product to the inventory
onPublish(e) {
e.preventDefault();
const post = {
title: this.state.title,
content: this.state.content
};
console.log(post);
axios
.post("http://localhost:3005/post/create", post)
.then((res) => console.log(res.data))
.catch((error) => {
console.log(error);
});
}
In the above code we have make call to the API end point post/create which will save the post to the server.
Following React API posts help you to build better React apps
- How to clear all element in mongoose object array in Nodejs - How to clear elements in a mongodb object array
- Use dotenv to store configurations in Reactjs - use dotenv in Reactjs to store API base URL
- How to export multiple components in Reactjs - How to render export multiple components in React
- How to create ant row design for Reactjs - Quickly create a row design using Ant Design customize UI for React component
- Ant layout for Reactjs apps - How to create a app layout with Ant Design UI Kit in Reactjs
- How to render child components in Reactjs - How to render child components in React
- How to add element to mongoose object array in Nodejs - How to add element to a mongodb object array
- How to interact with input in Reactjs - How to handle state and event of input element in React apps
- How to render mongo object in Reactjs - How to render MongoDB object/ObjectId in React/MERN app
- How to render mongo document in Reactjs - How to render mongo document in react component
