Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/iamdustan/react-hardware

A React renderer for Hardware.
https://github.com/iamdustan/react-hardware

Last synced: 4 days ago
JSON representation

A React renderer for Hardware.

Lists

README 

        
# React Hardware



[![Build Status](https://travis-ci.org/iamdustan/react-hardware.svg?branch=master)](https://travis-ci.org/iamdustan/react-hardware)



React Hardware enables you to build firmata-based hardware applications using a

consistent developer experience based on JavaScript and React. The focus of

React Hardware is on developer efficiency across all the platforms you care

about - learn once, write anywhere.



**React Hardware is a IoT and Robotics programming framework developed by Dustan

Kasten. Being based on firmata, it is capable of providing feature parity with

alternative tools such as Johnny-Five.**



Note that this is currently alpha software and hasn’t been tested or have many

features implemented. It currently supports firmata’s `digitalWrite` and

`analogWrite` methods. Full support for firmata is coming including an event

system to receive feedback from the board and manipulate state as a result of

that.



## Hello World



The "Hello World" program of microcontrollers is to "blink an LED". The

following code demonstrates how this is done naively with React Hardware and how

React’s programming model brings composability to the hardware world.



``` javascript

import React from 'react';

import ReactHardware, {Led} from 'react-hardware';



const HIGH = 255;

const LOW = 0;



class Application extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: 0};

    this._timer = null;

  }



  componentDidMount() {

    this._timer = setInterval(_ => (

      this.setState(prevState => ({value: prevState.value === HIGH ? LOW : HIGH}))

    ), this.props.interval);

  }



  componentWillUnmount() {

    clearInterval(this._timer);

    this._timer = null;

  }



  render() {

    return (

      

    );

  }

}



var PORT = '/dev/tty.usbmodem1411';

ReactHardware.render(, PORT);

```



While this is unquestionably more code than it’s Johnny-Five or Sketch

equivalents, this now gives you the ability to extract the parts of your board

into self-contained components and compose these together. In this application

we introduced the concept of a flashing LED, hard-coded naively into the global

state. Let’s now extract the idea of a flashing LED into something we can share

with our team or even on npm.



``` jsx

import React from 'react';

import ReactHardware, {Board, Led} from 'react-hardware';



const HIGH = 255;

const LOW = 0;



class FlashingLed extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: 0};

    this._timer = null;

    this.defaultProps = {

      interval: 1000,

    };

  }



  componentDidMount() {

    this._timer = setInterval(_ => (

      this.setState(prevState => ({value: prevState.value === HIGH ? LOW : HIGH}))

    ), this.props.interval);

  }



  componentWillUnmount() {

    clearInterval(this._timer);

    this._timer = null;

  }



  render() {

    return (

      

    );

  }

}



class Application extends React.Component {

  render() {

    return (

      

        

        

        

        

      

    );

  }

}



var PORT = '/dev/tty.usbmodem1411';

ReactHardware.render(, PORT);

```



## Community



There should be #react-hardware channels created on both

https://reactiflux.com/ and IRC.



## Contributing



The codebase is written in es6 with (sporadic) types and compiled with babel.

Follow the existing style when creating changes. Eslint and the flow type

checker will be set up shortly. While the project is under heavy active

development it would be useful to make an issue discussing your change before

making a PR to ensure we aren’t duplicating effort.



## License



Copyright (c) 2015 Dustan Kasten | [email protected]

Licensed under the MIT license.