React 啟動與運行

建構Web應用程式

「這本書真的能夠讓你開始實際建構自己的React應用程式。」
- Andreea Manole, Facebook工程師

快馬加鞭，立即掌握React。這項開源碼技術源自Facebook，目的是快速建構豐富網路應用程式(rich web application)。藉由這本實務指導手冊，Yahoo網站開發者Stoyan Stefanov教導你如何打造元件(React的基本建構區塊)，並且將它們組織成可維護的大型應用程式。如果你熟悉基礎的JavaScript語法，一切便已準備就緒。

瞭解React如何運作之後，你將打造一支功能完整的自訂Whinepad應用程式，幫助使用者品評美酒，做筆記，你很快就會瞭解為何有些開發者把React視為Web應用程式開發拼圖的重要關鍵。

‧設定React環境，撰寫你的第一支"Hello World"網頁應用程式
‧建立及使用自訂React元件，搭配通用的DOM元件
‧建立資料表格元件，讓你編輯、排序、搜尋及探索它的內容
‧使用JSX語法擴展作為函式呼叫的替代做法
‧建立精實、低階的建置流程，幫助你聚焦於React
‧建立完整的自訂應用程式，讓你將資料儲存在客戶端
‧使用ESLint、Flow與Jest工具，隨著應用程式演進，檢查及測試你的程式碼
‧使用Flux管理元件之間的溝通

前言

又是一個溫暖美妙的加州夜晚，淡淡的海風氣息令人通體舒暢，心中不禁輕聲呼喊「啊 !」地點：洛杉磯；時間：2000多年，我正準備將名為CSSsprites.com的Web應用程式FTP到我的伺服器，並將它發布到全世界，在完成這支app的前幾個晚上，我暗想，究竟為何只花費20%的心力來處理應用程式的「實質內容」，而耗費80%的心血在跟使用者介面搏鬥？需要完成多少其他工具，才不必一天到晚處理getElementById()，並且擔心應用程式的狀態？（使用者是否完成上傳？啊，發生錯誤？對話還在繼續？）UI開發為何如此曠時費日？不同的瀏覽器會發生什麼狀況？慢慢地，「啊」變成了「救人啊」！

快轉到Facebook在2015年3月舉辦的F8大會，我所屬的團隊準備宣布重新改寫兩支Web應用程式：第三方留言元件與相關工具必須互相配合，相較於我的小小CSSsprites.com應用程式，這些都是完整成熟的Web應用程式，包含大量功能，威力強大，流量驚人，然而，整個開發工作輕鬆愉快，非常順利，團隊的新成員（有些甚至對JavaScript和CSS完全不熟悉）能夠不費吹灰之力地參與開發工作，這邊貢獻一些功能，那邊提出一點改善，提升效能，加快速度。就像某位團隊成員所說，「啊，我現在終於明白愛的滋味！」

怎麼回事？React。

React是建構UI的程式庫—幫助你一勞永逸地定義使用者介面，接著，當應用程式的狀態發生改變時，UI自動被重建，反應這項變動，不需要你做任何額外的工作，畢竟，你已經定義好UI。定義？嗯，其實比較像是宣告（declare），你可以使用可管理的小元件，建構威力驚人的大型應用程式，不需要再將半個函式主體耗費在尋找DOM節點；只需要維護應用程式的state（使用老式的簡單JavaScript物件），其餘工作自然水到渠成。

學習React是很有投資報酬率的事情—你學習一個程式庫，並且利用它建立下列所有事項：
• Web應用程式
• 原生iOS和Android應用程式
• Canvas應用程式
• TV應用程式
• 原生桌面應用程式

你可以利用與打造元件和UI相同的想法，建立具有原生效能與原生控制項（真正的原生控制項，而不是外觀看似原生的複製品）的原生應用程式，它不是「撰寫一次，四處執行」（整個業界在這件事情上一直不甚成功），而是關乎「學習一次，四處使用。」

長話短說：學習React，把那80%的時間拿回來，並且聚焦於真正重要的事項（例如，應用程式存在的真正理由）。

Stoyan Stefanov 是Facebook的工程師，之前在Yahoo服務，他是smush.it(線上圖像最佳化工具)的創造者，以及YSlow 2.0效能工具的架構師；《JavaScript Patterns》(O'Reilly)與《Object-Oriented JavaScript》(O'Reilly)的作者。Stoyan是部落客(phpied.com)，並且經常在相關活動中發表演說，包括O'Reilly Velocity Conference、JSConf、Fronteers等等。