Arduino, JohnnyFive, and React




Introduction: Arduino, JohnnyFive, and React

Johnny Five Node JS server with connecting Arduino to React

I wanted to make my Arduino flash certain green or red LEDs, triggered by certain sensors and then show that in a React app at the same time. Also, in the React App web page, I wanted to click a button and then see that trigger LEDs on the Arduino. I found that one could use to do this, with the one Johnny Five JS node + server talking to the Arduino and via talking to the React JS Node app.

So, we're creating a mashup of:



What to do:


- Download Arduino IDE

- Plug in your Arduino or Arduino compatible microcontroller via USB

- Open the Arduino IDE, select: File > Examples > Firmata > StandardFirmataPlus

-- StandardFirmataPlus is available in Firmata v2.5.0 or greater

- Click the "Upload" button.

If the upload was successful, the board is now prepared and you can close the Arduino IDE.


- Git clone and cd j5-arduino-react

Then each from their own separate terminal:

Terminal 1:

- cd socket-io-server
- yarn install
- node app.js

Terminal 2:

- cd socket-io-client
- yarn install
- yarn start

While developing, as the client and server use specific ports, you may need to stop of all nodes and restart. - `killall -9 node` in the socket-io-server folder and restart both the server `node app.js` and `yarn start` the client.

If you find some lights not working, double check the pins assigned. I hope the Fritzing diagram helps.

What does it do?

- You should see a Button, that temporarily stops the client from connecting to the socket server.

- There is a "light" sensor showing the amount of light data from from the photo resistor.

- When the Arduino board first starts it has some LEDs flashing.

- The LED status is shown as on or off. Once the node server and react app has loaded, you should be able to click the Toggle LEDs button and the Red, Green and Blue LEDs should light up for 5 seconds.

- There is a temperature display.

## References:

Fritzing Diagram:

Here's a Video of the App running:


1 Person Made This Project!


  • Big and Small Contest

    Big and Small Contest
  • For the Home Contest

    For the Home Contest
  • Make It Bridge

    Make It Bridge



2 years ago

I'll add a Fritzing diagram as soon as I can.