React, React Native 和 React VR

React

自2013 React面世以來，React 的使用人數不斷增加，而且它的使用範圍也越來越廣，從Web Page，Web App， Cross Platform Mobile 到現在新推出的React VR。因此，我相信React是現在大多數開發者必學的Library 之一。這篇文章會談及React 的基本概念，和React Native，React 和React VR 之間的應用和分別。在開始講解React 之前，我會先向大家展示我在互聯網找到關於React 的統計數據。

React 在Javascript framework 中的排名

以下圖片是從 https://hotframeworks.com/languages/javascript 中獲得

上圖展示出，React 在2016 開始便一直有90 的評分，證明用家對React 的評價也不錯，它只是屈居Angular JS之後，但Angular JS 是一個早於React 面世的 JS Framework ，它於2009 年便推出。所以仍然有很多用者。但從上圖可見，Angular JS的分數已有開始下降的趨勢。主要原因可能是因為其他Framework 的出現和Angular 2 的推出令原本的用戶感到沮喪吧。再來下圖是React 在Website 中的使用率。

資料來源於 https://www.similartech.com/technologies/react-js和 https://trends.builtwith.com/javascript/React/Market-Share

而大部分React 的增長率是原於JQuery 的使用者。

在眾多國家中，美國為使用React 最多的國家，日本和中國緊隨其後。

最後，下圖為2017 年NPM (Node package manager) 中各Javascript Framework 的下載增長率。資料來自於 https://www.npmjs.com/npm/state-of-javascript-frameworks-2017-part-1

Laurie Voss 的The State of Javascript Frameworks 2017 報告中。

各項的統計數據均顯示React 這幾年來有不錯的增長率。我在2016 年的時候開始接觸React，在這2年間 React 的使用人數越來越多，特別是在Mobile 市場中，越來越多人使用React Native 來研發誇平台手機應用程式。我個人認為React 之所以越來越多人的使用是因為它有在不同平台上也能使用React 進行開發的延伸性。因為基本上，無論是 React，React Native 或React VR。它們之間也是使用JSX 語句來編程的。當然，不同Library 之間的使用組件也有不同。在接下來的部分，我將逐一介紹React，React Native 和React VR。

React

React 是由Facebook 團隊開發的一個Library。它並不是一個MVC framework. 但對於熟悉MVC Framework 的用家要上手React 也是有一定的優勢的，因為它會使用變量 Binding View 的形式來解決頁面和邏輯的耦合。而它的另一個特點是Virtual DOM 的引入

Virtual DOM

在日常的網頁中，會因應用戶不同的操作而對頁面進行不同的呈現。而這些呈現的實現方式一般是通過對DOM 的操作而實現的。而對DOM 進行頻繁的操作會對網頁的性能帶來損害。因此，React 團隊引入一個名為Virtual DOM 的機制，所有基於React 所造的Reandering 也只是對Virtual DOM 進行構建。而React 則會把新生成的Virtual DOM 與原來的Dom 進行差異比較，比較後把不同的部分交給瀏覽器進行處理。這樣，開發者便不需要關心Dom 的結構，開發者只需關心數據變化後介面是甚麼樣子便可。

組件化

React 另一個特點是組件化，組件化可以令到程式碼更加獨立，實作出來的東西也可以達到重用的效果。 React 非常之推荐使用組件化的形式來設計介面，把介面中的每個區域劃分成有獨位功能的組件，並且把相對復雜的組件再劃分成更細的組件。最終以嵌套或組合的形式來生成介面。Facebook 和Instragram 的Web 版就是以這種形式設計的。使用組件化形式設計可達成以下優點

1 可組合能以不同的組件不斷組合成更多功能的組件

2 可重用可在不同的介面中重覆使用

3 可維護邏輯獨立封裝，更易維護和更改

4 可測試有利於引入單元測試，因為邏輯已獨立封裝

學習方式

若要學習React 的話，建議先閱讀官方的React 文件。然後可使用Code Pen 實現一些簡單的測試。我在Code Pen 中之前有寫過一些簡單的練習

https://codepen.io/Isaac1024/pen/QKOrzR

https://codepen.io/Isaac1024/pen/pEyWxA

最後可嘗試使用Node.js，配合其他React 的Library 例如 Redux， React Router，GraphQL 等開發一些簡單的小程式試試看呀。

學習資源

https://reactjs.org/

http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4

React Native

React Native 是由React 團隊開發出來，用作編寫跨平台手機應用程式的Library, 它和React 一樣，也是以JSX 語句來編寫程式。相比起React， React Native 平身已提供一定的組件供開發者使用。組件的詳細使用方法可參考官方的文件。

使用React Native 開發手機程式有以下的優點

1 能把編寫網頁的概念應用在手機開發中，語句和React 基本上是一樣，開發者不必重新學習

2 能使用原生IOS 或Android 支援的Native Javascript 元件，使程式效能更接近原生程式

3 容易放到手機上運行，使用Expo 開發框架的話，只要你不使用Navite 的元件，就很容易放到手機上進行測試。

4 支援使用Code Push 進行更新，不必再經AppStore 提交更新。

以上通通是使用React Native 進行手機開發享有的好處理，的確，能夠編寫跨平台手機應用程式的框架有很多，但React Native是眾多之中效能最接近原生的而且還能把React 的開發概念應用在其中，所以我是非常推荐大家學習React Native 的以下我將會對Expo 進行簡單的介紹，並提供React Native 的學習資源。

React Expo

React Expo 是一個React Native 的開發工具集。它提一系列的原生API，使開發變得更為簡單。而且它最大的特點是提供一個Cloud Store 讓開發者可以把開發的程式放到它的Cloud 上供其他使用者使用。用家只需下載Expo Client 在手機上Scan QR Code 便可在手機中開啓。當然，你若不想用戶要經Expo Client 開啓的話，也可以把App 放上Store 上。經Expo 工具開發的App 並不限制一定要使用Expo Client 開啓的。使用方法可參考Expo 的官方文件。下圖的QR Code 是我在Expo Cloud 上放置的一個手機應用程式，對React Native 開發有興趣的讀者可下載Expo Client 在手機中並Scan QR Code 試試看呀。