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;
}

Array.from

Array.from([1, 2, 3], ( x , y ) => x + y);

// 1, 3, 5
這裡的arrow function是map function，y就是index

const nestedArray = [['😉'],{kind: "🐦"},['😇']]

const abc = Array.from(nestedArray);

nestedArray[0][0] = "🐗";
nestedArray[1]["kind"] = "🦉";

console.log(...abc);

還有它不會深烤貝

ES6 Practice

看到一些不錯的寫法給它抄下來

"1|2|3|4|5|6|".split('|').reduce((result, val) =>
(`${result}${result && val ? ' | ' : ''}${val}`), '')
onClick={() => this.setState({ light: lightstatus === 'on' ? 'off' : 'on' })}
test({gameID});

其實就等於

"use strict";

test({
  playID: playID
});
let onFlipped = itemId => (xIndex, yIndex) => console.log (itemId, xIndex, yIndex);

如果有看不懂的，可以貼到babel網站上看它轉成ES5會怎樣