Axios in React.js

What is Axios?

Features

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Creating React.js App

npx create-react-app
npm install axios

Creating a Form component

import React from "react";
function form(){
return(
<div className="form"></div>
);
}
export default form;
import Form from "./components/Form";
function App() {
return (
<div className="">
<Form />
</div>
);
} export default App;
import React from "react";
function form(){
return(
<div className="form">
<h2>User Form</h2>
<form>
<label htmlFor="">Username</label>
<br />
<input type="text" placeholder="Enter your username" />
<br />
<label htmlFor="">Email Address</label>
<br />
<input type="email" placeholder="Enter your Email Address" />
<br />
<label htmlFor="">Password</label>
<br />
<input type="password" placeholder="Enter your Password" />
<br />
<button type="submit">Submit</button>
</form>
</div>
);
} export default form;
import React from "react"; 
function form(){
function submitForm(e){
e.preventDefault()
}
return(
<div className="form">
<h2>User Form</h2>
<form onSubmit={submitForm}>
<label htmlFor="">Username</label>
<br />
<input type="text" placeholder="Enter your username" />
<br />
<label htmlFor="">Email Address</label>
<br />
<input type="email" placeholder="Enter your Email Address" />
<br />
<label htmlFor="">Password</label>
<br />
<input type="password" placeholder="Enter your Password" />
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default form;
import React, { useState } from "react"; 
function Form(){
var [username, setUsername] = useState("");
var [email, setEmail] = useState("");
var [password, setPassword] = useState("");
function submitForm(e){
e.preventDefault()
}
return(
<div className="form">
<h2>User Form</h2>
<form onSubmit={submitForm}>
<label htmlFor="">Username {username}</label>
<br />
<input type="text" placeholder="Enter your username" onChange={(e)=>{setUsername(e.target.value)}} /> <br />
<label htmlFor="">Email Address {email}</label>
<br />
<input type="email" placeholder="Enter your Email Address" onChange={(e)=>{setEmail(e.target.value)}} /> <br />
<label htmlFor="">Password {password}</label>
<br />
<input type="password" placeholder="Enter your Password" onChange={(e)=>{setPassword(e.target.value)}} /> <br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default Form;
import React, { useState } from "react";
function Form(){
var [username, setUsername] = useState("");
var [email, setEmail] = useState("");
var [password, setPassword] = useState("");
function submitForm(e){
e.preventDefault();
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(username!=="" || email!=="" || password!==""){
if(re.test(String(email).toLowerCase())){
} else{
alert("Please enter a valid Email Address")
} } else{
alert("Please Enter all fields")
}
}
return(
<div className="form">
<h2>User Form</h2>
<form onSubmit={submitForm}>
<label htmlFor="">Username {username}</label>
<br />
<input type="text" placeholder="Enter your username" onChange={(e)=>{setUsername(e.target.value)}} /> <br />
<label htmlFor="">Email Address {email}</label>
<br />
<input type="email" placeholder="Enter your Email Address" onChange={(e)=>{setEmail(e.target.value)}} /> <br />
<label htmlFor="">Password {password}</label>
<br />
<input type="password" placeholder="Enter your Password" onChange={(e)=>{setPassword(e.target.value)}} /> <br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default Form;

Using Axios for Posting data

import React, { useState } from "react";const axios = require('axios');function Form(){var [username, setUsername] = useState("");var [email, setEmail] = useState("");var [password, setPassword] = useState("");function submitForm(e){e.preventDefault();const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;if(username!=="" || email!=="" || password!==""){if(re.test(String(email).toLowerCase())){axios.post('/user', {username: username,email: email,password: password}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}else{alert("Please enter a valid Email Address")}}else{alert("Please Enter all fields")}}return(<div className="form"><h2>User Form</h2><form onSubmit={submitForm}><label htmlFor="">Username {username}</label><br /><input type="text" placeholder="Enter your username" onChange={(e)=>{setUsername(e.target.value)}} /><br /><label htmlFor="">Email Address {email}</label><br /><input type="email" placeholder="Enter your Email Address" onChange={(e)=>{setEmail(e.target.value)}} /><br /><label htmlFor="">Password {password}</label><br /><input type="password" placeholder="Enter your Password" onChange={(e)=>{setPassword(e.target.value)}} /><br /><button type="submit">Submit</button></form></div>);}export default Form;

--

--

Computer Science Graduate with MERN stack website development expertise.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Musab Abbasi

Computer Science Graduate with MERN stack website development expertise.