在組件封裝上，兩個框架差的不遠。

在Vue中封裝組件，用插槽的方式子組件中寫好具名插槽的位置和樣式，在父組件中通過插槽名傳入html和js邏輯 部分。

在react中封裝組件，區別於Vue的地方在於，Vue中有插槽這個語法，而react中沒有。在react中的html和js邏輯部分的傳遞都需要藉由屬性組件的屬性(Props)來完成。

(在Vue中插槽傳值，在react中屬性傳值)

此外，Vue中組件的樣式(css部分) 可以直接寫在組件中(寫在<style>標籤中)，而react需要單獨開一份樣式表。

現在要實現下圖這樣的一個Card組件，預留左上角、右上角、內容區等幾個位置(這些位置可以傳入html)

在vue中的實現 (CardWithSlot.vue 僅template部分，省略樣式)

使用:

代碼見:
https://github.com/DiracKeeko...

在react中的實現 (CardWithSlot.tsx 僅tsx部分，省略樣式表)

使用:

代碼見:
https://github.com/DiracKeeko...

完結。

同步更新到自己的語雀
https://www.yuque.com/diracke...