既然要自己寫SPA，我們先來談談前端框架，本文分成上下篇，這邊重點不在教會你使用，而是想告訴你框架做了些什麼，以下用React來當例子:

傑森是一名網頁設計師，除了會使用HTML/CSS，另外也會用Javascript/JQuery來做些互動式功能，因為單位都是接一頁式形象和後端開發為主網站的需求，傑森完成他的部分，檔案交給後端工程師任務就結束了，單純切版和套些前端外掛，似乎沒有什麼可以難倒他。某天需求單位想開發新產品，其中包含以下需求:

• 單頁應用程式架構
• 導入前端框架
• 前後端分離開發

因為單位沒有接過這類的需求，主管想請傑森了解這方面的技術。雖然傑森之前有聽聞前端框架技術，但畢竟沒有實際接觸，對於要怎麼開始完全摸不著頭緒，因此硬著頭皮前往google，從其中一筆搜尋結果中找到React官網：

認識render

先從一個最基本的範例開始(以下節錄官網範例)

JS:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

HTML:

<div id="root"></div>

傑森按照官網「一分鐘內加入 React」，並用了上述的程式碼，很順利的畫面出現了熟悉的「Hello, world!」

傑森這時心想，這玩意兒怎麼這麼新奇，沒有HTML也能變出內容?尋找一番後發現代碼似乎藏在JS裡，為了驗證自己想法的真實性，傑森打算先把Javascript去除，神奇的事情發生了，畫面變成了一片空白。

雖然還不知道怎麼回事，此時充滿好奇的傑森把Javascript放原本的地方，並且將「Hello,world!」改成「Hello,Jason!」。

神奇的是又再度發生了，內容竟然也跟著改變了!傑森竟然不用改HTML就可以得到一個新的內容，興奮的他彷彿發現了新世界。

我們複習一下剛剛發生了什麼事:

1. 預設畫面空白
2. 執行Javascript程式碼
3. 首次畫面出現「Hello,world!」
4. 改變Javascript程式碼
5. 接著畫面變成「Hello,Jason!」

若用瀏覽器(以Chrome為例)的檢查程式碼功能，可以看到在改變程式的同時，該原始碼區域會有閃一下的現象，而內容也直接更新了，這個動作我們稱之為render，為了幫助記憶，傑森決定稱它為閃之render。

用Javascript來render

到了這裡，傑森突然想通了，原來只要用Javascript就可以動態改變頁面的內容，不需像以前那樣建立多個HTML來做出不同的內容。是的，這就是前端框架如何僅僅用一頁HTML來動態地改變，相信了解Javascript的朋友們，一定對前述的語法似曾相識，如同Javascript用document.getElementById(#ID).innerHTML (JQuery則是$("#ID").html)。但需要注意的是，React並非直接操作DOM物件，而是利用了虛擬DOM，搭配獨特的JSX語法和ReactDOM.render這個函式來達成render的效果。

「原來這就是閃之render阿~」
傑森一邊點頭，一邊自言自語的說道。

下一篇將介紹Component組件，讓你知道框架是如何使用模組化開發來提昇效率，我們明天見!