How to Consume a RESTful API in React with Axios

AJ Develos
.
August 21, 2023
Code

In this tutorial, you need some knowledge of reacting, but you don't have to be an expert, just basic knowledge is enough to get started.

The objective is to get the app running, then we will style it.

Let’s begin!

Create a directory for the react application

The frontend application directory can be accessed by navigating to it.

dev1

It happens that we won't use a lot of files from the frontend directory when developing our react application.

Public Folder

The index.html file is important here. You can remove all the other files.

Don't forget to remove the links to the manifest.json and logo files inside the index.html file.

src Folder

In the src folder, you need to delete all but the index.js file. In the src folder, you need to create two new folders: components and CSS.

Create the following files inside the components folder.

App.jsx Notes.jsx and List.jsx in the CSS folder, and index.css in the components folder.

Currently, the frontend directory should look like this:

frontend

index.js

As we won't be using the webvitals import or the webvitals function, remove them from the file.

Our App.jsx component's location has changed, so we must change the path to the App import to it.

dev2

CSS import and that of

dev3
dev3

The index.js file should look like this

dev4

The Axios JavaScript library will be needed to communicate with the API endpoints on the Django server backend.

To begin, we'll use npm to install it:

dev5

package.json

Next, open the package.json file and insert the proxy line below the "private": true, line, so it looks like this.

dev6

You will be able to use relative paths when making API requests as a result of this.

Instead of using http://localhost:8000/notes/, you can simply use /notes/.

It appears to be a fantastic idea, doesn't it?

You'll get to see it in action soon. Let's get started on the component files.

List.jsx

To begin, consider the List component.

We won't be doing much here for the time being; all we need to do is declare and export the function.

dev7

Notes.jsx

We begin by importing the necessary hooks, useState, and useEffect.

dev8

useState

Following that, we'll write the Note function, which will make use of the useState hook.

The state variable is declared as notes with an initial state of null in the first line.

The second line handles the form data's state.

Here, we declare the state variable as formNote and set its initial state to empty strings.

dev9

Please keep in mind that every other function created below should be contained within the Note function above.

useEffect

This useEffect hook will also make sure the getNotes function is called right after the render has been displayed.

dev10

You can pass an empty array ([]) as a second argument to prevent the function from running in an infinite loop.

Therefore, React doesn't need to rerun the effect because it doesn't depend on props or state.

GET API function

dev11

This request method type is getting, and the URL is the relative path /notes/.

In the package.json file, "http://localhost:8000" was not added.

The URL here has to be "http://localhost:8000/notes/".

The way we did it made the code cleaner.

A GET request with Axios prompts the setNewNotes function to write the data in the response, and this updates the notes state variable with a new state.

This results in the value of the state variable changing from null to the data contained in the response.

Lastly, a function is present to handle any errors that may occur during a get request.

POST API function

dev12

Bypassing /notes/ as the URL, we are declaring the request method type as POST.

Data is also part of our request.

The data will be sent to the backend for processing and storage in the database.

Inputs from the title and content fields will be sent to the backend for processing.

The response to the POST request with Axios is not processed we simply use it to query the getNotes function so that the previous notes will also be displayed with the new note.

Then we use the setFormNote function to reset the form inputs to empty strings.

Also, we need to ensure that the form submission doesn't cause the page to reload, so we add the event.preventDefault function which prevents that from happening.

DELETE API function

dev13

In the function, we include the id parameter so we will be able to pass it as an argument, later on, to delete the particular note.

We don't process the response from the DELETE request when it's made with Axios; we just call the getNotes function using the response function so that the notes get method can get executed again and we'll be able to see the remaining notes.

Form Input Change

This code ensures that the input is controlled, so we can handle the changes appropriately.

The function tracks all changes to the form inputs and updates/deletes them as needed.

You won't be able to see what you're typing in the form input fields if you don't use this function, and the values of your input data won't change.

We change event.target to get the value and name, then we use the spread syntax to keep the previous input's value, and finally, we assign a new value to the specific input being operated on.

return

As the output of the Note function, we now return the React elements to be displayed.

dev15

We include the input and text area elements in the form.

