React Patterns

來解析一個奇怪的pattern…我只能說我很少看過，所以覺得很怪。

const Width = ({ children }) => children(500);

這裡表示 width是一個function
這個function的參數也是一個function
就是children，在width這個function裡面執行動作：
【使用children這個function，並強制給予它參數500，不管到哪都是五百~】

潮到出水不得不用的My JSON Server


Photo by Krisztina Papp on Unsplash

如果後端一直拖著不給api…最好的方法就是肛爆他們自己做一個假的api！

My JSON Server

使用方法敲級簡單：

1.在自己的git repo上面新增一個檔案叫db.json
內容可以隨意自訂，一開始要測試就直接複製它官網的吧
2.打網址請求，例：
http://my-json-server.typicode.com/catsheue/reactmiou/posts/1
catsheue/reactmiou
帳號名/專案名
這樣就實現了馬上製造假api的目的惹🤗

react router 更新

本來想更新但發現出現錯誤訊息，好像是eslint的關係

發現安裝eslint也會出現一樣的提示

查了一下eslint-config-airbnb@15.1.0這個關鍵字，找到它的官網
https://www.npmjs.com/package/eslint-config-airbnb
隨意爬了一下，試了以下指令

 

發現成功訊息…雀躍雀躍

接著再嘗試安裝一次react router

竟然成功了！！！我真是天才！！！！！太讚了（抖抖抖）
※記得先在package.json把舊的react-router那幾行刪掉，才會成功安裝新的

    “react-router”: “^5.1.2”,
    “react-router-dom”: “^5.1.2”,

如何計算rem

Photo by Jan Piatkowski on Unsplash

首先呢，假如是負責既有的專案的話，就找它的html 的 font-size是什麼
現在負責的專案是10vw，所以就看目前的視窗大小（右鍵F12點body，會在左下顯示大小）
看了一下是1920，所以1920 / 10 = 192
剛剛做了一個width 10vw的 div block，看出它的寬度也是這個大小沒錯！

假設有設計稿的話，更簡單，目前拿到的設計稿是1336，所以就把設計稿改成1920大小，再拿它的px值丟到下面網頁上
（因為我做的專案是到任何大小都是填滿整個畫面，不同專案不同情況，有的專案可能要改畫布大小但原本畫面不動）
所以就可以打開我的萬用網頁：
REM Calculator | Umbraco Gold Partner – Offroadcode Limited
用這個就可以得到rem的值來玩了

JavaScript 實用代碼段

concat也可以concat物件

．提取特定的物件資料，例如

var array1 = [
{ name: 'Luna', age: 99 },
{ name: 'Baby', age: 1 },
{ name: 'Curapica', age: 18 }
];
var found = array1.find(function(element) {
  return element.name === 'Luna';
});
console.log(found);

//  > Object { name: “Luna”, age: 99 }

var array1 = [
{ name: 'Luna', age: 99 },
{ name: 'Leo', age: 1 },
{ name: 'Baby', age: 1 },
{ name: 'Curapica', age: 18 },
];
var found = array1.find(function(element) {
  return element.age === 1;
});
console.log(found);

記得它只會回一個…所以給的值要是特定的，例如 gameId

const lunaCute = [1, 2, 3];
lunaCute.map(() => []);

初始化陣列

Array.from(Array(N).keys());

把字串的逗號拿掉：（例如 1,000）

parseInt(DefaultStake.replace(/,/g, ""))
const arr = [
  {
    name: 'somestring',
    id: 42,
    fat: true,
  },
  {
    name: 'joanne',
    id: 3,
    fat: false,
    story: 'long',
  },
];
arr.reduce((a, c) => {
  const [key] = Object.entries(c);
  return a.concat(key);
}, []);

 



參考文章
13 useful JavaScript array tips and tricks you should know – DEV Community 👩‍💻👨‍💻

git push前的checklist

  1. 有沒有多餘的代碼（可以優化、簡潔的地方）例如重複的地方太多，可以讓它變成一個function來調用。
  2. 各模版/各品牌
  3. 有沒有 debugger
  4. Network的XHR正不正常（接口調用）
  5. 避免hardcore寫法 （if ( id === 1396 ) { ….. }）
  6. 能整合的component都整合，不要分開寫
  7. 把沒用到的程式刪掉，保持整潔
  8. 避免重複的code，若兩個地方要取一樣的值就寫成getPornId 之類的function
  9. eslint都修好
  10. API有沒有重複打
  11. 避免不必要的re-render，注重performance
  12. 做了一些設定之後，要重新打API來refresh
  13. TODO改好
  14. 先確認表單有什麼值是不能為零、不能空的
  15. 假的資料拿掉
  16. 做loading畫面
  17. 確認要不要filter掉重複的值（例如select裡的列表）
  18. 試試沒有run後端專案的時候前端會不會整組壞光光（例：TypeError: Cannot convert undefined or null to object
  19. 搜尋的input沒輸入的時候，按搜尋按鈕是不是會跑出全部資料（需確認
getCatId = () => {
  const { activeCatId ] = this;
  let catId = this.props.routeParams.catId;
  if ( theme === 'hentai' ) {
   catId = activeCatId;
  }
  return catId;
}

可以改成下面這樣

getCatId = () => {
  if ( theme === 'hentai' ) {
    return this.activeCatId;
  }
  return this.props.routeParams.catId;
}