Learning React: Part 1

I recently decided to start learning React for a new project at my employer. I’m going to try to post some of my findings along the way with the hopes that someone will find them useful. First, starting with a good up to date template is important. Things move so fast at the bleeding edge, a template can die in just a couple months. I wanted something integrated with SailsJS since I recently learned that, liked it, and needed a simple back-end for this new project. Despite how long Sails has been out, there doesn’t seem to be an up to date generator/template for Sails + React.

Side note, a fellow developer recommended react-hot-boilerplate to start with. It doesn’t come with a server back-end like Sails but it does appear to be better maintained than the other templates.

I started messing around with sails-generate-reactjs. Starting out, I really liked it. However, the repository has not been updated for about 3 months now and the author does not seem to be active on it any longer. Thus, it’s already outdated, such as its use of the deprecated grunt-react package. This initially didn’t give me too many issues on a side project using it in a Linux environment on Nitrous.io, however I started having transpiling issues on Windows at work.

Those weren’t too hard to mitigate though. I simply installed babelify and modified the “transform” option in “tasks/config/browserify.js” from
transform: [require('grunt-react').browserify]” to transform: [require('babelify')]

Modifying more to “require(‘babelify’).configure({stage:0})” permits all supported ES6/7 features in Babel. Beyond that though, I can now also switch to using the somewhat cleaner (IMO) module syntax such as “import React from ‘react’;” instead of “var React = require(‘react’);”.

I’m still having some issues with the asset pipeline not running as expected but I hope to clean those up soon.