React 基礎：一些重要但不成文的事

增進你的程式碼品質

ESLint (vscode)
prettier (vscode)
propTypes 驗證 props
首先要先修改 ESLint 的規則，在根目錄（my app）新增檔案 .eslintrc.json

{
    "extend": ["react-app"],
    "rules": {
        "react/prop-types": "warn"
    }
}

TodoItems.js

import PropsTypes from "prop-types";

TodoItem.propTypes = {
    className: PropTypes.string,
    size: PropTypes.shape({
        id: PropTypes.number,
        content: PropTypes.string,
        isDone: PropTypes.bool,
    }),
    handleDeleteTodo: PropTypes.func,
    handleToggleIsDone: PropTypes.func,
}

部署 React App（Deployment）

可直接參考 Create React App 部署的官方文件 & 部署到 GitHub Pages 官方文件

如何將做好的網頁，部署到網頁上給大家看？

到達專案資料夾，在終端機，輸入 yarn build
在終端機，接著輸入 yarn global add serve serve -s build
透過 yarn 指令去裝一個全域的 serve，產生一個 http://localhost:5000/
在專案資料夾裡，會產生一個 build 的資料夾
接著打開 package.json ，加入 "homepage": "https://myusername.github.io/XXXX(專案名稱)",
安裝 gh-pages，輸入指令： yarn add gh-pages
回到 package.json，在 scripts 加上 "predeploy": "npm run build", "deploy": "gh-pages -d build",
然後將檔案上傳至 GitHub，輸入 git commit -am “ XXXX “
接著到 GitHub 網站，新開一個 repo
然後在終端機設定：
接著輸入 npm run deploy
完成部署