###### tags: `虹堡科技- front -end training`

# training 4 - React >預計兩週時間內完成

最後一個training項目，期限是暫定兩個星期內，實際提供的內容要有多少由你自行決定

4. Build a website with React framework
- Choose a topic by yourself
- Planning a basic structure of the website
- Planning the expected feature and pages of the website
- Create website wireframes
- Search a most suitable website template or Design UI by yourself
- Implement the website as planned
- The content(data) of the website must be dynamically loaded through ajax
- The content of the website can be either provide by API provider or by yourself

目標是完整網站，所以要越完整越好

這個training對你來說會比較吃力，就先實際作看看，有問題在提出來

---
六角學院 api 申請

https://vue-course-api.hexschool.io/

帳:[e-mail]

https://a7474267.github.io/JS-FinalHW-1/

https://ithelp.ithome.com.tw/articles/10218123


/


https://wcc723.github.io/development/2020/12/13/vscode-extension/?fbclid=IwAR3c9cKvW3wWkbMCBtp22Xu0ETpUtUHEtrO8K8Tvl-NT6QEW_yDYM4_m-aQ

高雄旅遊網版型拆解：
https://ithelp.ithome.com.tw/articles/10218123

demo:
codepen
https://codepen.io/CoolizzLuo/pen/wvWZrXP

https://a7474267.github.io/JS-FinalHW-1/

---

## 【 learning React 】

### 進度安排

