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

Day02 為資料命名

Day02 為資料命名

6. 排序 (上篇)

6. 排序 (上篇)

Rails API 學習紀錄 (Part 1)

Rails API 學習紀錄 (Part 1)




Sponsored



Comments