Today, we are going to build a Wikipedia viewer using React and Webpack in tandem. If you are not familiar with React at all, I recommend that you go through the introductory material first, it’ll save you a headache!
Additionally, we are going to be using ES6 class syntax for creating components, as this is the way React is heading towards. The previous tutorial in this series goes into more detail, so go ahead and take a look if you’d like. Let’s get our hands dirty then…
Applications grow in size and complexity by the day, and as new needs arise, new tools do too. Bower is one of them, let me tell you about it.
One day, you’re just bringing in jQuery into your nice little project, and then, suddenly, in a weeks time, you need to keep track of a framework, plugins, JS and CSS libraries and whatnot for this other side thing you’re doing. You may just keep a long txt file with a list of CDNs or an overloaded library folder with all of your favorite resources, and that is okay. You’re just missing out on the greatness of Bower, your new best friend.
Today, I’m going to show you the power of NPM and Bower working in tandem. I’ll expand on this in future posts by bringing in a few more tools (Gulp/Grunt, RequireJS, Webpack/Browserify) that you’ll surely find useful, I promise!
Bower is a very handy tool that fetches and brings in anything that you need for your project. That means libraries, frameworks, assets and, according to the official site, rainbows too. Anything that you may ever need is a few keystrokes away.
Before we get into the matter though, we need to get a couple dependencies set up; namely: NPM (Node Package Manager) and Git. Let’s get started.
This time, we are going to build our own Pomodoro Clock. No, this is not a Pomodoro, it’s actually a Commodore:
The Pomodoro clock has it’s own history, which is somewhat irrelevant to us at this point, but bear with me while I take you in a journey through time and space, a time of… Nevermind, it’s really just a clock. Actually, not even a clock, but a timer that allows us to set a few parameters. Namely: Pomodoro cycle time (25 min default) and break time (5 min default).
As a note, I will mention that we are not going to be using jQuery or any other library in this process. At the end of this post, you can find links to a live version of this exercise, along with an AngularJS and React version.
StartJS 