Full Stack app with ReactJS & Django

In the previous post, we have started our Django journey. But in it the frontend was created using the templating language. In real world projects Django is used only to create API endpoints.

And then we create frontend using ReactJS/Angular/VueJS. In this post, we are going to build the API with Django and the frontend with ReactJS.

So, first we will create a react app in our desktop with the create-react-app command.

Now, go inside the newly created react-django folder and create a python virtual environment. We will also activate the same.

Now, we will install django in our project by pip. Also create a backend folder with django-admin. Inside the backend folder, we will create a app called api_app.

Now, we will open the project in VS Code and here, we will find all frontend and backend folders.

Now, we will create an urls.py, serializers.py file in the api_app folder. Also, inside the models.py file we will add the model containing four fields.

Now, in the admin.py file we have to add the Patient.

Now, we will install the djangorestframework in our project.

We also need to install django-cors-headers in our project to be able to connect from a react frontend.

Now, in the backend folder settings.py file, we need to add rest_framework, api_app, corsheaders in the INSTALLED_APPS. Also, need to add cors option in MIDDLEWARE and also allow it.

Now, in the serializers.py file we need to include the Patient fields.

Now, in the views.py file we will add the PatientSerializer.

Now, in the backend folders urls.py file we will include a path for a new api_app.urls.

Now, in the api_app folders urls.py file we will register the patient.

Now, from command line we need to make the migrations as model changes were done.

We will also run the migrate command.

Now, we will create a superuser for the in-built admin system. Finally we will run our server.

Now, in http://127.0.0.1:8000/ we will see the REST framework working perfectly.

Here, we can also do POST request and add a new patient.

After adding two patients, we can see both of them in the admin view.

Back in http://127.0.0.1:8000/patient we can see two patients data.

Now, we will start the react frontend by giving the command npm start.

Now, we will remove some of the boiler-plate code in our React app.

We will remove the unnecessary code from index.js and it will look like below.

Now, to do api calls we will add axios in our react project. Also, create a components and services folder in the src.

Also, our App.js consists a simple h1.

Now, in the ApiService.js file in the services folder, we will use axios. Here, we have a function which is getting the patient data.

Now, we will create a PatientList.js file inside the components folder and include it in the App.js file.

In the PatientList.js file through useEffect hook, we are calling the getpatient(). And after that setting it to patients state.

Now, in the console of http://localhost:3000/ we can see the perfect response.

We will show the data in a nice way. So, we will add bootstrap in index.html file.

Now, inside the return of PatientList.js file, we will use bootrap classes to show a nice table. Also, we will map through the patients array and show the different fields.

Now, in http://localhost:3000/ we will see all of the data.

Now, we will also add the logic to AddPatient in the frontend. So, we will add a state for the same and also call a function handleCancelBtn to change it. We are also calling the getpatient() in it.

Now, towards the end in PatientList.js file, we will add a Add Patient button. Here, we will also call the AddPatient component.

In the AddPatient.js file we will a POST call toe patient endpoint and send the first_name, last_name and blood. We also have three states to take them.

In the return statement of AddPatient.js file, we will take the three values from the user.

Now, we have a Add Patient button in http://localhost:3000/ in which we can all the details of a new patient.

Now, we will create the delete functionality by sending the patient_id to a handleDeleteBtn. We have also change a bit of logic for Add New Patient.

Also, removed the Edit functionality, which is expected as an assignment for the reader

Now, the handleDeleteBtn function will take the id and call the deletepatient function. After the delete is done it will filter out the patient.

Now, in the ApiService.js file we will create the deletepatient function, which will take the id and do a delete request to our endpoint.

Our app is now working fine and you can get the code for the same here.