---
tags: SideProject, Firebase
---

# React+Firebase 實踐讀書會網站

前置作業
- 安裝node.js

1. 建立firebase專案



2. 設定storage
要先開啟storage，不然init時會報錯


往下捲到這裡

先使用測試模式，方便開發

如果畫面跟我的長得不一樣
可以嘗試一下以下的作法
1. 切換database旁邊，變cloud Firestore
2. 回到主控版，再連進來一次

3. 設定資料庫名稱

booking - 存課程資料
memberCard - 存會員資料
一定要有第一筆資料才可以開啟db，可以先隨便放個test，，，

4. setting


4. create-react-app

`
npx create-react-app YOUR_PJ_NAME
`
會有一段安裝期...請耐心等待

安裝完後會出現這些資料夾

可以先用`yarn start` 或`npm run`
啟動你的create-react-app看看，若成功跑出以下頁面於瀏覽器，就表示有創見成功。

進到下一步之前，
請先cd(移動)到你的create-react-app資料夾中喔

3. 為專案安裝所需的套件
- 安裝 firebase
- `npm install firebase` or `yarn add firebase`
- 安裝sass　：css編譯
- `yarn add node-sass`
- 安裝dayjs：時間日期套件
- `npm install dayjs --save` or
- `yarn add dayjs --save`
- css frame [material ui](https://material-ui.com/getting-started/installation/) :

    // with npm
    npm install @material-ui/core

    // with yarn
    yarn add @material-ui/core

還需要另外裝icons的
`yarn add @material-ui/icons`

- classNames : react className好用的管理器
- `npm install classnames —save`
- redux:

yarn add redux  
yarn add react-redux  
yarn add redux-thunk 
yarn add react-router-dom  

- [react-clipboard.js](https://www.npmjs.com/package/react-clipboard.js?utm_source=recordnotfound.com)
`npm install clipboard --save`

3. 連結firebase到專案中
`npm install -g firebase-tools`

4. 與firebase雲端連結
`firebase login`
跳出視窗授權google帳號連結，
連結過一次之後，後面就會直接連結好了

5. 初始化firebase

`firebase init`

專案會用到database 及 hoisting
用上下鍵移動，空白鍵可以選擇
enter鍵進到下一步

連結剛剛建立好的project
使用build 資料夾作為上傳到firebase的資料夾

Configure as a single-page app (rewrite all urls to /index.html)? Yes

完成後資料夾會出現firebase相關設定及檔案

6. 把檔案貼進src資料夾
7. 找到src下firebase資料夾
setting的config
貼到這個位置

8.取得firebase config

9. 設定註冊方式


10. 在public index 增加head設定

11. 輸出網頁

yarn build

13. 掛到firebase上面

firebase deploy