「元件」

我用了大家熟知的積木做比喻。

點開一個網站的檢視原始碼，或者打開那個「開發人員工具」，就會發現基本上是由三種東西構成這樣的網站：

• HTML
• CSS
• Javascript

HTML的<div></div> 那些TAG就像是一張張方方正正的紙或者木板，而

<div>
     <p>Hello World</p>
</div>

則是，一張大白板上，貼著寫著「Hello world」句子的紙條。

CSS是裝飾，用顏料上色顏料，剪裁的方法。

Javascript也就是所謂程式的部分，是讓HTML這些紙活躍起來的機關，像是在那些紙板拉著線，也像是舞台上的機關，不論產生消失，移動位置，改變那些顏色、文字內容，都可以藉由Javascript操作完成。

Reactjs則是帶入元件的概念。
所謂的「元件」就是把這些要素包含進去的積木。

以元件為主軸思考就是要把頁面上的構成去做拆解，把一整個完整畫面拆成許多大積木。大積木又是由各種小積木所組成。這些積木只要開模就可以重複去使用。

一個購物網站的作為例子，商店中的一個個「商品」都是同樣的櫃子積木，都是同樣的規格，只是資料部分不盡相同而已。

<product/>

現代網頁前端的元件化是回歸到HTML原本的結構，只是現在不需要額外拉一堆醜醜的線來做操作，這些元件本身就會變色，自己跳躍起舞，還有插天線來接收資料。

我覺得講理論效果其實不太好，應該要動手做才是正確的方式，明天正好假日，能直接進「元件」的實作。