My Adventure with ReactJS and Django I
I am digging ReactJS these past days. I am trying to figure out how it works this is because of my curiosity looking at the source code of a certain website with clean html structure--like having just a head, body and a division within it only. I was wondering how the HTML elements have been rendered on that page, and there I found out that it is possible by using ReactJS (I don't know if there are other library that can do it).
Just an introduction what is this ReactJS--it is developed by Facebook (made it more appealing to me). If they are using it, therefore, it must be really efficient and fast. As the description on the website states, it is "A JavaScript library for building user interfaces". Based on my understanding, it utilizes the Virtual DOM, meaning instead of directly changing or re-rendering the DOM when updates is needed, ReactJS will determine and calculate if there are changes in the UI in Virtual DOM and if there is, it will re-render the entire UI in Virtual DOM then the changes will be pushed through to the actual DOM, like a patch. Wait what?!! lots of process there. Actually, re-rendering in Virtual DOM is much faster than in the actual UI in the browser and it only updates what is needed to be updated (sounds like a hit man).
Example code (taken from their site):
I think the forte of ReactJS is managing the updates on the page. Some of the developer uses ReactJS when building a single page application, which is a trend nowadays.
You may take a look at their documentation for further information.
Note: DOM does not stand for Dirty Old Man! HAHA
Meanwhile, on the other planet...
Django--been using this Python framework for almost 3 years. I love it (but not as much as I love my girlfriend, JK). Great documentation, secured, with built-in Admin page and it's free and open-source. I won't talk more about Django as this is not new to me.
The struggle is integrating ReactJS with Django.
Given that Django has its own template system, by the way, it follows with MVC pattern. You create models (this is tables in the database), a controller somehow is the views.py in Django (kinda confusing), the View is the template; the UI. Integrating it with ReactJS, we need to replace the template. The struggle is the communication between these two different technologies. As for me, using Django REST framework can be one of the ways. We'll get the data through API and process it using xhr or axios or maybe ajax through jQuery in ReactJS. The problem with this, we can't maximize the capacity of Django in the template (page). I'll look more into it this coming days.
As for now, I have managed to deploy a simple ReactJS App in Heroku. Click the creature below and take a look at the source code.
 |
I'll walk you through the deployed simple ReactJS App.
"package.json"
This file is actually generated when creating a ReactJS App. Whenever you install a package, this file will be modified and it will include the newly added package depending in your installation type.
Few notes, name should not have space, version also needs to follow the format x.x.x.
To be continued...
