Learning React made me a better developer

After the entertainment industry shutdown in 2020, I had some time to learn more about current web development technologies. Previously, I would reach for the same set of tools to accomplish a web dev job, no matter what the requirements were. I used Django and jQuery for everything, and could crank out apps for Masque in a day or two. I found comfort in these technologies and the results were pretty good. I used VueJS in a freelance project and was amazed by it, but never spent the time to refactor my existing apps, or implement new apps using it at Masque.

During quarantine, I built three apps in multiple iterations with advanced features (real-time collaboration, hierarchical permission system, file sharing, chat, etc.) using React.

Since I was coming from jQuery, I had a little JavaScript knowledge, so I was able to spin up a project fairly quickly using the React guides. Building the front end of these apps entirely in JavaScript taught me so many more useful techniques that I now take back into my Python/Django work.

The first takeaway was the developer experience. Other than a few extensions in VSCode, there isn’t much of a Django specific development experience. The Create React App node script creates an environment that provides excellent linting, debugging and hot-reloading. I’ve now installed more Python tools in VSCode to help find unused imports, syntax errors and errors prior to reloading the page.

The second takeaway was immutability. Python is incredibly dynamic by design, and since I learned to code with Python, I may have developed some bad habits and anti-patterns. For example, I would consistently assign different types of objects to the same variable throughout a function or method and check its type at the end to determine the outcome (i.e: is it False or is it an object?). This makes debugging difficult and the code hard to read. In JavaScript, when there’s a “const” declared, I know that it’s not going to change throughout the function. The heavy use of the spread operator in JS to copy immutable objects to make state changes made its way into my everyday Python coding. There are certainly reasons to use dict.copy and dict.deepcopy, but I find myself using the **dict and *array syntax for simple copying, where previously I would use the dict methods or worse, looping through dict.items()!

The third takeaway was array methods with immediately invoked functions. These have always been available in Python, but there was no incentive for me to use them in Django since a standard forloop (or multiple nested forloops) usually would suffice. In React, I use the Array.map function a lot, and in doing so, I’m now using the map() with a lambda function in Python. There aren’t really any severe performance increases, but it makes my code easier to read and debug by using this succinct syntax.

I’m now a React disciple. I find building apps using React instead of Django template with jQuery or Vue to be so much easier to troubleshoot, architect and maintain. I still use Django or Flask as a Python API back end if it’s needed, but instead of reaching for the same set of tools each time, I’ll now develop using the best tool for the job.