Post
Ask Question

React.js And Django

Introduction

 
Reactify Django is a mixture of React.js and Django. In the rectify-Django project, React.js is front-end and Django is the backend. First of all, let's understand React.js and Django.
 

React.js

 
React.js is a javascript front-end library to create a user interface. React has the following key points:
  1. Virtual DOM element
  2. Component
Virtual DOM element
 
To understand virtual DOM, let's first understand the DOM.
 
DOM
 
DOM stands for Document Object Model. When we create any HTML page we have many tags eg body, p, div, etc. All these tags are store under DOM. Let's consider that we have following HTML page:
  1. <html>    
  2.     <body>    
  3.         <div>    
  4.             <p>Hello</p>    
  5.         </div>    
  6.         <div>    
  7.             <p>welcome</p>    
  8.         </div>    
  9.     </body>    
  10. </html>    
In this scenario, DOM will create a tree of elements(tags) as shown in the following:

Now, if we change the content of p tag from hello to hello world, in case of DOM entire tree of an element is re-created. In a large application, this can cost a lot because we will have many tags. On every change entire, DOM will be re-created. To solve this problem, react virtual DOM came into the picture.
 
Virtual DOM 
 
The first time a page is created, virtual DOM will create a copy of real DOM. If we make any change, another copy of the virtual DOM will be created.
 
So expect the first time, we will have two copies of virtual DOM:
  1. Updated virtual DOM 
  2. Previous virtual DOM
After that, React will use a different algorithm to identify a change in DOM object (element or tag). The only changed object is updated on the real DOM.

 
So with the help of virtual DOM, we are getting rid of re-creating entire DOM on every change.
 
Now you might think that we will have an extra cost of creating a virtual DOM, but the virtual DOM uses Javascript, which is lightweight and very fast.
 
Component
 
In React, everything is a component. We divide the entire page into small components. With the help of components we can get DRY (Don't Repeat Yourself). We can reuse the existing component on need. Other than that component render independent of each other. 
 
Prerequisite
 
To learn React, you must have knowledge of basic HTML, CSS, and ES6. You don't need to be an expert, but the basic knowledge will give you a better understanding.
 

Django

 
Now let's talk about Django. Django is a web-framework of Python to create a backend.
 
Django has the following key points:
  1. Built-in admin interface
  2. Django documentation
Built-in admin interface
 
Remember when you created a project in SQL and manually designed the entire admin interface. Forget about it. Django comes with a built-in admin interface. Amazing?? You can now focus on efficient query and testing. You can also customize how data will be shown on the admin interface and other features. Django also provides automatic documentation generation. Based on the comment you have written in code Django automatically generates a document. Other than that, Django provides authentication, session management, and many more which we will find out in the next tutorial.
 
Django documentation
 
Django provides amazing documentation. Django documentation provides all the concepts with example and you can go through it to find a better solution for your coding scenario. Other than that the Django community is constantly working on making frameworks better and adding new features.
 
Prerequisite
 
To learn Django there is no prerequisite.
 

Conclusion

 
React.js is a front-end library that is on-demand because it provides many features as fast rendering, reusability, easy UI text, etc. Starting off, you might find some concepts unfamiliar, but once you get all the concepts, it is an amazing thing. Django is a Python web framework that comes with many built-in features, good documentation, and an amazing community.
 
Next, we will look at how we can set-up both of the technologies.


Similar Articles