React DevTools 這堂課的影片時間比較長，所以會拆幾個段落來寫文章。

DevTools 可以幫助我們 debug 和管理所有的 components。

為了快速進入 DevTools 的介紹，課程老師把上節課的 Beyonce Contact 完成內容直接拿來當範例。

目前我們有三個檔案：

1. contacts.js
   所有動態資料的集中處。
   比如 name: "Beyonce",、phone: "+123 456 789"、email: "b@beyonce.com"....
2. Card.jsx
   每張卡片上，什麼卡片要顯示什麼東西，也是昨天的 react props 內容的擺放處。
3. App.jsx
   最後我們網站上要出現的所有東西。

課程開始的挑戰是要新增一個 Avatar.jsx，也就是照片格式的 components。

先在 Avatar.jsx 裡面打好要想要的圖片格式長怎樣：

import React from "react";

function Avatar(props) {
  return <img className="circle-img" src={props.img} alt="avatar_img" />;
}

export default Avatar;

不過這樣加上去之後，回去 Card.jsx 加上 <Avatar/> 會出現 props is not defined 的錯誤。

上面的問題是因為他不知道 Avatar.jsx 裡面的 src={props.img} 是什麼。

所以回到 Card.jsx 為 <Avatar/> 改為 <Avatar img={props.img} />。這邊是讓 App.jsx 在用 Card 這個 components 時，知道 components 裡面的 <Avatar/> 是要 Contacts.js 裡面的 image 路徑。

不過到這邊還是會報錯，仍然是 props is not defined。因為到目前 <Avatar/> 還是斷掉的，因為 Avatar function 裡面有用到 props 但卻沒有在 () 裡加入 props。

所以呢，再回去 Avatar.jsx 的內容把 function Avatar 的 () 內加入 props：

import React from "react";

function Avatar(props) {
  return (

        <img className="circle-img" src={props.img} alt="avatar_img" />

  );
}

export default Avatar;

這樣每個地方的 props 就會都串起來了。

OK～ 以上對我來說有點複雜XD 也是課程影片的前三分之一而已，之後幾天會慢慢寫介紹 React DevTools 的章節～