Passing data from React frontend to Django Backend

I have a completed react app and I have a textarea and button in it and I want the textarea text to be passed to the django backend when the button is pressed. In my folder, I have a React UI, Django project, along with a Django app inside of that project. I know I have to use the django REST framework but I dont know how to pass the text from the React UI to the backend of Django.

Just a clarification, you don’t need to use DRF. Depending upon how much functionality you need to implement in the back end and how many endpoints you need to provide, you can implement this using just the regular Django view interfaces. (The request.body attribute gives you access to a JSON payload submitted from the front end.)

Regarding React, you might find someone here who can help you - but really, all you’re looking to do is issue an http POST from your app, probably with a JSON payload. (Or, if React can submit a request as standard POST data, you could pass it through to a view as if it were from a typical HTML form.) You might find more effective help on a React-related site.

Ken

First, you’re going to have to install axios into your react environment. This is a super simple package that routes HTTP requests.

I would take a look at that link to get an understanding of how axios works.

TLDR, you’ll be able to tell axios what request data to send and what method/url to send the data to. In this case, you will be sending the information to a url defined in your django project – which has a view connected – and that view will return a Response object that will bounce back to the react project.

CodingEntrepreneurs has a great set of videos that goes through the whole process.

I would suggest taking some time and going through this tutorial before jumping into cross-framework development so you truly understand what’s going on in the background.

2 Likes