Month: March 2021

1. C#
2. 後端相關
3. 寫測試
4. 加強React
5. 英文文法
6. GA/GTM
7. JavaScript繼續深造
8. AWS
   

https://github.com/kamranahmedse/developer-roadmap?fbclid=IwAR2RlyWI7gOiEv0C3mZPxyE7GuWRLO-2mX2ShefOrb-_tE2K07726Al71Yc

後端40%測試30% 前端15% 文法15%

列個清單決定輕重緩急

  const isFirstRef = useRef(true);
  useEffect(() => {
    if (isFirstRef.current) {
      isFirstRef.current = false;
      return;
    }
   ...........code to run.........
  }, [xxx]);

這裡用useRef來判斷是不是第一次render，來和useEffect的偵測功能達到相輔相成的效果。

把JSX分出來做成container

把用到的function包成一個useXXX的hook

推薦網站：
W3Schools Online Web Tutorials
Developer Links

推薦的書：
以下是我覺得新手應該適用的書
網頁美編的救星！零基礎也能看得懂的 HTML & CSS 網頁設計
金魚都能懂的 CSS 選取器
最潮HTML5+CSS3網頁版型設計
深入淺出JavaScript
HTML5‧CSS3 最強圖解實戰講座
歐萊禮的深入淺出系列（挑自己想學的語言）
JavaScript 精選16堂課

我只知道用起來蠻爽的，因為不想要像tailwind css 寫一堆class在JSX上
（覺得看起來不好看）
不過eslint的檢查功能會失效，上網找到這個套件來用用：
eslint-plugin-styled-components-a11y

https://www.canstockphoto.com/
https://www.storyblocks.com/
https://dominica.desertcart.com/
https://www.123rf.com/
https://www.iconfinder.com/
https://www.crushpixel.com/
https://www.iconfinder.com/
https://pixabay.com/
https://www.dreamstime.com/

1. 不能重複
2. 不能用uuid之類的，因為它每次都宣告一次會不一樣
3. 一般如果來的資料裡，有獨一的id的話就用它（例如 item.id
4. 如果沒有id，列表是不會變的話，可以用function給的index
5. 如果列表是會變的話，不能用function給的index

How to Choose a Key in React | Jake Trent

想要用console.log看值的時候，可以這樣打：
用意是在console上會比較好解讀

const luna = 'cute'; 
console.log({ luna });

HiNative