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.






Changing Password Requirements with SailsJS and Passport

Cross post from my employer's development blog: http://rootinc.github.io/2016/03/16/pass-requirements-sails/

If you perform an installation of [Passport][passport] with [SailsJS][sails] using the [Sails Passport Auth Generator][sails-generate-auth] you get several files in your app already configured for you. If you then use passport-local, you will already have a complexity requirement on the password. It defaults to requiring 8 characters minimum, letters, numbers, and symbols.

What if you want to change this requirement? In the generated model file `Passport.js`, you should see a line that says `provider   : { type: 'alphanumericdashed' },` and `password    : { type: 'string', minLength: 6 }`. The minLength is an easy and obvious change. What about the complexity requirement though? This stumped me for a bit. There doesn’t seem to be any mention of these keywords or providers on the Passport official site, nor anything in the [Passport-local repository][passport…