---
# System prepended metadata

title: 'React Eslint, Router, Axios:'
tags: [' react-router', ' Axios', React, ' Eslint']

---

---
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`
    
 ![](https://i.imgur.com/SjgfSrR.png)
   
 **What type of modules does your project use?** 
    `❯ JavaScript modules (import/export)`
    
 ![](https://i.imgur.com/xvPYZ6L.png)

 **Which framework does your project use?** 
    `❯ React`
    
 ![](https://i.imgur.com/wPgioFp.png)
 **Does your project use TypeScript ?** 
    `❯ No`
    
 ![](https://i.imgur.com/XcZ8aNc.png)
 
 **Where does your code run?** 
    `❯ Browser`
    
 ![](https://i.imgur.com/gvh3da2.png)

 **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`
    
 ![](https://i.imgur.com/eZb6Rfi.png)
 
 **What format do you want your config file to be in?** 
    `❯ JavaScript`
    
 ![](https://i.imgur.com/xSJ0DtE.png)
 
 ![](https://i.imgur.com/UpEE42J.png)
 
 ![](https://i.imgur.com/dI3U4Aj.png)



#### Install EsLint extension in VsCode Marketplace
![](https://i.imgur.com/bhjfe8T.png)

Set format on Save
![](https://i.imgur.com/7rJtLaZ.png)

Set default formatter: 

![](https://i.imgur.com/PbWrKmg.png)

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

#### Configure Prettier:
![](https://i.imgur.com/ZT3BfMq.png)


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,
  },
};

```