iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

零基礎學習Reactjs 30天系列 第 2

「元件」

「元件」

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

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

  • HTML
  • CSS
  • Javascript

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

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

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

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

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

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

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

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

<product/>

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

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


上一篇
課程規劃
下一篇
動手做元件
系列文
零基礎學習Reactjs 30天8

尚未有邦友留言

立即登入留言