Post
Ask Question

Complete Guide To Setup Django And React.js

Introduction

 
In this article, we will set up node.js and npm which are the prerequisites for React.js and Python and PostgreSQL, which are the prerequisites for Django.
 
We will also set up visual studio code, pycharm, and postman. (They are not compulsory, but make development easier.)
 

React.js

 
To install react.js, you need to have node.js and npm. You can verify if node.js and npm are installed on your system by running node -v and npm -v on the command line.
 
If you have node.js installed, make sure node.js version is >= 8.10
 
 
If you don't get a node.js and npm version, you can install them as follows.
 

Node.js and npm

 
To install node.js and npm, go here.
 
On this page, you will have two options.
  1. LTS version (Useful for most users)
  2. Current version
Let's understand how node.js works.
 
When we create an application, we use many libraries. You can consider the library as your helper.
 
For example, in Javascript, to hide/show an element, you have to write the following code:
  1. <html>  
  2.     <body>  
  3.         <button onclick="hideShowData()"></button>  
  4.         <p id="data">  
  5.             This is container tag.  
  6.         </p>  
  7.     </body>  
  8. </html>  
  1. function hideShowData() {  
  2.   var data = document.getElementById("data");  
  3.   if (data.style.display === "none") {  
  4.     data.style.display = "block";  
  5.   } else {  
  6.     data.style.display = "none";  
  7.   }  
  8. }   
In jquery (javascript library) you can do same task as following.
  1. $("button").click(function(){  
  2.     $("#data").toggle();  
  3.   }); 
NOTE
jquery is not dependent on node.js. I have given this example to give a clear concept of the library.
 
Many libraries depend on the node.js version. When major node.js versions are released, they enter as the current status for six months. This six months will give the library author time to add support for a new version. After the six months, the current version enters LTS("long-term support") for general use. If you are going to use node.js for creating an application you should always download the LTS version. 

Once the node.js installer is downloaded, go to download and double click on the .msi file.
 
 
  
The software will take time to compute the space requirements. Once the process is complete, click Next
 
 
 
Accept the terms in the license agreement. Click Next
 

 
You can choose in which directory you want to install node.js. You can store node.js in any directory (c drive is not compulsory.)
 
 
 
The next screen will display a custom setup. Node.js will install 3 things on your computer
  1. Node.js runtime
  2. npm package manager
  3. Online documentation shortcut- This feature is not required but it only takes 1kb so you can download it.
Node.js installer also sets an enviroment variable of node.js, npm, and module.
 

What is the environment variable and why is it important?

 
Environment variables are managed in the background by the operating system. In a normal program, we have variables, methods and function use these variables. If important variables are not set up (initialized), your program will not work as expected. It's the same way if the enviroment variable is not setup, so your software will not work. These environment variables are used by the system to perform different tasks. For example, to know where in the drive certain software is installed, or where to store temporary files, etc.
 
Click Next
 
 
Select checkbox, as it will download and install the necessary tools for Python and Visual Studio Code. It will do a basic setup for you. eg. configure python dependency. Click Next
 
 
 
Once you complete all steps, click on Install.
 
 
This process will get node.js and npm on your computer. You can verify the installation by running node -v and npm -v command in command prompt. With node.js and npm we have completed prerequisite of react.js
 

Django

 
For Django, we need the latest version of python and backend Database. Django provides support for many different database servers such as PostgreSQL, MySQL, SQLite, etc. If you don't want to install backend, you can go with SQLite but other database servers such as PostgreSQL provide many features.
 

Python

 
To install Python, go here and install the installer.
 
 
Once the Python installer is downloaded, double click on the .exe file form download.
 
 
For default, setup, select the first option (In most of the cases). Make sure you select Add Python 3.8 (version number) to path checkbox. This will set up the environment variable of Python on your system.
 
 

PostgreSQL

 
To install PostgreSQL go here and install the installer.
 
 
Once PostgreSQL installer is downloaded, double click on .exe file
 
 
If asked for any setup permission, click Yes. After that click Next
 
 
Select the location where you want to store PostgreSQL.
 
 
In this step, you can select which component you want to install.
  1. PostgreSQL server: This will provide a database server. (Required)
  2. pgAdmin 4: pgAdmin is a management tool for PostgreSQL. pgAdmin4 will provide a graphical interface to interact with PostgreSQL.(Required)
  3. Command Line Tools: It is required when installing PostgreSQL or pgAdmin4. (Required)
  4. Stack Builder: Stack builder may be used to download and install additional tools. (Not required)
 
Select the location for Data Directory. Click Next.
 
 
Set a password for PostgreSQL. Enter a password that you can remember, as you have to enter this password every time you open PostgreSQL.
 
 
Set the port for PostgreSQL. Click Next
 
 
Review the installation and click Next
 
 
Click Next
 

Visual Studio Code

 
Visual studio code is code editor that is used by many developers to build a modern web application. Visual studio code comes with many extensions for language-specific snippets. You can install the visual studio code installer from here.
 
 
Once the Visual studio code installer is complete, open the installer from downloads.
 
 
 
Accept the agreement and click Next
 
You can set up the following additional options in visual studio code.
  1. You can create a shortcut on the desktop
  2. Add visual studio code in the context menu (When you right-click on any file or folder you get menu, from this menu you can select in which editor you want to open file/folder.)
In most cases, these setups are not required. Click Next.
 
 
Click Install
 
 

Pycharm

 
Pycharm is an IDE for python development. You can install the pycharm installer from here. Select the community version.
 
 
Once the installer is downloaded, double click .exe file. Provide permissions if asked.
 
Click Next
 
Select location for pycharm. Click Next
 
 
In pycharm, you can have additional setup as follows.
  1. Create a shortcut for pycharm on your desktop
  2. In the context menu(Context Menu-> Menu which appears when you right-click on file/folder) add pycharm as an option.
  3. Update the environment variable.
In most cases, we don't need additional setup. Click Next.
 
 
Select which folder you want to create as pycharm's shortcut. It is always better to have program related stuff in one place. By default, it will create a shortcut in JetBrains folder. You can also change it according to your needs. In a normal case go with JetBrains. Click Next.
 
 

Postman

 
Ever need software to test your API?  Postman is your answer. With Postman, you can test your API in simplified steps without setting the backend server. Postman also stores historical API requests. To download postman go here.
 
 
 
Once the installer is downloaded, only double click on .exe and it will install Postman.
 
 

Conclusion

 
In this article, we have installed much software, but now you are ready to create your first Reactify Django project. 


Similar Articles