Uncategorized – Page 39 – 庭喵的出包星球

nanoid 套件推薦

從 DigitalOcean 的這篇文章看到推薦，就來用看看，拿來用在react的key上面
nanoid – npm

Eslint 配置教學

輸入這個指令

npx eslint --init

安裝完之後，在webStorm的設定那邊開啟eslint

之後就會看到一堆可怕的紅線惹。然後再搭配prettier
再新增.prettierrc檔案

{
  "printWidth": 100,
  "singleQuote": true
}

還有.prettierignore檔看情況配置

之後再存檔，就會發現雙引號變成單引號惹！
※有問題就重開IDE
※有時候存檔沒變化，是因為檔案沒變，可以空一行再存試試

介紹二個套件：
eslint–config–prettier
turns off all ESLint rules that could conflict with Prettier
eslint–plugin–prettier
integrates the Prettier rules into ESLint rules

EsLint規則查詢

EsLint和Prettier有衝突的話怎麼辦？
官方網頁有推薦的套件
看這篇就解決了：
How to make ESLint work with Prettier avoiding conflicts and problems

參考：
Getting Started with ESLint – ESLint – Pluggable JavaScript linter
Prettier · Opinionated Code Formatter
Set up ESlint, Prettier & EditorConfig without conflicts

Babel

babel裡的plugins是晶片，有各種晶片可以提供各種的功能。然後就有懶人包：presets，可以想像成是晶片包（其實也可以比喻成各種菜組合成的便當）

babel7可以建一個babel.config.json檔案來做設定

使用async/await會報錯：
regeneratorRuntime is not defined
這時候就要增加asyn/await的支援：
安裝corejs

{
  "presets": [
    ["@babel/preset-env",{
    "useBuiltIns": "usage",
    "corejs": 3
  }],
    "@babel/preset-react"]
}

參考：Updating to Babel 7.4

參考閱讀：
A Beginner’s Guide to Babel
Babel Tutorial, Part 2

買了吸夏噗的書

公司需求，我要開始學C#，買了二本書來看看。覺得應該要買英文的？可是英文的還要等…不然要去天瓏書局看看。

架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是讓它有修改的時候會自動重整
參考這個網頁

webpack && react

不想用腳手架create-react-app的時候，就需要研究一些有的沒的。

搜尋關鍵字：
react webpack tutorial
參考文章：
A mostly complete guide to webpack (2020)
Tutorial: How to set up React, webpack, and Babel from scratch (2020)

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