使用Johnny-Five與React

我想使用Johnny-Five並創建一個與React JS的接口。使用Johnny-Five與React

我用這個React setup tutorial。我在同一個項目中安裝了Johnny-Five：http://johnny-five.io/（Johnny-Five在單獨的應用程序中獨立工作，這使我可以控制我的Arduino）。

我的陣營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();

當我運行反應，該網站啓動，但董事會沒有反應！雖然沒有React的代碼工作得很好。任何想讓Johnny-Five與React一起工作的想法？

來源

2017-10-28 Julien

當你說相同的代碼沒有React時，你的意思是它可以從你的瀏覽器中運行嗎？或者你是通過與NodeJS的控制檯運行它？ – Spidy

問題是，Johnny Five（J5）不能從瀏覽器本地運行。 J5需要訪問計算機上瀏覽器（出於安全原因）不允許的端口。我的理論是，當你說你「沒有React運行」時，你正在通過NodeJS控制檯運行（而不僅僅是刪除React部分代碼並在瀏覽器中重新運行）。 NodeJS應用程序在不同的上下文中運行，然後是瀏覽器腳本

那麼你如何實現你的目標？你可以選擇一些我能想到的選項。

選項1：

首先，寫一個桌面的NodeJS應用。桌面應用程序爲您提供您需要的運行時上下文（訪問端口），同時爲您提供您希望用於Web應用程序的圖形用戶界面（GUI）。您可以使用Node Webkit，AppJS或其他一些（僅適用於Google NodeJS桌面應用程序）。這些桌面應用程序的優點是GUI以HTML和CSS編寫。所以它就像一個網頁，它只是不在瀏覽器（或不是你期望的瀏覽器）中運行。

選項2：

也許你真的想要一個Web應用程序（也許你想要一個網頁，其他人可以訪問和控制您的約翰尼五BOT）。在這種情況下，你需要編寫兩個系統。首先是網絡客戶端（您已經在使用您的React代碼）。 Web客戶端不會有任何Johnny Five代碼。您需要編寫的第二個系統是Web服務器。服務器將處理所有Johnny Five代碼。你的客戶端將有一個界面（按鈕，文本輸入等）。當用戶點擊一個按鈕時，你發送一個請求到服務器。服務器通過調用正確的Johnny Five代碼來處理該請求。這是一個非常簡化的example。

來源

2017-10-31 07:42:26 Spidy

使用Johnny-Five與React

回答

相關問題