brigand

import React from 'react';
import MapBox from './Map.jsx';

var Component = React.createClass({
  getInitialState: function() {
    return {
      data: {
        x: 0,
        y: 0
      }

brigand

show(status, slotId, carStatusTypeInfo) {
    var typeIdForCar = '';
    if (typeof status === 'undefined') {
        var types = ['ACTIVE', 'DISABLED', /* ... */];
        typeIdForCar = types.reduce(function(value, type){
            return value || this.getTypeIdForCar(carStatusTypeInfo, type);
        }, '');
    } else {
        typeIdForCar = this.getTypeIdForCar(carStatusTypeInfo, status)
    }

brigand

import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'
import NotFound from './components/NotFound'

brigand

import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'

brigand

Unlike mixins, high order components are isolated and communicate via props. They wrap a component instead of modifying it, and with the pattern we'll use, you can clearly see which props come from the high order component.

But often you'll have a library that only provides mixins. Luckily it's easy to convert them.

We'll use the react-router Navigation mixin. To make this more flexible we'll use [react-propmatch][2], which avoids issues with string prop name conflicts.

brigand

import React, {PropTypes} from 'react';

export default class Input extends React.Component {
  static propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func,
    component: PropTypes.string,
  };
  static defaultProps = {
    component: 'textinput',

brigand

io.js on raspberry pi

installing io.js is now really easy thanks to the io.js and nvm team. They provides prebuilt binaries for arm.

get the system up to date

io.js require packages that are not available on the standard (Wheezy) need to change to Jessie. Update your package url

brigand

render(){
  return (
    <div>
      <div className="header">
        <h2>Im always diffed along with the className on my parent</h2>
      </div>
      <ul className="list">
        {this.props.foo.map((x, i) => {
          /*
            React sees this:

brigand

/*
  A widget that will appear when the screen reaches a certain size. Allows opening and closing of a sidebar.
  100% pure, vanilla JavaScript and CSS.
*/
(function(){
    var Badge = function(target, placement) {
	var self = this;
	this.target = target;
	this.placement = placement;
	

brigand

var breadOne = {};
breadOne.name = "White";
breadOne.type = "Flour";
//why make vars inside the constructor Bread if I can add more here like this?
breadOne.whatever = "another option";