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 中，將訊息新增到資料庫 完成後重新整理頁面並嘗試新增一筆資料後應該會發現權限不足無法新增資料