1.cli +webpack
2.切版 (base 在 react 的切版）
3.react api （react 去處理資料）

(三前)

4.渲染畫面

(五前)
5.下拉選單 /
6. fifter(篩選）
按鈕(篩選）

7.分頁(有做似乎有加分）

(下下週二）

<以下為進階>
8.navbar，
router
(另外一頁 我的最愛，把我的最愛資料存在 localstroge)

9.做一個快速搜尋 bar (篩選）

*29號先收尾

/

webpack、cli

router、api

**研究一個東西太久研究不出來要去問！！**

p.s 需要去研究一下 router 概念

[ask]

>Q:想請問我後來有想到，如果有做多頁式的網站，router 對於框架來說是不是就很重要?

>目前估計可以的話先做完目前規劃的這些，有時間的話在試試看練習加上 router 的部分， 這樣 ok 嗎?

>A:router要看狀況，如果需要動態解析網址再render的一定會有，靜態頁面就不需要
>目前會使用router的情況，應該不會有太複雜的設定，有碰到再看就好～


開發 React 應用程式時，不一定要使用 JSX 語言，不過通常使用 JSX 會比較方便。
https://blog.gtwang.org/web-development/react-hello-world-tutorial/

切版參考:
https://ithelp.ithome.com.tw/articles/10217972
https://a7474267.github.io/JS-FinalHW-1/

三個資料夾檔案
https://github.com/ctsujic/project20201110/blob/main/style.css

-
關於 API 資料

哥傳的相關文章
* https://ithelp.ithome.com.tw/m/articles/10221020?sc=rss.iron
* https://medium.com/reactmaker/7%E5%A4%A9%E5%AD%B8%E6%9C%83reactjs-day-7-%E5%91%BC%E5%8F%ABapi%E5%8F%96%E5%BE%97%E5%95%86%E5%93%81%E8%B3%87%E8%A8%8A-8896c9dae339

---
React 相關文章:
* https://ithelp.ithome.com.tw/articles/10190997
* https://ithelp.ithome.com.tw/articles/10155643
* https://ithelp.ithome.com.tw/articles/10234155
* https://ithelp.ithome.com.tw/users/20106935/ironman/1651?page=1

想要看的觀念:
https://courses.hexschool.com/courses/924133/lectures/23544453
還有哥哥說的 vue 執行觀念影片

-

高雄旅遊資訊網版設計稿:https://hexschool.github.io/JavaScript_HomeWork/#artboard3

參考版型:https://a7474267.github.io/JS-FinalHW-1/
https://ithelp.ithome.com.tw/articles/10218123

高雄 API 資料:https://raw.githubusercontent.com/hexschool/KCGTravel/master/datastore_search.json

-
可用的 api 資料
https://demojson.herokuapp.com/cart

---

### 開發中遇到的狀況 or 問題

推上遠端數據庫後，.git 隱藏檔只會出現在本機，遠端數據庫不會有

應該要研究 git 綁兩個帳號，這樣在家裡就可以 推到 gitea 上

原來把 node_modules 重新 npm install 專案就可以開了 (不可以直接用複製貼上資料夾的方式，一定要用" npm install"

---

[ 201229 ]

1.Content.js 使用 function 改謝

2.Content.js 傳入 api ＋map

3.用 Content.js 的api 帶回到 cardlist.js

//
button 和 list 要改成 function 的寫法

//

有調整：
1.Content.js >改成 []

2.button >把 props 拿掉

https://hackmd.io/@L4LzR6M6QZiDx_IFfoGLKw/SyQT_m46w

---

**[201230-預期進度]**

1.card 資料＋排版 ok

2.api資料調整 ok
- app.js call api
- 其他組件的 api 拿掉 ：dropdown（可參考哥的程式）
- card content 改寫在 app.js (不包含 api)並移除 cardcont
- button改成 function(傳 props 參數功能)、list 刪除移到 app.js

3.刪除不要的檔案 ok

-
3.fifter >還有下方 cards 的 title 功能、載入網頁時 預設抓 「哪一區」 的資料?

下拉選單

1)點下拉選單 事件監聽 onchange
2)把 on change 的值丟到 state(綁定 state) >可以不用此步驟了

3)把子組建 state 網上丟到父組建 > 明天至少要執行到這裡 >**所以要先去父層定義"規格" 然後 +父層伸出親情的手 >然後子層用 props 傳值給父層**

4)子傳父的值與原本 api 回傳的陣列做比對 （塞選資料）
for 迴圈或是 map (一般 js)

練習：寫死三民區練習做“比對”

>**意思就是把 api 裡面的三民區的值撈出來**

5)比對出來的產生一個 push 到一個新的陣列

6)然後把新陣列的值傳給 card(父傳子）
就很像今天做卡片變數

按鈕

1.點擊事件 click 呼叫 -
2.把 click 的值丟到 state(綁定 state)
3.把子組建 state 網上丟到父組建

3-6 跟下拉選單一樣的行為

/

others

1.下方卡片的 h2
2.console.log 除掉紅色 error:

-加上 value(還是 key?)
-加上 key (固定值)
-selected 移除
-status 修改整齊

3.改掉 button 文字內容，目的是要撈到資料

/

*還有 gotop 功能跟分頁功能

/
參考資源：
1.子傳父可以參考影片
2.事件監聽：https://ithelp.ithome.com.tw/articles/10227866

/

**思考方向：**
1.return
2.過程中資料邏輯
3.接受參數

---

**[2021/1/4 進度規劃]**

**1.置頂按鈕**

相關資源:

https://codepen.io/yafanchung/pen/VwKXgyX?editors=1010

https://codepen.io/roberrrrt/pen/OJXJdqQ

https://ithelp.ithome.com.tw/articles/10225184

https://www.itread01.com/content/1545752354.html

>Boon:
>anchor應該沒有不能使用才對

官方套件:
https://www.npmjs.com/package/react-scroll

(我安裝 onscroll 會出現 warning 訊息，無法正確裝上套件，不知道為什麼)
https://www.npmjs.com/package/react-onscroll

一般 JS 的 scrollTop

https://mrcodingroom.freesite.host/htmlcssjs%E7%B0%A1%E6%98%93%E7%BD%AE%E9%A0%82%E6%8C%89%E9%88%95/

https://segmentfault.com/a/1190000017439805

原本以為要動態加上 class 效果
https://blog.csdn.net/suwyer/article/details/81481507

https://www.itread01.com/content/1546331403.html

**最後是 Boon 給我的資源，讓我成功做出來**

**記住:scroll 應該是監聽整個 document 元素**

https://github.com/facebook/react/issues/5042

https://codesandbox.io/s/sharp-sea-48ujf?file=/src/App.js:258-264

https://codesandbox.io/s/hidden-field-mhi8h?file=/src/App.js:110-119

others
https://codepen.io/yafanchung/pen/VwKXgyX?editors=1010
https://codepen.io/roberrrrt/pen/OJXJdqQ
https://codepen.io/yafanchung/pen/gOwzgyP

**2.分頁功能**

使用純 JS:https://medium.com/jass-note/%E5%89%8D%E7%AB%AF%E7%AD%86%E8%A8%98-%E6%97%85%E9%81%8A%E7%B6%B2%E4%B9%8B%E8%A1%8C%E6%94%BF%E5%8D%80%E9%81%B8%E5%96%AE-%E5%88%86%E9%A0%81%E5%8A%9F%E8%83%BD%E5%AF%A6%E4%BD%9C-2d32f731c3ed

使用 react:https://www.mdeditor.tw/pl/pd5N/zh-tw

使用分頁套件:https://material-ui.com/zh/components/pagination/

https://codesandbox.io/s/99fh2?file=/demo.js

https://codesandbox.io/s/uyn5y?file=/demo.js:0-945

(二完成)

**3.我的最愛(在新增一頁)**

react-router-dom

https://ithelp.ithome.com.tw/articles/10226370

https://ithelp.ithome.com.tw/articles/10226056

4.toDoList 資料編輯功能

ask: 下拉選單、按鈕的 fifter，兩層的 fifter 邏輯決定

https://zh-hant.reactjs.org/docs/conditional-rendering.html

---

>Boon 說:
>以react的運作方式來說，原則上是不需要jQuery的

(但是因為這些框架提供很大的自由度，幾乎可以隨意整合任何套件，所以就會造成這些奇怪的使用方式)

/

[210106]

愛心 icon

1.空心變實心，修改 textcontent

2.設定 state :isFavorite 寫 toggle(值：true false)預設 false

改sestate

3.local

-----
## 我的最愛

### ＵＩ
1. 控制ＵＩ
- 如何調整textContent?
- 加入isFavorite判斷
- 更新textConten，還要調整isFavore
- 把isFavorite改成state, useState 宣告,onclick要改寫成setState

### 資料
2. 存到我的最愛陣列 (when isFavore is false)
- onclick ,卡片的整個物件資料
- 建立一個空陣列
- 存到一個新的陣列(我的最愛)
- 存到 localstorage

3. 處理 localstorage
- 將“建立一個空陣列” 改成讀取 localstorage
- 如果 localstrorage 沒有我的最愛陣列，建立一個空陣列

---
https://github.com/pdji1602003/Blog/issues/29

https://github.com/bradtraversy/simple_react_pagination/tree/master/src

/
改卡的 id

---

**[210108 問題與討論 (包含 git 問題)]**

ask:boon

1.Dropdown.js select //如何預設是“請選擇行政區” (第18行） ok

**有空看一下+理解一下 下方文章**
https://ithelp.ithome.com.tw/articles/10156859


2.事件問題:React 最好綁在 html tag 上

傳統開發是 html、js、css分開
框架或是 React 是結合在一起
所以 Boon 說 React 寫事件監聽最好綁在 HTML 的 tag 上，不過也有例外
(像是 scroll 是監聽整個 window，所以只能用 addEventListener 去寫，
然後 may 有說使用 DOM、addEventListener 都會寫在 useEffect 裡面，
useEffect 好像是只會更新一次 不確定?)

3.bug

1.點選行政區後 沒有渲染的問題 應該是頁數問題，你再留意一下，發生問題的時候是不是上一個行政區換過頁了？
例如: 先選大樹區，然後切換到第二頁，然後選只有一頁的行政區(像是美濃)

如果是這個問題，那就是頁數沒有重置

2.如果上一有換過頁面(例如第二頁)，換行政區後頁數要重置成 1，除非換的行政區也有第二頁畫面才會有資料渲染


**4.GIT 相關問題**

1).git flow 流程

5.ask: 遠端要有哪幾條分支

遠端數據庫只會有 master、和 develop 這兩條 branch

在本地端開發的時候，依照 git flow 流程是: 

(1)master 是專門 merge "release" 才會長出一個 commit

(2)在開發中在 develop 新增 feature 分支，feature 分支用來開發功能，開發好之後 develop 在  merge feature

(3)遠端數據庫只會有 master 、develop 這兩條 branch

(4)於 develop 上會在開一條 release 分支，release 分支是用來測試上線前的版本是否 OK [重要]

(release 測試是好了應該要做兩件事:

第一件事是:切到 master 上 merge "release"

第二件事是:切到 develop 上 merge "release"

就會分成兩個版本(因為 develop 還會再繼續改)，但我們現在是要 master 這版上線

(5)測試好了之後在切到 master 上 merge "release" 喔(master 只會 merge "release" )

[注意!!]: 此時可以將 master 推上遠端數據庫，

至於 develop 如果是跟 master 同一個版本的話，就不用推到遠端，如果是不同版本的話 ( 因為  develop 上 merge "release"後繼續開發)，就需要推上遠端

(6)hotfix  branch 是用來即時修正 master branch 上的 bug

[注意!!]: feature、release 每條 branch 應該都要命名成不一樣的名稱，這樣開發才不會混亂，且符合 git flow 的規則

例如: 

- feature 命名邏輯: feature/功能說明 
- release 命名邏輯: release/1.0

2).如何刪除遠端、本地分支

4.刪除遠端分支:git branch -D develop 

https://matthung0807.blogspot.com/2020/03/git-delete-remote-branch.html

刪除本地端分支:git branch --delete <branch>

https://matthung0807.blogspot.com/2019/11/git-delete-local-branch.html

修改分支名稱:
git branch -m master develop

git branch -m [old branch name] [new branch name]

3).git flow 流程圖(超級重要)

