描述

React 和強(qiáng)尼五號交通燈

一個簡單的項目，涉及使用 Johnny-Five 和 React 來控制一組燈，使用動作和函數(shù)來控制它們并為其設(shè)置動畫。這是我發(fā)布的（不完美的）作品。這實際上是我制作的第一個使用 JavaScript 構(gòu)建 IoT 應(yīng)用程序的項目。

電路

為此，電路非常簡單——它由 3 個 LED（紅色、黃色和綠色）組成，就像一組交通燈。

?

?

組件列表

• Arduino Uno（實際上，任何 Arduino 都可以）

• 面包板（最好是帶有側(cè)軌的電源）

• 3 個 LED（1 個紅色、1 個黃色、1 個綠色）

• 3 220歐姆電阻

• 8根彩色跨接電纜（5根黑色跨接電纜用于接地）

圖表

該圖非常簡單——將每個 LED 分別連接到引腳 11、10 和 9，以及每個 LED 的 220 歐姆電阻。記住要接地，這樣電路才能工作！總而言之，電路組裝起來非常簡單。

安裝中

你可以使用 NPM 或 Yarn 來安裝和使用應(yīng)用程序，雖然我推薦 yarn，它對于依賴管理非常好。

您可以執(zhí)行npm install 或yarn install 下載應(yīng)用程序的所有依賴項。

命令

您可以使用各種命令來運行該應(yīng)用程序，從構(gòu)建、開發(fā)到測試。同樣，您可以使用 Yarn 或 NPM 來運行該應(yīng)用程序。

命令列表

start — 啟動應(yīng)用服務(wù)器（注意：build 先運行！）build — 為生產(chǎn)環(huán)境構(gòu)建應(yīng)用dev-start — 在開發(fā)環(huán)境下啟動應(yīng)用服務(wù)器dev-server — 為客戶端 React 應(yīng)用運行 Webpack 開發(fā)服務(wù)器styles — 構(gòu)建應(yīng)用樣式（使用 PostCSS ) test — 運行 ESlint 和 Flow 來檢查代碼是否存在問題。

關(guān)于作者

Iain是一位患有阿斯伯格綜合癥的開發(fā)人員、設(shè)計師和藝術(shù)家，他擅長創(chuàng)造事物，并且對所有有創(chuàng)意的事物都著迷。他喜歡嘗試代碼、看板和數(shù)字藝術(shù)。

支持作者！

在 Twitter 上關(guān)注，在 Facebook 上關(guān)注，并在 Patreon 上向 Iain 承諾！