README.md

react-arduino

React has revolutionized the way we write user interfaces. It brings an extremely simple mental model to the authoring of UIs. React-native, react-canvas, and other projects have shown us that this model extends beyond the browser DOM.

I believe that this functional, predictable approach can also revolutionize how we build real-world user interfaces.

Example API

Let’s begin by transposing the Arduino’s Blink tutorial (http://arduino.cc/en/Tutorial/Blink).

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.

  This example code is in the public domain.
 */

// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}

Now in react-arduino this would look like the following:

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.
 */
var React = require('react');
var ReactArduino = require('react-arduino');
var {Board, LED} = ReactArduino;

var Program = React.createClass({
  getInitialState() {
    // voltage between 0-255
    return {voltage: 0};
  },

  componentDidMount() {
    var voltage = this.state.voltage === 255 ? 0 : 255;
    this.state._interval = setInterval(() => this.setState({voltage}), 1000);
  },

  componentWillUnmount() {
    clearInterval(this.state._interval);
  },

  render() {
    return (
      <Board>
        <LED pin={13} voltage={this.state.voltage}
      </Board>
    )
  }
});

ReactArduino.mount(<Program />, '/dev/cu.usbmodem1411');

Which, let’s be honest, is a much more verbose way of writing that. But now we have the power to make our LED much more composable.

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.
 */
var React = require('react');
var ReactArduino = require('react-arduino');
var {Board, LED} = ReactArduino;

var FlashingLED = React.createClass({
  getInitialState() {
    // voltage between 0-255
    return {voltage: this.state.initialVoltage};
  },

  getDefaultProps() {
    return {interval: 1000, delay: 0};
  },

  componentDidMount() {
    var voltage = this.state.voltage === 255 ? 0 : 255;
    var start = () => {
      this.state._interval = setInterval(
        () => this.setState({voltage}),
        this.props.interval
      );
    };

    setTimeout(start, this.props.delay);
  },

  componentWillUnmount() {
    clearInterval(this.state._interval);
  },
});

var Program = React.createClass({
  render() {
    return (
      <Board>
        <FlashingLED pin={13} interval={1000} />
        <FlashingLED pin={14} interval={1000} delay={500} />
      </Board>
    )
  }
});

ReactArduino.mount(<Program />, '/dev/cu.usbmodem1411');

Getting trickier with a Wii Remote

/*
  Turns on an LED while pressing a Wii Remote button, turns off on release.
 */
var React = require('react');
var ReactArduino = require('react-arduino');
var {Board, LED} = ReactArduino;
var Wii = require('react-arduino-wii');

var Program = React.createClass({
  getInitialState() {
    return {voltage: 0};
  },
  handlePress() {
    this.setState({voltage: 255});
  },
  handleRelease() {
    this.setState({voltage: 0});
  }
  render() {
    return (
      <Board>
        <LED pin={13} voltage={this.state.voltage} />
        <Wii onDown={this.handlePress} onUp={this.handleRelease} />
      </Board>
    )
  }
});

ReactArduino.mount(<Program />, '/dev/cu.usbmodem1411');