5.git 筆記

(1)`git push -h 說明`
git push -h 說明:這個指令好像是當初我問 Boon 如何同時 push 兩條分支到遠端，感覺這個指令只是要說明 git 指令操作


(2) vs code 左下角有 branch 顯示版本號(commit 點的編號)



**6.待研究的 git 問題 >待研究**

git push 多個 branch

git push 多個 repo:

git 同時綁 兩個遠端數據庫

git push 多個 repo:
https://yami.io/git-multiple-origin/
/

我的最愛 icon

a 連結預設行為


/
思考一下未來要如何整理+紀錄工作筆記 重要!!

---
* zarek's react hackmd notes:
https://hackmd.io/@L4LzR6M6QZiDx_IFfoGLKw/SyQT_m46w

* zarek's react github
https://github.com/ZarekChung/-react-training-210108-clean-version

---
ask:boon

-刪掉分支再新增分支
>先前的分支刪除，又在新增相同的分支名稱(這樣此分支跟前面的不會有關係跟影響)

-localstroge 跟 cookie 差異:
https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f

-我發現 react 的 App.js HTML 無法使用 emmet，因為他是 js 不是 html >待查資料

我發現我的 github 好像沒有用 git 所以沒有之前的 commit 歷史紀錄屋

/
早上：
切 ui 首頁＋新增 我的最愛頁面

