---
tags: React, Axios, Eslint, react-router
---

## :memo: todo list
1. Add eslint to your project
2. Add react-router-dom to your project
3. coonect API (axios)

### 1. Add eslint to your project
#### Install EsLint to your project
`npm install eslint --save-dev`
`yarn add eslint --dev`

#### Initial EsLint configuration
`npx eslint --init`

**How would you like to use ESLint?**
Choose:
`❯ To check syntax, find problems, and enforce code style`


**What type of modules does your project use?**
`❯ JavaScript modules (import/export)`


**Which framework does your project use?**
`❯ React`

**Does your project use TypeScript ?**
`❯ No`


**Where does your code run?**
`❯ Browser`


**How would you like to define a style for your project?**
`❯ Use a popular style guide`

**Which style guide do you want to follow?**
`❯ Standard: https://github.com/standard/standard`


**What format do you want your config file to be in?**
`❯ JavaScript`




#### Install EsLint extension in VsCode Marketplace

Set format on Save

Set default formatter:


#### Install Prettier
`yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev`

#### Configure Prettier:

Add rule: `"react/react-in-jsx-scope": 0,`

### 2. Add react-router-dom to your project
- https://reactrouter.com/docs/en/v6/getting-started/overview

`yarn add react-router-dom`

### 3. Imgur API (axios)
Sample code: https://github.com/hryjosn/imgur-photo-manager

- https://axios-http.com/docs/intro

`yarn add axios`

- imgur註冊流程：https://blog.uncletony.tw/2021/03/imgur%E5%85%8D%E8%B2%BB%E9%9B%B2%E7%AB%AF%E5%9C%96%E5%BA%AB%E8%A8%BB%E5%86%8A%E8%88%87%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8/
- API申請步驟：https://www.letswrite.tw/imgur-api-upload-load/
1. 取得client-ID
2. 將環境變數加入 .env.development file： https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
`effective after you restart your react server`
3. Post API
4. You should use your local IP to open your react project (幹): https://medium.com/p/8f1b2c988645/edit
5. Get Access token: https://pjchender.dev/webservice/webservice-imgur/
### :snowboarder: Home work
串接Youtube API，並將得到的資料顯示在畫面中
https://ithelp.ithome.com.tw/articles/10194007

{
    "editor.fontLigatures": true,
    "git.autofetch": true,
    "explorer.confirmDelete": false,
    "git.enableSmartCommit": true,
    "files.exclude": {
      "/node_modules/": true
    },
    "search.exclude": {
      "android/": true,
      "ios": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "git.confirmSync": false,
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.tabSize": 4,
      "editor.formatOnSave": false,
    },
    "[typescript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.formatOnSave": false,
    },
    "workbench.tree.indent": 16,
    // 啟用 emmet
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
    "javascript.format.enable": false,
    "typescript.format.enable": false,
    "eslint.format.enable": true,
    "eslint.codeActionsOnSave.mode": "problems",
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "files.autoSave": "onFocusChange",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "gitlens.views.commits.files.layout": "list",
    "workbench.iconTheme": "material-icon-theme",
    "tabnine.experimentalAutoImports": true,
    "window.zoomLevel": 2,
    "workbench.colorTheme": "Winter is Coming (Dark Blue)",
  }

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["plugin:react/recommended", "standard", "prettier"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "prettier"],
  rules: {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": 0,
  },
};