When we work on a project having Django as our Back-end and having a powerful front-end using React, the development setup takes a significant amount of time to setup – configuring Babel, Webpack, URLs, views, etc. We used to set up this earlier to get started with ReactJS before npx create-react-app came.
The npx create-react-app command enables us to work on react without thinking about all the Babel, Webpack, etc. It becomes a problem when we try to use npx create-react-app in our Django app. So in this article, we are going to use a Python CLI App or Package- Dact. Dact enables us to set up a React-Django Development setup in just a single command. It’s open-sourced and its code is available on GitHub.
Note: Make sure you have Python, pip and npm installed in your system.
Follow the below steps to successfully set up a React-Django project in your system:
Step 1: First we need to install dact using pip as shown below:
pip install dact
Step 2: Check if dact is successfully installed by typing “dact” in your terminal.
dact
Step 3: To start a Django-React Full stack development project, just type-
dact {your_project_name}
It creates a Django project with the name you provided and a frontend app named- “reactfrontend”. You may also set up the project using your custom front-end app name using
dact {your_project_name} {react_front_end_app_name}
Step 4: Enter the Project
cd my_project
Step 5: Run Django Server
python manage.py runserver
Your Welcome Page serves at localhost:8000
Step 6: Watch the changes in React file.
Open a different terminal and type
dact-watch
Note: Make sure you are in the same directory as manage.py.
Let dact-watch run in the background while you work on your Front-end.
Step 7: Edit your React Front-end. To edit the React file, you need to go to :
reactfrontend > static > src > App.js
Let’s write Hello GeeksForGeeks.
Make the changes. Make sure dact-watch is running in the background. Refresh your Welcome Page.
Now you may create your own Django app for the back-end and develop your dream project using React and Django with the help of Dact..
