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 來設計天罰貓的原型。