Month: November 2020

架webpack-dev-server在本機端跑跑

姆喵要在本機端看程式變怎麼樣，所以需要這個功能。
很簡單，首先先安裝webpack-dev-server再看怎麼辦。

npm install webpack webpack-cli webpack-dev-server --save-dev

喔對了還要安裝這個

npm i html-webpack-plugin --save-dev

…裝好之後在src資料夾新建檔案，index.js和index.html
index.js

document.getElementById("demo").innerHTML = 5 + 6;

index.html

<!DOCTYPE html>
<html>
    <body>

        <h1>My First Web Page</h1>
        <p>My First Paragraph</p>

        <p id="demo"></p>

    </body>
</html>

…接下來在package.json加上這個

"scripts": {
    "start": "webpack serve --hot --open http://localhost:8080/"
  },

之後在命令列打上 npm start 就大功告成嘍！
※那個–hot是讓它有修改的時候會自動重整
參考這個網頁

ES6 Modules

在寫react常用到import和export，這些就是ES Modules，目前已經被大部份的瀏覽器支援。就連Node.js 12版以上也支援了。
需要用到module的程式，在script上需要加上type=”module”註記
<script type="module">
.......
</script>

不過要注意有的瀏覽器還不支援，例如這裡可以看到IE其實不支援
JavaScript modules

參考文章：
All I need to know about ECMAScript modules
Understanding ES6 Modules
Understanding ES Modules in JavaScript

React-Testing-Library 學習

    1. 要看render出來的結構長怎麼樣，可以用screen.debug();
    2. 覺得要query的element有可能不在的話，用queryBy，因為getBy如果找不到就會throw Error。
    3. 不應該去測試DOM的結構，DOM的結構應該當成黑箱子。
    4. 假設有個按鈕，用getByRole不要用getByText
    5. @testing-library/jest-dom 應該要安裝成devDependencies

參考文章：
How to use React Testing Library Tutorial
Testing – React Spectrum

useMemo & useCallback

import { useMemo } frmo ‘react’;

使用useMemo來幫進行大量運算的function做cache，如果要傳給它下一層的component的話，再用useCallback包起來。
useCallback顧名思義就是一個callback，它也可以用來放在useEffect之類的dependcies []裡。

WebStorm – prettier

首先先安裝prettier

npm i prettier -D

之後到Settings裡面找當前目錄下的node_modules裡的prettier


再勾選on save，就可以在save的時候自動幫忙format。（eslint不用裝也會）

選package.json，它會跳出這個提問，選Yes