iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

Node-Red 貓的真實之口系列 第 11

Node-Red 貓的真實之口-React 基礎觀念與開發工具 2

React 線上開發基礎建設

嗨各位開發者晚上好,昨天熬夜到幾點呢?

上篇文章我們介紹了如何利用非常熱門的 create-react-app 一鍵建立 React 專案。然而,有些人提到,如果自己的開發環境不方便安裝 NodeJS,還有什麼替代方案嗎?

這篇文章會介紹一個線上版的 React 專案開發環境 -- CodeSandbox

CodeSandBox 是我遇過體驗最好的線上編輯器

CodeSandBox (以下簡稱 CSB) 顧名思義,就是程式碼的沙盒執行環境。
程式碼會運作在雲端,並且提供你一個公開的網域來連接。
除了原始的瀏覽器執行環境,他還支援 create-react-app 樣板
你可以用它來建立一個幾乎與本地端一樣的 React 開發環境。

體驗看看吧:https://codesandbox.io/s/new

或是一個完全不需要下載的 Todo App

基本的 CRA 功能都有

  • CSB 也會建立一個 hot reload dev server。
  • 也可以下載第三方 NodeJS 套件
  • 也有 terminal 可以印出錯誤訊息

聰明的編輯器

CSB 提供許多 Visual Studio Code 核心功能來增進開發體驗,像是

  • 根據物件屬性自動補完 (auto complete)
  • 支援 prettier 來幫你自動整理程式碼格式
  • 支援多個分頁,VSCode 佈景主題
  • VSCode 程式碼片段
  • 協同編輯
  • 支援從 GitHub 匯入

更多功能請看 CodeSandbox 官網

擁抱開源的線上編輯器

CSB 目前支援免費版(上限 50 個沙盒)和付費版(沙盒無上限)。
此外,它的客戶端是開源的,如果你喜歡它的話,除了付費購買,還可以貢獻這個專案讓它更好。

未來筆者也會盡量使用 CSB 來設計天罰貓的原型。


上一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 1
下一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 - 3
系列文
Node-Red 貓的真實之口13

尚未有邦友留言

立即登入留言