Then we add the onChange event handler, which calls the handleChange function whenever any of the input fields are changed.

Then, before rendering the List component, we must first confirm that at least one single note was recovered from the database in order to avoid passing void data to the List component.

If notes were successfully retrieved using the GET function, we pass the data's content (id, title, content) as well as the delete function to the List component.

Finally, remember to export the Note component so that it can be used in the App.jsx file.

dev16

The Notes.jsx file should now look like this.

dev17

List.jsx

We must now return to the List.jsx file to complete the List component.

dev18

We use props to access the data sent from the Note function, which gives us access to the note's title, content, and id.

We pass the id to an onClick function, which calls the delete function in the Note function with the argument id.

Please keep in mind that if you directly pass the delete function into the onClick function, the delete function will run automatically and delete all of your notes.

The delete function could be passed into a function called by the onClick function, as we did above.

App.jsx

Let us now add the Note function to the App.jsx file.

dev19

Run the following commands to evaluate the application's current state:

dev20

then go back to the project1 directory where the manage.py file is located.

dev35

At last, we run:

dev22

Here is a screenshot of the fully functional application.

title

Styling

The final step in this tutorial is to style the Notes application so that it looks like this.

styling

Go back to the frontend directory.

dev23

Material UI icon

To obtain the + icon, you must first install the material UI icon. Run:

dev24

Notes.jsx

AddIcon from the installed material UI icon package is imported into the Notes component.

dev25

We'll use useState hooks again to hide the text input and add button until the text area input is clicked.

dev26

Depending on the state, the first line shows or hides the text input and add button (false or true).

The state variable isExpanded is declared here with an initial value of false, so that the text input and add button are hidden when the page loads.

The height of the text area input is determined by the second line.

The state variable is declared as rows with an initial state of 1.

dev27

Following that, we create a new function Noteshow that is called when the text area input is clicked.

Let us also make the necessary adjustments to the form inputs.

dev28

As previously described, the isExpanded condition is added to the text input and button.

The NoteShow function is called when the textarea input is clicked, and two things happen.

1. With the argument 3, the setRows function is called.

which sets the rows attribute of the textarea input to 3, thereby increasing the textarea input's height.

2. With the argument true, the setExpanded function is called, which changes the state to true and then displays the hidden components.

Lastly, at the end of the createNote function, we include setExpanded(false).

dev29

As a result, when the form is submitted, the text input and button revert to their hidden states.

This is the component Note.jsx in its final state.

dev30

Header.jsx

In the components folder, create a new Header.jsx component. This is where our header elements will be stored.

class=

Footer.jsx

In the components folder, create a new component Footer.jsx to hold our footer elements.

dev32

In this case, we simply call the Date().getFullYear() method to obtain the current year and pass it to the p element in our footer.

App.jsx

The Header and Footer components must be imported and called in the App.jsx file.

dev33

CSS

The CSS codes can be found in the GitHub repo; the classNames were already included while we were building the application.

We have finished developing the Notes Application with CREATE, READ, and DELETE functionality.

You can now experiment and then have fun with your application.

To run it, do the following:

dev34

then go back to the project1 directory where the manage.py file is located.

dev35

Lastly, we run:

dev22
Author
AJ Develos
Chief Technology Officer
Work with world leading tech companies from the Philippines
Submit CV

One of our recruitment officers will get in touch with you today!

If you’re interested to know more about our employee benefits and perks, you can download the booklet.

Download now

Head of Marketing

Cloud Employee is building a ‘Future of Work’ AI driven talent tech platform in the remote software engineer staffing space. 

In this strategic and hands-on creative role, you'll have the opportunity to shape the narrative of remote work and impact the tech industry at a global scale. 

With team members across the US, LATAM, Europe and Asia - we’re on a mission to bridge the talent gap with our matching platform and employee experience programs.

We need your storytelling strategy skills to ‘share the journey’ and the human stories behind our business

POST DATE
May 1, 2024
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Strategy & Operations Manager

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Software QA Test Engineer

Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior/Team Lead Full-Stack PHP Developer

Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.

We are now seeking a passionate Senior/Team Lead Full-Stack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior/Lead Backend Developer - Brazil

