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: 1 day ago
JSON representation
A React renderer for Hardware.
- Host: GitHub
- URL: https://github.com/iamdustan/react-hardware
- Owner: iamdustan
- Created: 2015-05-13T18:01:21.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:54:21.000Z (about 2 years ago)
- Last Synced: 2024-10-20T12:40:05.489Z (3 months ago)
- Language: JavaScript
- Homepage: http://iamdustan.com/react-hardware
- Size: 1.34 MB
- Stars: 800
- Watchers: 22
- Forks: 41
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-nodebots - React Hardware
- awesome-github-star - react-hardware
- awesome-react-renderer - react-hardware - React Hardware enables you to build firmata-based hardware applications using React. (Hardware)
README
# React Hardware
[](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.