I created this project while researching a number of solutions of trying to connect Django with ReactJS. This project uses the Django Rest Framework (DRF) and Webpack modules which made it possible for ReactJS and Django to exchange data via API.
In the next iteration I will probably include Redux to manage states more efficiently.
I recommend to use Python virtualenv to set up your virtual environment with the required Python packages. In any case, these are the Python modules needed:
pip install django
pip install django-webpack-loader
pip install djangorestframeworkAlternatively you can install the python packages from requirements.txt:
pip install -r requirements.txtYou also need to install a couple of NPM modules:
npm install --save-dev jquery react react-dom webpack webpack-bundle-tracker babel-loader babel-core babel-preset-es2015 babel-preset-reactI kept this simple, so all data will be stored on sqllite database. You can adapt your database of choice accordingly.
This codebase is made up of the following components:
- Django project called
reactdrfwhich can be accessed through http://localhost:8000. - Django application called
apiwhich can be accessed through http://localhost:8000/api/. This is created as a DRF API with very basic routes, namely POST and GET. - ReactJS Class based component called
BookListwhich is loaded from assets/js/index.js and compiled inside assets/bundles (refer to webpack.config.js)
In order to run this project you need to first compile the frontend through webpack as follows:
./node_modules/.bin/webpack --config webpack.config.js --watchOnce frontend is compiled, the Django server can be run as follows:
python manage.py runserverFeel free to remove any sections that aren't applicable to your project.
As I have explained in the introduction, I have made extensive research to come up with the best way to integrate Django with ReactJS. I would like to credit in particular the following developers who inspired me: