Use Johnny-Five with React

Question

I would like to use Johnny-Five and create an interface with React JS.

I used this React setup tutorial. I installed Johnny-Five in the same project: http://johnny-five.io/ (Johnny-Five works very well alone, in standalone apps. This allows me to control my Arduino).

My React index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MainRouter from './routes';
import registerServiceWorker from './registerServiceWorker';
import five from 'johnny-five';

var board = new five.Board({
  port: "/dev/ttyACM0" 
});

board.on("ready", function() {
  var led = new five.Led(13);
  led.blink(500);
});

ReactDOM.render( <MainRouter />, document.getElementById('root'))
registerServiceWorker();  

When I run React, the site starts but the board does not react! While the same code without React works perfectly well. Any idea to make Johnny-Five work with React?

Answer 1

The issue is, Johnny Five (J5) cannot be natively run from the browser. J5 needs access to ports on your computer which the browser (for security reasons) does not allow. My theory is when you say you "run without React", you are running via a NodeJS console (and not just removing the React portion of code and re-running in the browser). NodeJS applications run in a different context then browser scripts.

So how do you achieve your goal? You have a couple options that I can think of.

Option 1:

First, write a NodeJS Desktop application. Desktop applications give you the runtime context you need (access to ports) while providing you with the graphical user interface (GUI) you were hoping for with a web application. You can do this with Node Webkit, AppJS, or a few others (just google NodeJS Desktop Applications). The great thing about these Desktop applications is the GUI is written in HTML and CSS. So it's just like a web page, it just isn't run in the browser (or not the browser you'd expect).

Option 2:

Perhaps you really do want a web application (maybe you want a webpage others can access and control your Johnny Five bot). In this case, you will need to write two systems. The first is the web client (which you were already working on with your React code). The web client will not have any Johnny Five code. The second system you will need to write is the web server. The server will handle all the Johnny Five code. Your client will have an interface (buttons, text inputs, etc...). When the user clicks a button, you send a request to the server. The server handles this request by calling the proper Johnny Five code. Here's an extremely simplified example.