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