動機

最初是為了使用同一個data source去生不同版本resume,所以研究怎麼用reactjs與github page,這裡說說遇到的坑

困難點

  1. 設計遞迴結構
  • 同樣的結構,但是因為位置不同需要的render也不一樣,所以要想辦法讓轉換器知道該換成什麼
  • 這裡的方法是,在json的key放不同的string,以區分不同的case
  • 之後還要讓其他遞迴照常運行
  • 不過這樣讓整個JSON不好被操作
  1. 自動deploy到blog
  2. 把build出來的檔案copy到另一個branch去 - 原本想用copy之類的action自己用,都一直出事 - 最後是改用deploy github page的action就直接ok
  3. submodule怎麼更新 - git submodule update --init --recursive是拉檔案 - git submodule add -b BRANCH URL的添加方法不會自動更新submodule - git submodule update --remote --recursive才會更新!!
  4. 在react build完時deploy到blog,讓他rebuild - 我是用submodule讓react與blog共用同一個domain - 但需要在react build完時讓blog rebuild去拉新submodule - 所以要讓blog有辦法被call去rebuild,方法在另一篇
  5. 讓同一個網頁依據不同網址顯示不同版本的網頁
  • 用react router,但是如果直接上github page,打不同網址就會報404,所以要用HashRouter
  1. react會亂call
  • reactjs處理component不是轉成html就沒了,會在不知情時被call
    • 所以在json上遞迴的時候偶而input會是undefined,這個要處理
  • 如果在array加東西是直接push,可能會看到被多push一次
    • 所以還要去判斷被push的東西在不在array中

錯誤

  1. 修改data source十分沒效率
  • 雖然是用json存資料,但是json有很多key是為了轉換器而生,所以要做刪除或是新增就會很麻煩
  • 每做一次就要重新找要操作的位置,就要重新遞迴找index
  1. reactjs的cache
  • 刪除或是新增json,在build出來的production沒辦法直接反應,
  • 但這應該與reactjs的cache有關,還要去看

代辦事項

  1. 設計更好懂的結構
  • 讓json跟好懂,把為了轉換器而生的key去掉,這樣操作data source的效率會好很多
  1. 熟悉reactjs,處理前面奇怪的bug
  • 最初用reactjs就是當成html compiler而已
  • 但reactjs有自己處理component的方法,要去研讀這一段