React DevTools

Component（元件）是 React 用來建立使用者介面的基本單位

相信有看過 Day 7 | React入門：React Component（元件）介紹　這篇文章的人，應該對於 Component已經有基本的認識了，但是在瀏覽器原生DevTools，看不到 component 的結構，只能看到編譯後的 DOM，這時候就需要 React DevTools 來協助我們檢視與除錯。

為什麼需要 React DevTools

在大型專案中，只看 DOM 難以追蹤 props、state 的變化，但是透過 React DevTools 可以直接看到：

• component 的樹狀結構
• 每個 component 的 props/state
• hooks 的即時值

如何安裝

很簡單，到瀏覽器 (Chrome, Edge, Firefox) 的擴充商店搜尋 React Developer Tools 就可以安裝。
安裝後，開啟 DevTools (F12)，會看到多出兩個 tab：⚛️ Components 和 ⚛️ Profiler。

功能介紹

⚛️ Components

• 以樹狀結構顯示所有 React 元件
• 點選元件可以查看：props, state, hooks，也能即時看到狀態變化

⚛️ Profiler
用來分析 React 應用效能：

• 紀錄每次component 重新渲染的情況
• 檢查渲染哪些 component 頻繁渲染、耗時較多
  適合用來作性能優化

使用情境範例

• Debug 表單：確認 props/state 是否正確更新
• useEffect 無限渲染問題：檢查 component 是否不斷 re-render
• 效能優化：找出 component 不必要的 re-render

VS Code 擴充工具

1. Simple React Snippets

• 功能：提供 React 常用語法的程式碼片段 ( snippets )
• 例如：
  • rfc → 建立一個 React Function Component
  • imr → import React from "react";
    可以幫助省去重複輸入模板程式碼的時間

2. Prettier - Code formatter

• 功能：統一程式碼排版，避免每個人縮排或分號風格不同。
• 使用方式：
  1. 在VS Code 左上打開 View → Command Palette...（快捷鍵：Ctrl + Shift + P / ⌘ + Shift + P）
  2. 搜尋 Preferences: Open Settings (UI)
  3. 搜尋：
     • format on save → 勾選 Editor: Format On Save
     • default formatter → 下拉選單選擇 Prettier - Code formatter
  4. 完成 → 按下儲存 (Ctrl + S) 後就會自動用 Prettier 格式化
     幫助程式碼風格一致，不會因排版而看起來很混亂

React icon

在開發 React 專案時，常常需要用到 icon，例如搜尋 🔍、刪除 🗑️、警告 ⚠️等等。
傳統做法：下載 PNG 或 SVG 檔案再導入 → 麻煩、需要管理檔案
這時候就可以使用React Icons

如何安裝

在 VS Code 終端機執行：

npm install react-icons

基本使用方式

範例：引入刪除符號

import { MdDelete } from "react-icons/md";

function App() {
  return (
    <div>
      <h3> < MdDelete /> </h3>
    </div>
  );
}

瀏覽器範例

自訂樣式

React Icons 本質是 React component，所以可以直接加屬性或樣式

例如：

< MdDelete size={20} color="orange" />

size：調整大小
color：設定顏色
也能搭配 Tailwind、CSS class 一起用

瀏覽器範例

總結

這篇文章介紹了三個提升 React 開發效率的好幫手：

• React DevTools：檢視元件結構、props、state 以及 hooks，快速定位問題。
• VS Code 擴充工具（Simple React Snippets、Prettier）：加快程式碼撰寫速度，保持整齊統一的程式風格。
• React Icons：加入各種圖示，讓介面更生動、美觀。
  掌握這些工具，能讓 React 開發流程更順暢，也讓程式碼更容易維護，是每位 React 開發者都值得嘗試的工具。