在開始學 React 之前，我們先花幾分鐘了解一下它的來歷。
知道一個工具為什麼被發明出來，會幫助你更好地理解它想解決什麼問題。
Facebook 為什麼要開發 React？jQuery 的維護問題
2010 年前後，Facebook 正在快速成長。
隨著團隊越來越大，他們發現一個嚴重的問題——代碼變得越來越難維護。
當時主流的開發方式是用 jQuery 來操作畫面。
在 jQuery 出現之前，不同瀏覽器（像 IE、Firefox、Chrome）對 JavaScript 的支援都不太一樣，同一段程式碼在 A 瀏覽器能跑，在 B 瀏覽器可能就壞掉。
jQuery 幫開發者解決了這個頭痛的問題——不管用什麼瀏覽器，用 jQuery 寫出來的程式碼都能正常運作。
再加上它的語法簡潔好學，所以迅速成為當時幾乎所有網站都會使用的工具。
jQuery 的做法很直覺：你看到頁面上有什麼東西要改，就直接告訴瀏覽器去改它。
比如頁面上有一個按讚數字、一顆按鈕、一段文字，這些都是「元素」。
你可以用 jQuery 對瀏覽器說：「去找到那個按讚數字，把它從 5 改成 6」、「去找到那顆按鈕，把它變成藍色」。
舉個例子，假設你有一個按讚按鈕，用 jQuery 的寫法大概會像這樣：
// 當使用者按下「讚」按鈕時...
$('#like-button').click(function() {
// 去頁面上找到顯示讚數的元素，把數字加一
var currentLikes = parseInt($('#like-count').text());
$('#like-count').text(currentLikes + 1);
// 把按鈕的顏色改成藍色
$(this).css('color', 'blue');
});簡單來說，每一步都是你親自告訴瀏覽器：「去找到某個元素，然後改掉它」。
這個做法在小型專案完全沒問題，簡單又直覺。
但問題是，當專案越來越大，事情就沒這麼簡單了。
一個按讚按鈕不會只改讚數而已——按了讚之後，通知欄的數字要加一，如果讚數破百還要顯示「熱門貼文」的標籤。
收回讚的時候，上面這些事情又要全部反過來做一遍。
再加上留言、分享、回覆等功能，每個功能都可能會動到同一個元素。
用 jQuery 來寫的話，代碼可能會變成這樣：
// 按讚
$('#like-button').click(function() {
var currentLikes = parseInt($('#like-count').text());
$('#like-count').text(currentLikes + 1); // 更新讚數
$(this).css('color', 'blue'); // 改按鈕顏色
// 按了讚，通知欄的數字也要跟著更新
var notifCount = parseInt($('#notification-count').text());
$('#notification-count').text(notifCount + 1);
// 如果讚數超過 100，要顯示「熱門貼文」標籤
if (currentLikes + 1 > 100) {
$('#hot-tag').show();
}
});
// 收回讚——上面做過的事情，要反過來再做一次
$('#unlike-button').click(function() {
var currentLikes = parseInt($('#like-count').text());
$('#like-count').text(currentLikes - 1); // 讚數減一
$(this).css('color', 'gray'); // 按鈕改回灰色
var notifCount = parseInt($('#notification-count').text());
$('#notification-count').text(notifCount - 1); // 通知也要減回來
if (currentLikes - 1 <= 100) {
$('#hot-tag').hide(); // 標籤也要藏起來
}
});
// 送出留言
$('#comment-submit').click(function() {
var commentCount = parseInt($('#comment-count').text());
$('#comment-count').text(commentCount + 1); // 更新留言數
// 通知欄又要更新（又是操作同一個元素）
var notifCount = parseInt($('#notification-count').text());
$('#notification-count').text(notifCount + 1);
// 把留言內容塞進頁面
$('#comment-list').append('<div>' + $('#comment-input').val() + '</div>');
});
// 還有分享、回覆、刪除留言、即時更新...
// 每個功能都在重複操作同樣的元素你會發現，光是三個功能，代碼裡就到處在操作 #notification-count 這同一個元素。
每新增一個功能，你都要回頭想：「頁面上還有哪些元素需要一起更新？」
而且按讚跟收回讚的邏輯幾乎要寫兩遍，只是方向相反。
當這樣的代碼累積到需要 100 人共同維護的規模，整個專案就會像一盤義大利麵一樣，錯綜複雜、糾纏不清。
沒有人能搞清楚改了某一行代碼，會不會讓其他地方出問題。
這就是 Facebook 當時面臨的痛苦。
React 的誕生：從 Facebook 內部工具到獨立開源
2011 年，Facebook 的工程師們決定要解決這個問題。
其中一位叫 Jordan Walke 的工程師，開發出了 React 的原型。
React 的核心想法，用一個比喻來說明：
想像你有一張 Excel 報表，裡面有營收、成本、利潤、圖表、摘要文字，彼此都有關聯。
jQuery 的做法，就像是這張表完全沒有設公式——每一格都是你手動輸入的數字。
當營收改了，你要自己去找到利潤那一格，手動重新算；算完利潤，再自己去改圖表；改完圖表，還要自己去改摘要文字。
欄位越多，你就越容易漏改某個地方，然後整張表的數字就對不起來了。
React 的做法，就像是幫這張表建好公式——你只要改營收那一格，利潤、圖表、摘要文字就會自動重新計算、自動更新。
你不用再煩惱「我改了這格，其他格有沒有跟著改」，因為 React 會根據最新的資料，自動把整個畫面更新到正確的狀態。
React 最早被應用在 Facebook 的「動態消息（News Feed）」功能上。
2012 年，Facebook 買下了 Instagram。
Instagram 團隊注意到 Facebook 內部已經有 React 這套工具，也希望能導入到自己的專案中。
但當時 React 跟 Facebook 的代碼是綁在一起的，沒辦法直接拿來用。
於是 Facebook 的工程師就想辦法把 React 從 Facebook 的代碼中抽離出來，讓它變成一個任何人都能安裝使用的獨立工具。
這一步非常關鍵，因為它為 React 後來的開源鋪好了路。
React 發展歷程：從不被看好到主流框架
2013 年，React 在 JSConf US 大會上正式發表，宣布開源（Open Source），也就是任何人都可以免費使用。
但據說，當 Jordan Walke 在台上發表的時候，台下觀眾的反應其實很冷淡。
為什麼？因為當時大家已經習慣用 Angular 這類框架來開發網頁。
Angular 的特色是「一條龍包到底」：從畫面怎麼顯示、資料怎麼管理、頁面怎麼跳轉，全部幫你處理好。
而 React 只做一件事——幫你把資料變成畫面。
至於資料管理、頁面跳轉這些功能，React 通通不管，你得自己另外找工具來搭配。
對當時的開發者來說，這感覺就像買了一台只有引擎的車，方向盤、輪胎都要自己去找，很多人覺得這根本是退步。
面對這樣的質疑，Facebook 決定加強宣傳，把目標轉向那些更勇於嘗試新技術的開發者社群。
隨著越來越多開發者實際用過 React，發現它的簡單和靈活反而是優勢，React 的採用率開始快速攀升：
2014 年——大眾開始大量接觸到 React，包括 Netflix 在內的大公司也開始在專案中使用 React。
2015 年——React Native 問世，讓開發者可以用 React 的方式來開發手機 App。同年，狀態管理工具 Redux 也誕生了。
2016 年——React 成為最主流的前端框架之一。版本號從 0.14 跳到 15.0，這個「正式版號」的改變，等於在宣告 React 已經是一個非常穩定、可以放心使用的框架。
2019 年——React 16.8 推出了 Hooks，這是一個影響巨大的新功能，大幅簡化了元件的寫法，也是現在學 React 的主流方式。
2025 年——Meta（Facebook 母公司）宣布將 React 捐贈給 Linux Foundation 旗下的 React Foundation，代表 React 不再只是一家公司的產品，而是由整個開源社群共同維護。
React 歷史重點整理
回顧 React 的發展歷程，有幾個重點值得記住：
React 誕生於 Facebook 內部，目的是解決大型專案中代碼難以維護的問題。
它的核心理念是「只專注在建構畫面（View）」，而不是做一個什麼都包的龐大框架。
雖然開源初期不被看好，但 React 靠著它的簡潔與靈活，最終成為了全球最主流的前端框架之一。
了解了這些背景之後，你會更清楚為什麼 React 的設計是這個樣子，接下來學習具體的語法跟概念時，也會更容易理解它背後的思維。