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.
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');
/*
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');