Cloud Employee is a UK-owned business established 8 years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior/Lead Backend Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior UI Developer with Umbraco

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Software Engineer (VB6)

Cloud Employee is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Python Developer

Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior /Lead Fullstack Developer - Brazil

Cloud Employee is a UK-owned business established 8 years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Integrations Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Integration Backend Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Fullstack Python Developer with React

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Fullstack PHP Laravel Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Fullstack Engineer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Frontend Developer (React)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior NET Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior DevOps Engineer

Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

Our Client

A leading UK-company that specializes in providing foreign currencies solutions

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Robotics Software Engineer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.

Position Summary

In your role as a Robotics Software Engineer, your expertise in Robotic Software Engineering will be the key to your success. Collaborating with our skilled team, you'll play a pivotal role in advancing our cutting-edge product development accelerator. Your responsibilities will involve crafting, programming, and evaluating top-notch software essential for ensuring the dependable and secure operations of commercial robots.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Python Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Python Developer (Senior Level)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
JOB TYPE
Apply

Python Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Perl Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Mid-Senior Mechanical Engineer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.

Position Summary

The position of Mechanical Engineer corresponds to a mid-level role. An ideal candidate for this position possesses robust practical expertise in various technical systems. The responsibilities encompass a combination of individual input within projects and actively leading teams towards achieving a remarkable standard of technical proficiency.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Mid-Senior Industrial Design Engineer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.

Position Summary

In the role of an Industrial Design Engineer with a focus on cobotics, you will assume a crucial position in envisioning, crafting, and honing both the tangible and operational facets of our collaborative robotic solutions. Your collaboration will extend to cross-functional groups, including mechanical engineers, software developers, and UX designers, in the pursuit of devising cobotic systems centered around users. These systems will redefine effectiveness and safety within industrial settings.

POST DATE
WORK LOCATION
JOB TYPE
Apply

Backend Python Developer

Cloud Employee, is a UK owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace continuously investing in staff development, engagement and well-being. We provide security, career paths, along with individual training programs and mentoring.

A top rated and state of the art cloud based video interviewing solutions company based in the UK catering to over 5000 prominent companies around the world such as Samsung, Uber, Boohoo, Coinbase, 7-Eleven and many more.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

CNC Machinist

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

CRM Data Specialist (MS Dynamics 365)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Electrical Engineer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

A completely integrated innovation studio within the corporate framework, with a primary emphasis on making the future of the food industry accessible to all. Their core objective is to discover, create, and expand tailored automation remedies, utilizing a team of proficient individuals covering domains like engineering, robotics, and artificial intelligence. Our central mission revolves around constructing automation technology solutions that empower individuals to achieve greater feats.

Position Overview

In the role of an Electrical Engineer, your expertise and proficiency in designing electrical-mechanical systems will be a key asset, enabling you to stand out. Collaborating with our skilled team, you will play a vital role in expediting product development processes.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Front-End Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Front End React Developer

Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.

We are now seeking a passionate Front End React Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Frontend Developer (NextJS and React)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Frontend Developer (Senior)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Seasonal
Apply

Frontend React Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
JOB TYPE
Apply

Full-Stack Developer

Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.

We are now seeking a passionate Full-Stack Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full-Stack Laravel/Vue Developer (Jr to Mid)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full Stack .Net Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full-Stack Node/VueJS Developer (Mid - Senior)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full-Stack PHP Developer (Mid to Senior)

Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.

We are now seeking passionate mid to senior-level Fullstack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full-Stack PHP Developer Tech Lead

Cloud Employee is a fast-growing UK-managed offshore recruitment and staffing company in the Philippines. We tackle the growing global IT skills shortage by connecting tech companies based in Europe, the US, and Australia to our pool of expert software developers in the country.

We are now seeking passionate Lead Full-Stack PHP Developer to join our team of skilled talents. This is an excellent opportunity to join a fun and dynamic work environment and to significantly advance your career.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Full stack RoR/VueJS Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Fullstack Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Fullstack .NET Developer

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Lead/Senior Frontend Developer (UI/UX) - Brazil

