React with webpack

Today, I’d like to show you how I used the awesome React UI library and the module bundler webpack to build an Android app using Cordova.

You can download my app for free!

Check it out, especially if you’re a guitar player.

Lets touch up on webpack briefly. The immediate beauty is the ability for your app to get an entry point. Have you been one of those unlucky folks who had to deal with a plethora of script tags to include your JavaScript code in your index.html? No more!

Here’s a simple webpack config

module.exports = {
  entry: {
    app: __dirname + '/src/index.js',
  },

  output: {
    path: __dirname + '/www/builds',
    filename: 'bundle.js',
  },
};

So index.js will be the first module to be executed. Of course, you should be using babel to get the advantage which JavaScript (ES6) offers. The ability to import modules.

Here’s my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ChordList from './components/ChordList';
import { Router, Route, hashHistory } from 'react-router';

$(document).on('deviceready', function() {

  ReactDOM.render(
    <Router history={hashHistory}>
      <Route path="/" component={ChordList} />
      <Route path="/chord/:chordName/:chordType" component={ChordDiagram} />
      <Route path="/chord_type/:chordName" component={ChordType} />
      <Route path="/help" component={Help} />
      <Route path="/use_cl" component={UseCL} />
    </Router>,
    document.getElementById('root')
  );

});

react-router is essential so the user can use the back button on their mobile status bar to navigate your app. Further on you can use Link tags to navigate to a certain page. Note that although this is a mobile app, we are using Cordova so it is essentially a web app. Personally I am learning react-native right now for any further mobile app development.

Let have a look at a very simple implementation of the ChordList component.

import _ from 'lodash';
import React from 'react';
import { Link } from 'react-router';

class ChordList extends React.Component {

constructor(props) {
  super(props);
}

get_chords() {
  return [ 'C', 'D__flat__', 'D', 'E__flat__', 'E', 'F',
    'G__flat__', 'G', 'A__flat__', 'A', 'B__flat__', 'B',
  ];
}

render() {

    let style = {
      paddingBottom: 35,
    };

    let lis = [];
    let i = 0;

    let a_style = {
      display: 'block', 
      padding: 15, 
      fontSize: '1.2em', 
    };

    this.get_chords().map(c => {

      let c_display = c;

      let row_color = (i % 2) == 0 ? '#dedba7' : '#cdca96';
      lis.push(<li key={i} className="list-group-item" 
                   style={{border: '1px solid #fff'}}>
               <a style={a_style} 
                dangerouslySetInnerHTML={{__html: c_display}}
                href={"#/chord_type/" + c} />
                </li>);
      i++;
    });

    return(
      <div>
        {lis}
      </div>
    );
  }
}

export default ChordList;

I hope you are familiar with ES6 as most of whats happenning like class, let, import, export, map, constructor is all ES6.

The React specifics which you should be aware of is the render() method where we make use of JSX. We loop over the items returned from the get_chords() method and create an li item.

React offers you a very thin UI framework and then gets out of your way. Make sure you create components which are lightweight and deal with a specific UI element/widget and you should be good to go. My app deals with a lot of SVG under the hood, so it is pretty complex. But using React, webpack and Node, brings a lot of sanity to the development workflow.

I also open sourced a Node module during the development of this app which you can check here – guitar-utils

If you need any help or have any questions you can look me up on twitter. Thanks for reading!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s