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

• 完成部署

參考資料
用 Github Page製作 react demo site
寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！