每週 Exit Tickets - week 1 (submitted)

1 請試著解釋：「在 React 中，一切都是元件」代表著什麼？

元件以markup標記、CSS和JS的組合，可客製化元件。
元件只需要定義一次，可在任何地方無限次數使用。同個檔案中或在其他檔案中重複使用 UI 元素，以利加速開發專案，甚至在REACT開源社群(Chaka UI, Material UI) 有上千個元件可以使用。

元件可以是個按鈕也可以是完整頁面。

元件可以排序、巢狀(樹狀)嵌套組成，重複使用、自由重組。

2 我們可以將所有程式碼寫在根元件嗎？如果可以的話，優缺點是什麼？

可以。
優點:
1 省去建立元件的時間，不需impport, export檔案中的元件。
2 對於小型的應用程式，在同頁面顯示可以容易看出元件彼此間的關係。
缺點:
1 應用程式變複雜時，難以維護和修改。
2 程式碼難以重複性使用，因為每個元件都需編寫為完整的程式碼。

3 JSX 語法與 HTML 語法兩者的關係是什麼?

JSX是JavaScript的語法擴充，可帶入HTML標籤，編寫方式有點類似HTML架構，可以巢狀結構嵌套，但JSX編寫方式比HTML更嚴謹，也更簡潔。
HTML是靜態的只有結構，JSX是結構和邏輯寫在一起。
瀏覽器不能理解JSX，所以有些工具套件編譯器，將JSX程式碼轉為一般的JavaScript。

4 為什麼 HTML 中的 class 屬性在 React element 中的對照 prop 會改名為 className ?

JSX內的屬性，會轉為 JavaScript 物件的key，屬性會以變數形式做使用。

由於 JavaScript對變數名稱有限制:不可有連字號(hyphen)，和不可有保留字，class是保留字，所以變數名稱(JSX的屬性)要用camelCase方式命名，就由class改為className。

5 inline CSS style 的屬性有什麼特別的撰寫規則嗎？請舉例。

style屬性寫入標籤內，因為是物件又 加上外層用JSX大括號，取得值，所以會有2層大括號{{}}包住內容，style屬性物件的key以cameleCase方式命名。由於是物件，所以key value pair以逗號隔開。
<h1 style={{backgroundColor:'yellow', color:'blue' }}>IKEA</h1>