Integrating React in the Django way!

Oct 19 3:20 PM PDT :calendar: to 3:45 pm

About This Talk

Your User Interface is the first impression you make on your website visitors. Thus User Interface is a critical component of your web application. It becomes necessary to make it simple, efficient, and at the same time attractive. Developing complex user interfaces with traditional methods like Vanilla Javascript or Jquery library is time-consuming and can get messy after some time. Nowadays, there are many frontend frameworks such as React, Angular, Vue, and more. These frameworks make the process of frontend development much cleaner, faster, and easier.

How to use React with Django?

The most common solution shown by many tutorials and blogs on the Internet is to develop two isolated projects, one for the frontend and the other for the backend. All the interactions between these two projects happen through APIs. This approach is used in large projects since they generally have dedicated teams for the backend and frontend. But this approach may not be suitable for individual or small-scale projects due to a variety of reasons like the cost for deployment, time consumption, and losses of features provided by Django Framework (forms).

A more Django-friendly approach would be to serve a single template (HTML) document, and then let React take over. This approach gives you the liberty to use plain HTML and Vanilla Javascript for simple pages or forms, and for highly interactive pages, one can take advantage of React. Using HTML and Vanilla Javascript for the simple pages can help reduce the bundle size of the frontend and thus help in reducing the loading time and improving the overall User Experience.

Why did I develop this Package?

When I decided to integrate Django and React, it took me two full days only to configure the project. I had many errors while writing the Webpack configuration file and many dependencies issues. After this experience, I realized why not automate these steps so other users will not get demotivated from trying Django and React, and this is how django_webpack_dev_server was born.

How this Package Helps you!

The package provides a command to set up a React app in both Javascript and Typescript programming languages. The resulting app would be a Django app with a webpack configuration with CSS and SCSS support. The webpack dev server would proxy the Django server in the development phase. After running the build script, the frontend code gets bundled into a single Javascript file and is available for Django to serve from an HTML template. After the setup, it is easy to install other npm packages and modify the webpack configuration as per specific requirements. Since the package is used in development only, there is no need to add it to the requirements.txt file of the production environment.


    Photo of Jiten Sidhpura

    Jiten Sidhpura (he/him)

    Mr. Jiten Sidhpura recently earned his bachelor’s degree in computer engineering (2022) and is currently employed as a full-time Software Engineer in Mumbai, India. He was the winner of the Smart India Hackathon 2022 (India’s Largest Hackathon). He obtained a summer internship through JPMC’s Code For Good Hackathon. His interests include web development, machine learning, and deep learning. He was one of the lead developers of Sourceable, a Columbia University, New York, based startup that focuses on news related to Human rights violations, currently running as a pilot project in Bal-Al Hawa Borders of Syria. His final-year project, FedSpam, a privacy-preserving on-device Federated Learning Mobile Application to detect spam messages, won his college’s best Project Exhibition Award. His research interests in Machine Learning prompted him to write research papers that got approved at an IEEE Conference and the second paper is in the process of getting published in a Springer Book Series. In his sophomore year, he led a team of 5 students and developed a Fire Safety Awareness Mobile Application, which got recognized by the Fire & Security Association of India (FSAI).

    Connect with him on LinkedIn, and feel free to talk about open source projects and other opportunities with him.

    His open source projects: