My Experience Making a React.js Based Web App
Why I think it is a good framework and how it makes things easier.
Development Trends
I gotta tell you guys, I am not a fan of riding the trends but it's something that I've slowly started learning. Whether the context is stocks, fashion, music, or programming, I have never been the type to jump on a bandwagon but I'm opening my eyes now. Slowly I've learned the value that is brought about by following the trends.
I've been managing risk, selling assets when everyone else is selling, buying shares when everyone else is buying. I'm still working on following the trends when it comes to fashion, I can't bring myself to buy jeans with holes in em. Doesn't it get cold? In Web development, you have trends too and you see new stuff coming up frequently. A new frameowrk or paradigm pops up, hundreds of Medium articles are written about it, and developers swear it is the next best thing since sliced bread.
“[Upgrading all the packages] was a pain in the butt.”
Should I use React.js?
In the world of web development, you have frameworks like React.js, Angular, and Vue.js. I know HTML and CSS like the back of my hand and for the most part, churning out sites and apps is an effortless process once you know what you're doing. Using python for the backend, I can create dynamic websites and apps with tons of functionality; the back-end re-rendering every page for every click that happens on the screen.
If I wanted to add nice animations or show data without loading the page, I would use Vue.js. It's easy to just drop the library into your project and get to work. I had been reading about React.js and the similarity between this framework and Vue.js is a close one, but if I wanted to use it, it would require I change a lot of the code base for any one of my web apps. So why would I switch over and start using React.js?
Choosing React.js for front-end
I decided to not try to change any of my existing projects to React.js because it would cost a lot of time. But I kept an open mind. I would use it on my next project, even if it meant it would take me longer to develop. I would provide a fixed cost price, similar to previous projects, and if it took longer, I'd pay the cost myself (with my time).
Before setting up a new folder for the project, I went on github to research the amount of work that is required to set up React.js with a Python Flask back-end. If I find a repo that has used both, it means there is not much work involved, or at least, not much friction; and that someone enjoyed working with both technologies together enough to create some boilerplate code. I found an existing boiler plate code repo with jason web token authentication and some data endpoints. I was ready to start coding and building on top of this code.
A Leap of Faith
After cloning the repo and setting up the project, I faced a hurdle. This repo made use of obsolete library requirements and so I spent a lot of time upgrading the packages through npm. It was a pain in the butt, literally because I sat on my desk longer than most days.
After getting all the dependencies in order, it was smooth sailing from there, up until I had to implement a download feature. Basically, users of the app needed to be logged in to download files. Usually this is real easy to implement, but because React.js is all about using asynchronious calls to the server (so the page doesn't have to refresh), things were a bit more hands on. A javascript function that creates a hidden anchor tag had to be used. This hidden anchor tag is clicked (programmatically) and initiates the download. But before any of this happens, the web app first validates the request through token authentication. If successful, then that's when the whole javascript download function actually executes. This whole back and forth communication between the web browser and server can get out of hand, luckily there are these things in javascript called Promises. They come in handy and make it easy to write easy to read asynchronious code.
What is there to like?
Working with React.js comes with all the niceties of javascript. One thing that I enjoy about javascript over Python is its support of functional programming. I like using map, filter, and reduce functions to transform data. These functions come in handy when implementing search features. You can do the same with Python on the backend but the syntax is not as nice, as you would basically be reassigning variables over and over again, instead of just chaining function after function (e.g. myData = myData.filter().filter().reduce().map()... )
The use of existing React.js user interface libraries made parts of the project faster to developer. Search bars, buttons, lists, checkboxes already came styled right out of the box. I used a library called material-ui. From a production standpoint, it was awesome to just place the components in my code. It felt like I was building with Legos. The artist in me wasn't a big fan because I really do enjoy styling my own HTML and giving things a custom look. But oh well, if it works, it works, and the components looked nice.
Closing Thoughts
Overall, I think React.js is a good framework once you get all of your boilerplate code in place. It makes things easy for developing modern single page web apps. I will definitely be using it again for future projects. Like I said, there are many trends out there but now I think React.js is here to stay.
About 
I use powerful open source technologies and design principles to develop modern websites, mobile apps, and software solutions.
When I work on a project, my aim is to create something that I am proud of, something that captivates, inspires, and brings value.
I have worked on tech related projects ever since I got my schooling out of the way and I enjoy it.
Being a self driven person that aspires to be independent and carve out my own space in the world, I began freelancing in an effort to grow as a problem solver, creative thinker, and discover new opportunities.
Have a great idea or a problem that you believe can be solved with technology? Reach out and let's talk.
Francisco BarcenaFull Stack Web Developer
@losangelescoder