I Migrated A Project To ReactJS For The First Time And Didn't Die
Before I start: a note on Javascript fatigue
Amongst all the negativity over the past year of “Javascript fatigue”, it’s become quite trendy to hate on the Javascript community, which is a true shame. It demotes the significant effort that many incredibly talented developers have put into creating a utopian modular ecosystem whilst still maintaining compatibility with the Web.
Maintaining compatibility with the most hostile application runtime environment is no mean feat, so it’s hardly surprising that we’ve had a few years of churn - read this for a good overview of the past ten tumultuous years of Javascript.
I found it a lot easier to deal with the huge amount of flux (no pun intended) going on in the Web world by avoiding boilerplates, and investing some serious time into learning how to configure some of this stuff myself.
But it wasn’t until my good friend @tommarmstrong lectured me (nicely) on the technical debt of using someone else’s Webpack boilerplate that I started realising how easy some of this stuff can be. I can’t emphasise that enough - 90% of React/Redux/xJS boilerplates you’ll find have a convoluted amount of configuration that you probably won’t need for at least two months of the project’s life.
Now onto the project
My main aim for this weekend was to improve an open-source Github project by submitting a pull request, so I can get my PR count up to 4 for Hacktoberfest.
I found a neat little webapp that displays Hackernews articles in a tastefully minimalistic way. It had some open Hacktoberfest issues, including the move to ReactJS.
Fortunately for me, the developer had already written much of the logic of the application in a way that imitates ReactJS’s unidirectional data flow, so it was a simple case of initialising the application as a NodeJS package, configuring the build tools, and rewriting the application components as React components.
At this point I’ll remind you of many developers who wince at the thought of having to use build tools for Javascript. Maybe you’re one of them. I’ll then remind you that you won’t get very far with many other serious languages without a build tool of some sort, and that the advantages (readability, certainty that your code will be free of syntax errors before deployment, static type analysis and rigorous code standard settings) vastly outweigh the disadvantages (speed of development, initial complexity).
Anyway, lets get to it. Note that I assume knowledge of how to write ReactJS code - there are some excellent guides out there; I’d say that Dan Abramov’s set of articles being a stellar place to start out after the official Reactjs tutorial.
- Install NodeJS/npm, preferably version 6.
- Type “npm init” in your folder
- Set up and read about Webpack using github/petehunt’s brilliant Webpack tutorial
- Embed your bundle.js in your index.html file and add the root DOM node for Reactjs to attach itself to.
- Fin
Wasn’t that difficult, was it?
For more, check out my modified repository - a minimal domain project like this is a great way to start understanding the architectural makeup of a ReactJS application.