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 吧!








Related Posts

day_04: 我不會物件導向

day_04: 我不會物件導向

Laravel Homestead 設定

Laravel Homestead 設定

原子習慣:法則 1 - 讓提示顯而易見

原子習慣:法則 1 - 讓提示顯而易見




Sponsored



Comments