React.js And Django


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 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 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.
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. 
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.


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.
To learn Django there is no prerequisite.


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.