(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

就如同我們前五天的過程，遠古時代(?)前端工程師發現為了要讓程式碼的重複利用程度最大化，自己的元件不斷地被往下劃分，加了各式各樣的功能，開始眼花撩亂。

網頁元件化與Atomic Design

自然界萬物的組成，是由原子組成分子、分子組成組織、組織形成器官、器官形成生物。

2013年前端工程師Brad Frost提出了網頁元件化的Atomic Design概念，目前也被廣泛應用於Design System中。這個概念簡而言之是把程式碼架構分成這樣:

• Atoms 原子：最基礎的元素，以我們的範例是menuItem
• Molecules 分子：由原子構成的簡易架構，以我們的範例是menu
• Organisms 組織：由原子及分子所組成的元件。
• Templates 模板
• Pages 頁面

要注意的是Atomic Design僅是一個「概念」。並沒有強制規定說什麼要是Atoms、Molecules、Organisms...也沒有規定說一定要切成這些架構。

詳情可以參考作者的網站:
https://bradfrost.com/about/

聽起來很抽象，我該怎麼劃分架構呢?

我自己是先觀摩一些知名的元件庫網站的做法，例如Bootstrap
https://getbootstrap.com/docs/4.5/components/alerts/

還有semantic-ui
https://semantic-ui.com/elements/button.html

雖然這些是css框架，但也可以從他們設定class的方式去觀察哪些架構應該被劃分在一起

混亂、不斷重寫的程式碼卻也產生了

雖然架構被劃分的很明確，但是卻也誕生了兩個問題:

1. 因為分了很多檔，HTML檔案裡面出現了一大堆的script標籤和link標籤

為了解決這個問題，工程師製造出了「打包工具」，我們會在後面的文章提到。

2. 很多常見的程式架構在專案一開始的時候還是要從頭寫(EX: 前面實作的觀察者模式架構)

喜歡模組化的工程師心想，那我乾脆就把這些幾乎都會用到的架構也包成「通用模組」，把這些模組包成一個Library，每次就用這個Library來寫專案就好了啊?

於是各家軟體公司開始打造自己Library，有的Library因為很好用，開始在前端業界流行，這些公司也很阿莎力的免費授權給所有開發者使用。後來，這些Library也轉為openSource專案，人們逐漸稱這些Library為「前端框架」。

其中，又以Google開發的Angular、Facebook開發的React、中國人(尤雨溪)開發的Vue最為盛行。

世人俗稱前端三大框架、前端御三家、前端吵架話題。

而這三個框架的學習成本比較如下:

• Anuglar: 綁定Typscript(把Javascript改成需要定義型態的新語言)
• Vue: 一般被認為學習成本最低，但遇到大量資料時可能有效能問題
• React: 綁定JSX(讓HTML標籤可以在Javascript中使用、運算的語法)，程式結構複雜時對開發者比較直覺，但目前流行的React語法需要注意效能問題。

可以考量看看，很多人會推薦從Vue上手，不過React在去年更動後架構有變比較好理解，Angular我沒用過就不評論了。

前端框架不是template(模板)，而是幫你做了前端程式通用的部份

有些新手會產生前端框架是template的誤解，希望這幾天的文章可以幫助讀者理解前端框架的形成是怎麼來的。

接下來，我們會開始介紹React.js。