發現縮排很大，在這邊調設定：
Tab Size 改成想要的數字，我這邊改成２。然後點進去Editor: Detect indentation
假設它有打勾的話，把它勾掉，就可以嘍！
再回頭來看看我的代碼…好，很好，很完美。
Imperative Pattern vs Declarative Pattern
在讀JavaScript的時候，這兩個Pattern常常被提到，做了一下筆記。
假設我們要做一個包含很多人物的物件。
const characters= [
{name:'Curapica', age:15},
{name:'Killua', age:13},
{name:'Gon', age:12},
{name:'Leorio', age:17},
];這時候這二種pattern的寫法就會是這樣：
/* Imperative Pattern */
for (let i = 0; i < characters.length; i += 1) {
characters[i].lastSeen = new Date();
}
/* Declarative Pattern */
characters.map((book)=> {
characters.lastSeenBy = 'me';
return characters;
});Declarative Pattern：要做什麼
Imperative Pattern：如何做
想像是兩個個性不同的妹子，就是這樣：
護唇膏
買了eos護唇膏，雖然香味還蠻好聞的，可是對我來說感覺有點硬，不好推勻，要省時間的話還是想要軟一點的護唇膏。不知道用久了會不會變不一樣？🙄
越來越奇怪的chrome
我發現打開F12的時候，在頁面上面點擊，連結會有奇怪的白邊。
https://create-react-app.dev/
像這個網站就會這樣，把F12關掉就不會了…
#100DaysOfCode react專案
Day 1, Dec 12 2019
- 目前不支援直接用create react app指令來創專案，前面要加個npx
詳見 https://create-react-app.dev/docs/getting-started/
A template was not provided. This is likely because you’re using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported. - 創建完成後，它會自己幫你建好gitignore和一些檔案
- 馬上改用sass，用原本的css超不順手
https://create-react-app.dev/docs/adding-a-sass-stylesheet/ - 導入emoji..發現有error還是能繼續用
https://www.npmjs.com/package/a11y-react-emoji
Day 2
- 重開的時候我裝的Emoji套件掛了，感覺安裝node-sass之後好像偷拔了我的其它套件…把Emoji移除了
Day 3
- 發現安裝node-sass把我的router拔走了？
- 之後查了下這個解法
- Cannot read property ‘match’ of undefined
- 依他的建議成功解決了
Day 4
- 寫了一個用到hook的counter (完全抄官網的
網頁開發不思議
- 在用rem的情況下，用font-weight: bold; 跟用font-weight:bolder;
竟然是有差的，而且差別可大了。真神奇…
Node with React 課程筆記
進度：3-17
Dec.5.2019
首先看教學說要新增一個資料夾，叫server，還要創一個package.json，
使用npm init -y來創造出package.json檔案。
這個指令就是 npm init –yes 的意思，可以省去按Enter的步驟。
參考閱讀：
The best time to npm init
接下來要安裝express…我就跟著安裝了。
--save: Package will appear in your dependencies.
March. 6. 2020
express是一個library，是一些方便的方法的集合，類似lodash？可以讓寫server比較方便一點，當然寫純JavaScript也可以，只是用express會比較方便一點。
想像node是一塊荒野，express是一個機場，它會做出各種因應不同的request的飛機，來讓東西可以塞進飛機！
March.8.2020
打 heroku open 就可以到我的專案看看
Apr.4.2020
載入keys.js檔案，講師說因為它是 .js 所以可以省略它的副檔名。
React.js 常見錯誤
當用到 class component的時候，記得它是沒有括號的@@
JavaScript sort()
const numbers = [1, 2, 4, 3];
numbers.sort();
// 1, 2, 3, 4sort是一個不錯的方法，可以排順序，例如排商品的價錢、時間的遠近，又或是誰快生日了、誰的年紀最大…等等。另外也可以自己寫一個陣列order，處理中文字串的排序。
例如
const class = [‘公爵’, ‘侯爵’, ‘伯爵’, ‘子爵’, ‘男爵’];
可是其實還有個詭異的地方，要是陣列是這樣：
出來的結果讓人意到不到。😱😱
W3School的解釋是這樣：
By default, the sort() function sorts values as strings.
This works well for strings (“Apple” comes before “Banana”).
However, if numbers are sorted as strings, “25” is bigger than “100”, because “2” is bigger than “1”.
所以如果要處理數字陣列由小到大排序的話，要另外再帶一個function來處理
醬子就沒問題惹辣🤗
另外也可以排true / false的順序
const array1 = [true, false, true, false, false];
array1.sort();
排序預設計是Ascending，false到true
這裡可以想像成是零到一…因為零是false…凌波零是false…
注意，以上數字的好解決，要排英文字母的話就比较麻烦：
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
debugger
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});寫了二個function之後發現它其實可以簡化：
const sortAlphabetically = (a, b) => {
const textA = a.siteName.toUpperCase();
const textB = b.siteName.toUpperCase();
return textA < textB ? -1 : textA > textB ? 1 : 0;
};
const sortAlphabeticallyDesc = (a, b) => {
const textA = a.siteName.toUpperCase();
const textB = b.siteName.toUpperCase();
return textA < textB ? 1 : textA > textB ? -1 : 0;
};簡化成這樣：（如果需要有二種）
const propComparator = (propName, bool) => {
// asc
if (bool)
return (a, b) =>
a[propName].toUpperCase() === b[propName].toUpperCase()
? 0
: a[propName].toUpperCase() < b[propName].toUpperCase()
? 1
: -1;
// desc
return (a, b) =>
a[propName].toUpperCase() === b[propName].toUpperCase()
? 0
: a[propName].toUpperCase() < b[propName].toUpperCase()
? -1
: 1;
};在debugger那边查看，可以得知要是 拿 x – y 来看的话，它会回传NaN，可见sort要吃数字或是 true/ false，文字虽然有分大小，但却不是数字，不能拿来做数学运算。
參考影片：慎點，難聽印度腔
Ascending and Descending Order – Learn Math
React.js 注意事項
