Skip to main content

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.

Comments

Popular posts from this blog

Quick Deepstream.io Setup Using JSPM

Cross post from my employer's development blog: http://rootinc.github.io/2016/02/12/deepstream-jspm/
Want to use JSPM rather than Bower for running the Deepstream.io example? Follow these steps. This is basically a duplicate of the [Getting Started tutorial][tutorial] on the [Deepstream.io website][website] but using a really simple JSPM setup. This is a very crude guide where I list everything I had to do to get things running.

Create an empty project folder npm install deepstream.io Copy server code verbatim from the Getting Started guide jspm install npm:deepstream.io-client-js Hit enter for all the prompts from JSPM

We’re going to modify the client side code a little bit. We have native support for ES6 compiling with JSPM/Babel so we can import the Deepstream client directly:

import deepstream from 'deepstream.io-client-js'; let ds = deepstream( 'localhost:6020' ).login();

let record = ds.record.getRecord( 'someUser' );

let input = document.querySelector( 'inp…

Atari E3 2004 PAL digital press kit

Making note of some old swag. The Atari E3 2004 PAL digital press kit. See video for details.






Fancy FTP Deployment with Grunt

I recently dove into Grunt.js at work for automating our build process and I haven’t looked back. It’s an awesome tool with a plug-in for just about anything. I expected the usual would be there like JavaScript minification and concatenation, but I was surprised at a few others that I found, one being for FTP file deployment. Just shows how popular and community supported Grunt is.

There are a few FTP plug-ins available for Grunt. I didn’t do an analysis of all of them but ran across grunt-ftp-push which seemed to do what I needed so I decided to try it out. A simple ftp-push setup to upload an entire project via FTP could look like this:

grunt.initConfig({ftp_push:{all:{options:{host:'example.com',port:21,dest:'/project/path/',username:'user',password:'pass'},expand:true,cwd:'dist',src:['**/*','!**/*.zip']}}});
Some details here: I opted to put the username and password in the main config rather than using an .ftpauth file. The …