發表文章

目前顯示的是 8月, 2017的文章

react 存取 firebase 即時資料庫

圖片
延續上篇  如何發布 react 專案到 firebase 本篇將討論當成功將 react 部署至 firebase 後,該如何存取 firebase 提供的即時資料庫 閱讀文章前,請先確定 對 react 有基本了解,至少知道 react 是什麼 已閱讀過  如何發布 react 專案到 firebase 我們將分成三個步驟討論 建立 firebase 即時資料庫連線 在 react 建立表單(form),供新增資料至資料庫 更新頁面,顯示資料庫內容 步驟一 建立資料庫連線 進入 firebase console 底下的 react-firebase-sample 專案並點選“將Firebase加入您的網路應用程式“ *專案名稱請參考在  如何發布 react 專案到 firebase   中建立的名稱 此時 Firebase 便會提供一組設定供存取 Firebase api 使用 其中 config 包含了所需要的設定,之後會需要使用到。 開啟 react 專案,並在 src 目錄底下新增一個 fire.js 檔案,內容如下 fire.js 引用 firebase 模組進行設定並初始化。之後就可以利用它來存取 firebase firebase api 請透過 npm install firebase --save 安裝 請把 config 中的內容置換成 firebase console 中所提供的內容。 步驟二 建立表單 如上圖所示,我們將會建立一個極簡易的表單,只包含一個輸入訊息的 Input 以及一個送出資料的按鈕。 開啟 react 專案中 src/App.js 將內容置換為 然後執行  npm start  網頁就會運行在 http://localhost:3000 的位置。當按下提交時,訊息就會被清空。而我們的目的是當輸入完內容並按下提交後,訊息便會新增至 firebase 資料庫中,因此我們必須要修改 addMessage 這個函數讓資料能夠送到 firebase。 首先,引用 fire.js 並在 addMessage 中,將訊息新增到資料庫 完成後重新整理頁面並嘗試新增一筆資料後應該會發現權限不足無法新增資料

如何發布 react 專案到 firebase

圖片
在本篇文章中,我們將會討論到兩個重點 如何透過 create-react-app 這個指令建立 react 專案 如何將 react 專案發布至 firebase 在閱讀文章之前,請先確定 對 react 有基礎的了解,至少知道 react 是什麼 系統中已經安裝 npm 與 nodejs 知道如何使用指令 (command line) 我們將分成三個步驟討論 建立 firebase 專案 建立 react 專案 發布至 firebase 步驟一 建立 firebase 專案 首先,連結到 firebase console ,並新增一個專案,名稱(react-firebase-sample)與地區(台灣)可自訂 專案建立成功後,請記得專案的名稱,後面步驟會需要用到 *目前 firebase 有提供 免費方案 ,所以不用擔心會有額外花費 步驟二 建立 react 專案 首先請確認已安裝 create-react-app。如果還沒有安裝過可以透過  npm i -g create-react-app  進行安裝並利用  create-react-app -V  來確認版本。 接下來執行  create-react-app react-firebase  來建立 react 專案 * react-firebase 為專案名稱, 可自訂  接著就會看到 create-react-app 幫我們自動建立 react 專案並安裝需要的模組。完成後,進入 react-firebase 資料夾(資料夾名稱就是透過 create-react-app 建立專案時的名稱)並執行 npm start  就可以看到 react 已經成功運行在 http://localhost:3000  的位置。 同時,react 也會開啟瀏覽器 這樣就表示 react 專案已經被成功建立。 步驟三 發布至 firebase 接下來準備發佈至 firebase。由於 react 預設會運行在開發模式(development mode)我們如果要將專案發布至正式環境(例如 firebase),通常會將專案進行最佳化,刪除一些不必要的檔案,並進行精簡以利達到最佳的執行狀況。我們可以透過 np