我想說的是
一些實用工具可以幫助開發上更加快速，能少打字就少打字，把力氣省起來
Simple React Snippets 是一套 VSCode 上針對 react 的快捷鍵工具
React developer tools 這個 chrome 插件可以增加除錯效率

Simple React Snippets

前面寫了一些程式，現在來寫點跟程式本身無關的
但是可以幫助開發效率
開發的時候能少打字就少打字，避免打錯字

這時候如果使用的是 VSCode 作為開發工具
可以安裝 Simple React Snippets

import

裝好插件之後直接在 VSCode 中輸入 imrc
就會快速產生最常用的 import 宣告：

import React, { Component } from 'react';

class

這個我也覺得常常會用到
在建立組件的時候都有個固定的基本格式，這時候可以用 cc
可以直接產生

class  extends Component {
    state = {  }
    render() { 
        return (  );
    }
}
 
export default ;

同時輸入的游標會同時停在 class 名稱和 export 名稱上
只要打一次，兩邊就有一樣的東西了！超方便！
更多快捷鍵可以直接看插件頁面中的說明

React developer tools

這就是一個 google chrome 的插件，同樣核心的 Brave 瀏覽器也可以裝

React developer tools有三種顏色，代表三種狀態：

• 灰色：代表這個網站不是用 React 寫的
• 黑色：代表當前頁面是用React寫的，並且處於穩定環境當中
• 紅色：代表當前頁面是用React寫的，並且在測試環境中

裝好之後按下 F12 或是 option + cmd + i 開啟測試開發者工具
會看到兩個新的 tab
在這裡你可以清楚的看到 React 的結構，讓自己寫的程式結構更乾淨
還可以看到組件間的資料傳遞，而且是動態的
可以大量減少 console.log 的時機

這兩個就是目前最基本常用的實用工具
工欲善其事，必先利其器
用多了就慢慢熟悉了！