Use Johnny 5 with a reaction

Question

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

I used this "Setup Guide" . I installed Johnny-Five in the same project: http://johnny-five.io/ (Johnny-Five works very well in standalone applications, which 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 launch React, the site starts, but the board does not respond! Although the same code works fine without React. Any idea to get Johnny-Five to work with React?

Answer 1

The problem is that Johnny Five (J5) cannot be initially launched from the browser. J5 needs access to ports on your computer that the browser (for security reasons) does not allow. My theory is that when you say that you are running “reagent-free,” you launch the NodeJS console (rather than just deleting part of the React code and re-launching it in the browser). NodeJS applications run in a different context, and then in browser scripts.

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

Option 1:

First write the NodeJS Desktop app. Desktop applications provide you with the necessary runtime context (access to ports) by providing you with the graphical user interface (GUI) you were hoping for with a web application. You can do this using Node Webkit , AppJS, or several others (Google Apps NodeJS Desktop only). The great thing about these desktop applications is the graphical interface written in HTML and CSS. So it's just like a web page, it just doesn't launch in the browser (or the browser you expect).

Option 2:

Maybe you really need a web application (maybe you need a web page that others can access and manage your Johnny Five bot). In this case, you will need to write two systems. The first is the web client (with which you have already worked with your React code). The web client will not have the Johnny Five code. The second system you will need to write is a web server. The server will process all Johnny Five code. Your client will have an interface (buttons, text inputs, etc.). When the user clicks the button, you send a request to the server. The server processes this request, calling the correct Johnny Five code. An extremely simplified example is given here.