I’m a web and mobile software developer based out of Kitchener, Ontario. I’m currently working for Threadflip.

In the past, I helped build batman.js at Shopify.

Before that, I worked for Causes, building products that helped charities raise a lot of money.

I graduated CS with a minor in psychology from Waterloo.


Plugging React into Chaplin.js

06 Jan 2014

In this post we'll start plugging React into Chaplin.js.

To start, clone the standard Chaplin boilerplate:

mkdir playing-with-react
cd playing-with-react
brunch new gh:paulmillr/brunch-with-chaplin

Then fire up the app:

brunch watch --server

And head over to localhost:3000. You should see the example Chaplin app.

Now add React to bower.json:

bower install react --save

Now to get React going we will change the behavior of the homepage view.

Change app/views/home/home-page-view.coffee to:

View = require 'views/base/view'

# Define a react component named HomePage.
HomePage = React.createClass
  # Set the initial message.
  getInitialState: -> message: "<enter name>"

  # Change the message on keyup.
  onKeyUp: (e) ->
    @setState message: e.target.value

  # Render the component.
  render: ->
    {div, input, p} = React.DOM

    (div {}, [
      (p {}, "Hey there, #{@state.message}"),
      (input {type: "text", onKeyUp: @onKeyUp})

module.exports = class HomePageView extends View
  autoRender: true
  className: 'home-page'

  # Rather than rendering a template, render the HomePage component.
  render: ->
    React.renderComponent HomePage(), @el

For an explanation of the syntax in HomePage#render function, see here. It is just CoffeeScript.

That is all for now. We have got React working as the V in the MVC of a Chaplin app!