練習 router

下午：
開發專案 router＋拆 layout //4 點前完成

z說先做出 我的最愛刪除功能

/
我的最愛頁面功能：

* 分頁：景點刪除＋編輯
首頁：景點新增＋刪除

* 我的最愛要不要保留下拉選單、按鈕 >待思考

-下拉選單:一樣可以塞選出我的最愛的景點
-按鈕:區域可以自己新增修改調整

* 首頁加入我的最愛，首頁入口 icon 會有動態功能表示此景點已經加到我的最愛

此版新增:資料**編輯**功能，評估分頁是否可以再加上 上+下 一頁效果 (我的頁數是不多啦不過這個功能很常用到)

/

相關資源

* 在 jsx 使用 emmet 相關設定
https://medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

* **router 資源:**

1.一開始主要參考
https://ithelp.ithome.com.tw/articles/10226056
https://ithelp.ithome.com.tw/articles/10226370

**2.還沒看**
https://ithelp.ithome.com.tw/articles/10204451
https://ithelp.ithome.com.tw/articles/10204137

3.官方文件

https://reactrouter.com/web/example/query-parameters

https://codesandbox.io/s/react-router-basic-bnpsd?file=/example.js

4.pj 文件
https://pjchender.blogspot.com/2018/11/react-react-router-dynamic-breadcrumb.html

---

210113 ask Boon :

1.關於路由檔案獨立出來問題
Q:一定要把路由檔案拉出來(獨立出來)設定嗎?

A:沒有，拉出來只是可能很多地方(頁面)會用到 或是要改路由檔案方便，跟路由層級沒有關係

2.<HashRouter> 寫在 index.js 或 app.js 是個人喜好

https://www.google.com/search?sxsrf=ALeKk03dCX1vpvPWt4LVKwDrWUTDETRoEA%3A1610558205638&ei=_Sr_X5GvJvHomAWtmZSwDA&q=2020+react+router+%E5%A6%82%E4%BD%95%E5%82%B3%E9%81%9E%E5%8F%83%E6%95%B8%E8%B3%87%E6%96%99&oq=2020+react+router+%E5%A6%82%E4%BD%95%E5%82%B3%E9%81%9E%E5%8F%83%E6%95%B8%E8%B3%87%E6%96%99&gs_lcp=CgZwc3ktYWIQAzoECCMQJzoFCCEQoAFQtBNYzUBg7UJoBXAAeACAAUWIAc0HkgECMTiYAQCgAQGqAQdnd3Mtd2l6wAEB&sclient=psy-ab&ved=0ahUKEwjRofLttJnuAhVxNKYKHa0MBcYQ4dUDCA0&uact=5

