# 前端框架： React

###### tags: `前端筆記`

- 最後修改： 2023-02-04
- 筆記摘要：關於前端框架 React 的學習筆記

## 這份筆記使用的套件管理工具版本

| 套件管理工具 | 版本 |
| ---- | ---- |
| node | v18.13.0 |
| nvm | 0.39.3 |
| yarn | 3.3.1 |

- 請參考「[前端開發工具， Mac 環境安裝](https://hackmd.io/_OsoLClfTTyyAqCZt8XNxA?view)」這份筆記設定。
- 2023-02-04 起用Ubuntu 為作業系統，[設定作法與 Mac 類似](https://hackmd.io/bRv3rHizR8KHBEU348lEnw)。

## 建立新的 React 專案

yarn dlx create-react-app ./my-app

參考：
- [yarn dlx](https://yarnpkg.com/cli/dlx) （有點類似 npx ）

### 修改 .gitignore 檔案

在 .gitignore 加入以下

# 預設的 .pnp.js 可以移除

/.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

## VSCode 設定 ESLint 與 Prettier

TODO: 設定另外寫一篇筆記？

yarn dlx @yarnpkg/sdks vscode

yarn add -D eslint #安裝eslint
yarn dlx @yarnpkg/sdks #更新yarn sdk
yarn eslint --init #初始化eslint
#Q1: To check syntax and find problems
#Q2: JavaScript modules (import/export)
#Q3: React
#Q4: 依專案決定是否要使用 TypeScript
#Q5: Browser
#Q6: 目前選擇 JSON
#Q7: 詢問是否要透過 npm 來安裝 eslint-plugin-react@latest
#    選擇 No，統一使用 yarn 來安裝

#React 17，可以把"plugin:react/jsx-runtime"加在"extends"

#安装 VSCode Eslint 工具

#安裝 eslint 需要的 packages
yarn add -D eslint-plugin-react@latest

#安裝Prettier
yarn add -D prettier
yarn add -D eslint-config-prettier
#在 .eslintrc 的 extends 加上"prettier"
yarn dlx @yarnpkg/sdks #更新yarn sdk
yarn add -D eslint-plugin-prettier

#安裝 VSCode Prettier 工具

參考1 （有解決我遇到的套件問題，主要是在一些套件安裝後要用 yarn dlx @yarnpkg/sdks 來更新yarn sdk ）：https://juejin.cn/post/7053832276303413284
參考2 ： https://stackoverflow.com/questions/65328123/how-to-configure-vscode-to-run-yarn-2-with-pnp-powered-typescript
參考3（沒有解決我的問題，但一些設定有參考）：https://ithelp.ithome.com.tw/articles/10297311

## VSCode 設定 JSX Emmet

修改 VSCode 的 settings.json ，加入以下

{   
  // 啟用 emmet  
  "emmet.includeLanguages": {  
    "javascript":"javascriptreact"
  }
}

## Deploy a project to Github page

Install gh-pages to your project

yarn add gh-pages -D

Add "homepage" to package.json

// package.json
{
  "name": "prject-name",
  "homepage": "https://myusername.github.io/repo-name",
  // ...
}

Add new script to package.json via yarn:

"predeploy": "yarn run build",
"deploy": "gh-pages -d build"

### 參考
- [官網文件（新版 beta ）](https://beta.reactjs.org/)
- 一些別人整理的連結： https://github.com/enaqx/awesome-react
- [React 開發者一定要知道的底層機制 — React Fiber Reconciler](https://medium.com/starbugs/react-%E9%96%8B%E7%99%BC%E8%80%85%E4%B8%80%E5%AE%9A%E8%A6%81%E7%9F%A5%E9%81%93%E7%9A%84%E5%BA%95%E5%B1%A4%E6%9E%B6%E6%A7%8B-react-fiber-c3ccd3b047a1)
- [Simple guide for deploying your react app to Github-Pages](https://gist.github.com/vre2h/da9db3733c238c174d13670fb77c1f1a)
- [gh-pages repo](https://github.com/tschaub/gh-pages)
- [什麼時候該使用 useMemo 跟 useCallback](https://medium.com/ichef/%E4%BB%80%E9%BA%BC%E6%99%82%E5%80%99%E8%A9%B2%E4%BD%BF%E7%94%A8-usememo-%E8%B7%9F-usecallback-a3c1cd0eb520)
- [React 寫測試 calculator-react-jest](https://github.com/scriptrance/calculator-react-jest)