Cloud Employee is a UK-owned business established eight years ago. We connect high-performing software engineer talent worldwide with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines and Brazil as part of international engineering teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, career paths, individual training programs, and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Marketing Specialists

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Backend Developer (Python)

Cloud Employee, is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineer teams and grow their CV and skill-set.

We pride ourselves on being supportive and cutting-edge work that continuously invests in staff development, engagement and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

Senior Full-Stack PHP Developer

Cloud Employee is a UK-owned Philippines business established 8 years ago. We connect high-performing software engineer talent in the Philippines with some of the world’s leading and most innovative tech companies. Developers join to work from the Philippines as part of international engineering teams and grow their CV and skill-set.

We pride ourselves on being a supportive and cutting-edge workplace that continuously invests in staff development, engagement, and well-being. We provide security, and career paths, along with individual training programs and mentoring.

POST DATE
January 2, 2024
WORK LOCATION
Remotely
JOB TYPE
Full Time
Apply

How to Consume a RESTful API in React with Axios

February 16, 2024

In this tutorial, you need some knowledge of reacting, but you don't have to be an expert, just basic knowledge is enough to get started.

The objective is to get the app running, then we will style it.

Let’s begin!

Create a directory for the react application

The frontend application directory can be accessed by navigating to it.

dev1

It happens that we won't use a lot of files from the frontend directory when developing our react application.

Public Folder

The index.html file is important here. You can remove all the other files.

Don't forget to remove the links to the manifest.json and logo files inside the index.html file.

src Folder

In the src folder, you need to delete all but the index.js file. In the src folder, you need to create two new folders: components and CSS.

Create the following files inside the components folder.

App.jsx Notes.jsx and List.jsx in the CSS folder, and index.css in the components folder.

Currently, the frontend directory should look like this:

frontend

index.js

As we won't be using the webvitals import or the webvitals function, remove them from the file.

Our App.jsx component's location has changed, so we must change the path to the App import to it.

dev2

CSS import and that of

dev3
dev3

The index.js file should look like this

dev4

The Axios JavaScript library will be needed to communicate with the API endpoints on the Django server backend.

To begin, we'll use npm to install it:

dev5

package.json

Next, open the package.json file and insert the proxy line below the "private": true, line, so it looks like this.

dev6

You will be able to use relative paths when making API requests as a result of this.

Instead of using http://localhost:8000/notes/, you can simply use /notes/.

It appears to be a fantastic idea, doesn't it?

You'll get to see it in action soon. Let's get started on the component files.

List.jsx

To begin, consider the List component.

We won't be doing much here for the time being; all we need to do is declare and export the function.

dev7

Notes.jsx

We begin by importing the necessary hooks, useState, and useEffect.

dev8

useState

Following that, we'll write the Note function, which will make use of the useState hook.

The state variable is declared as notes with an initial state of null in the first line.

The second line handles the form data's state.

Here, we declare the state variable as formNote and set its initial state to empty strings.

dev9

Please keep in mind that every other function created below should be contained within the Note function above.

useEffect

This useEffect hook will also make sure the getNotes function is called right after the render has been displayed.

dev10

You can pass an empty array ([]) as a second argument to prevent the function from running in an infinite loop.

Therefore, React doesn't need to rerun the effect because it doesn't depend on props or state.

GET API function

dev11

This request method type is getting, and the URL is the relative path /notes/.

In the package.json file, "http://localhost:8000" was not added.

The URL here has to be "http://localhost:8000/notes/".

The way we did it made the code cleaner.

A GET request with Axios prompts the setNewNotes function to write the data in the response, and this updates the notes state variable with a new state.

This results in the value of the state variable changing from null to the data contained in the response.

Lastly, a function is present to handle any errors that may occur during a get request.

POST API function

dev12

Bypassing /notes/ as the URL, we are declaring the request method type as POST.

Data is also part of our request.

The data will be sent to the backend for processing and storage in the database.

Inputs from the title and content fields will be sent to the backend for processing.

The response to the POST request with Axios is not processed we simply use it to query the getNotes function so that the previous notes will also be displayed with the new note.

Then we use the setFormNote function to reset the form inputs to empty strings.

Also, we need to ensure that the form submission doesn't cause the page to reload, so we add the event.preventDefault function which prevents that from happening.

