Posted on October 19, 2015 by Chris Harrington
Tutorial: Build a Time Picker with React JS
I recently wrote a tutorial on how to build a date picker with React JS, so I figured I’d expand upon that and detail how to write a time picker, too. First things first: just like last time, I’ve put the code up on GitHub if you want to see the full monty. I’ve also made an npm package and a bower package for the time picker in case you want to use it on your site somewhere.
Note: The code is far from production ready, so use at your own risk.
If you’d just like to take a look at the time picker in action, I’ve also put together a (really simple) demo page. Take a look!
Posted on July 4, 2015 by Chris Harrington
Creating a Simple Application Using React JS and the Flux Architecture
I’m going to talk about how to create a simple todo application using React JS and the Flux architecture. React JS is making some waves in the community recently due to its alleged performance increases over other heavy favourites (like Angular JS), especially when it comes to writing out lists. I’m not so concerned with performance, but I am interested in how to write an application that’s easy for the user to use while at the same time being quick to get off the ground.
Posted on May 11, 2015 by Chris Harrington
Testing a React project with Karma and Webpack
Posted on May 7, 2015 by Chris Harrington
Webpack with LESS and React
I’ve recently been playing around with Webpack and I really like it. It has the benefits of Browserify in that you can specify an entry point that’ll pull in all of your
required modules into a single bundle with optional minification, while also letting you bundle your style together in your modules. For example, I can
require a style file for a particular module right from the module itself, which allows me to somewhat limit the global nature of CSS rules. On top of that, Webpack allows us to leverage LESS in these included style files, too, that get compiled down to CSS. I’m a huge fan of this, as it allows us to create less coupled modules in that each style file can be tied directly to a module, and only gets pulled in when its required. Webpack also utilizes what they call “loaders”, which are basically preprocessors that perform various tasks. For example, there’s a LESS loader to convert LESS into CSS, and a JSX loader to perform a similar conversion for React classes.
Posted on January 26, 2015 by Chris Harrington
Performance of AngularJS, ReactJS and KnockoutJS Compared
I’ve put together a quick page that allows you to see the rendering time difference between the three frameworks, plus the raw DOM manipulation. It’s what I’ve been using to figure out how long each framework takes to render large lists, as seen in the results table below. Take a look here.
Posted on January 16, 2015 by Chris Harrington
Comparison: AngularJS vs ReactJS
I’m going to walk through how to create the typical coding example using each of the frameworks. Once I’ve done that, I’ll move on to some more complicated UI controls, building up our little app as we go.