https://www.google.com/search?q=react+router+Cannot+read+property+%27map%27+of+undefined&oq=react+router+Cannot+read+property+%27map%27+of+undefined&aqs=chrome..69i57.11517j0j7&sourceid=chrome&ie=UTF-8

210114 ask May layout 觀念:

作法 1 :不同頁面 import layout (需傳變數)
作法 2:寫兩個檔案名稱不同但內容相同的 layout (需傳變數)
作法 3:寫兩隻不同內容的 layout (直接可用)
作法 4 : Boon 說下拉選單+按鈕在做成一個元件，然後傳到"我的最愛頁面"

真正的高雄旅遊網:https://khh.travel/zh-tw/attractions/detail/178

1.加入我的最愛的愛心 會顯示 title="加入我的最愛" >ok
>調整狀態 title
>未加入 顯示 title
>有加入 不顯示 title

2.navbar focus 效果，How to focus a react-router Link

網頁字體請統一

3.我的最愛頁面調整

/

ask boon:

使用 sytle 和 cssName 寫樣式 差別?
權重?
好維護?

react 如何取消預設 a 連結行為 ！＃

[重要]
!原來空字串和空陣列不是 null
null 是裡面都完全沒有東西喔

---
## final 版

筆記＆修改討論：
https://hackmd.io/BOpZGF9vT5y_wbLwtvLcRg?both

-final 版

shenny:
https://github.com/shenny0622/react-training-project-final-210117

zarek:
https://github.com/ZarekChung/react-router-testing-final

【 react 專案調整內容 】

UI

1.navbar 選住樣式＋頁碼 focus 拿掉 ok

2.網頁字體請統一 ok

3.我的最愛頁面 title ok

4.所有的 style 都盡量改成動態加入 className：HeaderPage 待調整

5.每個卡片 list 當 hover 過去會有不一樣的樣式 ok

6.
還是要新增 copyright ok

功能

1.我的最愛頁面景點可以直接刪除

新增

1.我的最愛頁面 可以編輯功能
2.新增我的最愛時 有提醒視窗

/

頁碼 選著樣式

navbar

1.設定狀態
2.綁定事件
3.三元表示式
4.改變狀態

navbar 問題：

1.click 事件 狀態問題
2.是否可以直接用 .active 樣式 >待研究
3.
/

bug

1.broken 紫色愛心  (想知道）

2.navbar click 事件 狀態問題 樣式切換，ㄧ定要點兩下 ＋.active 樣式 >待研究 (想知道）

3.為什麼加入 copyright 我的 ontop 箭頭會往下移（所以我才先把 copyright 拿掉）ok

4.我有使用 Google Fonts Roboto 可是看起來字體好像沒有顯示，想確認有無正確的使用成功（看到頁碼好像有用成功） ok

5.在 app.js 加入 grid 前鎮區的卡片距離會不見，所以還有沒有調整固定 footer，且加入 grid 我的最愛那頁高度會不一樣喔 (急）

6.關於 home 的 updateCheckMyList function，已經抓 localstorge 的資料了，可是首頁跟我的最愛頁面有時候畫面還是沒有即使更新，想請問是因為 react 是單向綁定，所以在這邊才要另外寫一個 updateCheckMyList function 去讓畫面做更新嗎？（值得問）

來不及做但後續可擴充功能：

1.下拉選單新增 user 可以打字的 input
2.加入我的最愛會有提醒視窗+navbar 會顯示 數量

3.我的最愛有動態按鈕的 group 功能
+ 我的最愛資料可以是依據相同區域排序（綜合）

4.CRUD，將資料存在 localstorge

5.因為卡片有加上 hover 效果，所以之後應該可以在開發卡片景點的 page+kllok

記得要呈現還沒有資料的首頁＆我的最愛頁面

記得要說 首頁/我的最愛頁面可以刪除景點，再帶到 CRUD

*demo 前記得要把 我的最愛的資料刪掉

**[210118 - demo meeting ]**

**1.rich:**

排版問題 :卡片景點是否可以一排不只展示兩個，因為左右有留白

可做 RWD

**2.Vic:**

1)感覺 .goTop 存在的原因就是因為資料量很多，可是你設定一個分頁只有四個卡片，是為什麼?
2)感覺你一直在說哪邊沒有開發完可以在優化，那你針對目前的作品有覺得哪邊是 OK 的?

>ME: 基本的使用者效果都有做到、至少有把我的最愛功能完成

**3.Fredy:**

可以在新增一個印出所有景點的集合(不分區域)，讓 user 想要了解有哪些景點