DELETE API function

dev13

In the function, we include the id parameter so we will be able to pass it as an argument, later on, to delete the particular note.

We don't process the response from the DELETE request when it's made with Axios; we just call the getNotes function using the response function so that the notes get method can get executed again and we'll be able to see the remaining notes.

Form Input Change

This code ensures that the input is controlled, so we can handle the changes appropriately.

The function tracks all changes to the form inputs and updates/deletes them as needed.

You won't be able to see what you're typing in the form input fields if you don't use this function, and the values of your input data won't change.

We change event.target to get the value and name, then we use the spread syntax to keep the previous input's value, and finally, we assign a new value to the specific input being operated on.

return

As the output of the Note function, we now return the React elements to be displayed.

dev15

We include the input and text area elements in the form.

Then we add the onChange event handler, which calls the handleChange function whenever any of the input fields are changed.

Then, before rendering the List component, we must first confirm that at least one single note was recovered from the database in order to avoid passing void data to the List component.

If notes were successfully retrieved using the GET function, we pass the data's content (id, title, content) as well as the delete function to the List component.

Finally, remember to export the Note component so that it can be used in the App.jsx file.

dev16

The Notes.jsx file should now look like this.

dev17

List.jsx

We must now return to the List.jsx file to complete the List component.

dev18

We use props to access the data sent from the Note function, which gives us access to the note's title, content, and id.

We pass the id to an onClick function, which calls the delete function in the Note function with the argument id.

Please keep in mind that if you directly pass the delete function into the onClick function, the delete function will run automatically and delete all of your notes.

The delete function could be passed into a function called by the onClick function, as we did above.

App.jsx

Let us now add the Note function to the App.jsx file.

dev19

Run the following commands to evaluate the application's current state:

dev20

then go back to the project1 directory where the manage.py file is located.

dev35

At last, we run:

dev22

Here is a screenshot of the fully functional application.

title

Styling

The final step in this tutorial is to style the Notes application so that it looks like this.

styling

Go back to the frontend directory.

dev23

Material UI icon

To obtain the + icon, you must first install the material UI icon. Run:

dev24

Notes.jsx

AddIcon from the installed material UI icon package is imported into the Notes component.

dev25

We'll use useState hooks again to hide the text input and add button until the text area input is clicked.

dev26

Depending on the state, the first line shows or hides the text input and add button (false or true).

The state variable isExpanded is declared here with an initial value of false, so that the text input and add button are hidden when the page loads.

The height of the text area input is determined by the second line.

The state variable is declared as rows with an initial state of 1.

dev27

Following that, we create a new function Noteshow that is called when the text area input is clicked.

Let us also make the necessary adjustments to the form inputs.

dev28

As previously described, the isExpanded condition is added to the text input and button.

The NoteShow function is called when the textarea input is clicked, and two things happen.

1. With the argument 3, the setRows function is called.

which sets the rows attribute of the textarea input to 3, thereby increasing the textarea input's height.

2. With the argument true, the setExpanded function is called, which changes the state to true and then displays the hidden components.

Lastly, at the end of the createNote function, we include setExpanded(false).

dev29

As a result, when the form is submitted, the text input and button revert to their hidden states.

This is the component Note.jsx in its final state.

dev30

Header.jsx

In the components folder, create a new Header.jsx component. This is where our header elements will be stored.

class=

Footer.jsx

In the components folder, create a new component Footer.jsx to hold our footer elements.

dev32

In this case, we simply call the Date().getFullYear() method to obtain the current year and pass it to the p element in our footer.

App.jsx

The Header and Footer components must be imported and called in the App.jsx file.

dev33

CSS

The CSS codes can be found in the GitHub repo; the classNames were already included while we were building the application.

We have finished developing the Notes Application with CREATE, READ, and DELETE functionality.

You can now experiment and then have fun with your application.

To run it, do the following:

dev34

then go back to the project1 directory where the manage.py file is located.

dev35

Lastly, we run:

dev22
Webflow
Python
MySQL
Node.js
Angular
Android
React
Php
Javascript
What skillsets are you looking to hire?
Previous
Next
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.