5個推薦的框架和工具，將幫助您使用React構建所有平臺。

自2013年首次釋出以來，React一直是用於構建Web應用程式的最受歡迎的庫之一。全世界的開發人員都非常喜歡它，以至於他們發明了獨特的方法來使React不僅可用於Web開發，而且可用於移動和桌面。

現在，React不僅可以用於開發Web應用程式。 在本文中，您將學習可幫助您構建某些特定型別的應用程式的React框架。 您會發現推薦的React框架，用於構建靜態網站，移動應用，桌面應用和伺服器端渲染框架。

1.跨應用重用React元件：Bit.dev

"學習一次，到處寫作"

"一次構建，隨處組成"

React Native的口號是"學習一次，隨處寫"。 對於多種平臺使用相同的框架，這顯然是一個很大的優勢。

但是，對所有內容使用React帶來了另一個巨大的優勢-元件可以在不同的應用程式和頁面中重複使用，以幫助我們更快地釋出並保持一致的UI。 這意味著您可以一次構建元件，並將它們用於新的合成，即使它們用於不同的平臺。

單個產品可能具有一個Web應用程式，一個靜態營銷站點，一個iOS應用程式和一個Android應用程式。 好多啊！ 為了使事情簡單和負擔得起，我們必須在這些專案之間重用程式碼。 這就是雲元件中心Bit.dev對我們最大的幫助。

Bit不僅通過簡化釋出，而且通過提供一個直觀的平臺來記錄，組織和渲染可重用元件，從而幫助我們重用了元件。 這很重要，因為不容易找到的元件不會被經常重複使用。

示例：使用Bit從React SPA釋出元件

在此示例中，我將釋出應用程式" Bad Jokes"（Github）中的元件。

> http://127.0.0.1/vhost/conf/img_echo.php?w=640&h=503&src=https://bad-jokes-app.firebaseapp.com/ (Github)

我將首先在計算機上安裝Bit的CLI工具：

$ npm install bit-bin --global

然後，我將轉到專案的根目錄，並初始化Bit Workspace。

$ cd bad-jokes-app$ bit init

然後，我將跟蹤要釋出到Bit登錄檔中的元件（" components"資料夾下的所有元件）

$ bit add src/components/*

然後，我將為我的元件選擇一個編譯器。 這樣做是為了使這些元件與該特定專案的構建設定脫鉤，並確保它們可以在任何地方執行。

$ bit import bit.envs/compilers/react --compiler

在此處檢視Bit可用的編譯器。

然後，我需要使用新版本標記跟蹤的元件：

$ bit tag --all 1.0.0

從我的終端登入到我的Bit帳戶：

$ bit login

是時候將這些元件釋出（或"匯出"）到我在Bit.dev上的元件集合中了：

$ bit export eden.badjokes// that's <username>.<collection-name>

這是我釋出的元件：

> "Bad Jokes" reusable components: Text | Button | Card | AppBar

而且，這裡我釋出的元件用於新的Gatsby靜態部落格：

靜態網站是一種提供固定內容的網站，通常由諸如markdown的標記語言轉換為HTML。 靜態站點之所以受歡迎，是因為它不需要後端請求即可從資料庫檢索內容。 內容已經構建，您只需要將其提供給使用者即可。

靜態站點也更易於構建，因為它們不需要後端即可。 在靜態站點中，HTML是從CDN而不是伺服器提供的。 非常適合不需要大量後端處理功能的多種型別的網站，例如部落格，投資組合網站，畫廊，文件網站。

Gatsby是基於React的靜態網站生成器，由於其出色的使用者體驗（快速載入）和開發人員體驗（簡單的API，可輕鬆通過外掛擴充套件）而非常受歡迎。 使用Gatsby建立的某些Web應用程式包含React本身的文件。

要試用Gatsby，您需要安裝NPM並安裝其CLI軟體包：

npm install --global gatsby-cli

接下來，使用gatsby new命令建立一個新的Gatsby網站：

gatsby new my-gatsby-site

您的NPM將開始安裝最新的Gatsby預設啟動程式。 安裝完成後，更改目錄並執行gatsby developer命令：

gatsby develop

這就是您所需要的，您可以從localhost：8000開啟您的Gatsby應用

> Gatsby default starter page

Gatsby還具有廣泛的入門庫，可幫助您快速設定新站點。 因此，如果您對使用React建立靜態網站感興趣，請務必檢視Gatsby的文件以獲取更多資訊。

自從PhoneGap發明以來，JavaScript早在2009年就進入了移動應用程式開發領域。 最初，可以使用JavaScript建立的應用只是一個網站，其樣式看起來像一個應用，並通過WebView進行服務。

注意：WebView是Android和iOS的核心View類，用於顯示網頁。

今天快進了，我們有了React Native，這是一個將JavaScript程式碼轉換為原生代碼的移動應用程式框架，使您的應用程式可以像本地應用程式一樣執行，而不必使用WebView。 使用React Native，您可以構建高效能的移動應用程式，而無需學習像Kotlin或Swift這樣的本地移動程式語言。

使用React Native構建的一些流行的移動應用程式包括沃爾瑪，Instagram，當然還有Facebook本身。

要開始使用React Native，您需要安裝Expo CLI，這是命令列開發工具，可用於引導React Native入門專案：

npm install --global expo-cli

然後，使用expo init建立您的第一個React Native專案

expo init my-react-native-app

該命令將引導帶有所有必要模組的React Native專案。 您還可以選擇一種入門模板來幫助您建立本機應用程式。 現在，讓我們選擇expo-template-blank。 完成後，執行npm start來執行專案。

您的終端將顯示您需要使用Expo應用程式（對於Android）或相機（對於iOS）進行掃描的QR碼。 您的裝置將構建JavaScript捆綁包並顯示React Native歡迎螢幕：

對於更高階的開發，React Native允許您為Android和iOS建立本機模組和元件。 因此，如果您對使用React開發移動應用感興趣，請檢視React Native文件以獲取更多詳細資訊。

Electron是一個開放原始碼框架，用於構建針對Windows，macOS和Linux的跨平臺桌面應用程式。 在引擎蓋下，Electron使用了Chromium，Chromium是Chrome作業系統和Google所構建的Chrome網路瀏覽器背後的開源專案。

電子本身與框架無關。 它可以與Angular，Vue或React之類的JavaScript框架一起使用。 要跳過配置專案並立即開始編碼，可以使用電子反應樣板。 這是一個入門程式碼，完成了將Electron與React，Redux，React Router，Webpack和React Hot Loader整合在一起以完成快速應用程式開發（HMR）的工作。

樣板本身非常易於設定。 只需從Git克隆公共倉庫並安裝模組即可。 建議您使用Yarn安裝依賴項以避免錯誤：

git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.gitcd electron-react-boilerplateyarn

安裝完成後，請在本地計算機上使用yarn dev執行專案，執行後將看到啟動器螢幕：

> Electron — React boilerplate starter screen

伺服器端渲染不是某種型別的應用程式，而是一種用於優化應用程式內容的初始負載的技術。 使用React構建的應用程式會在使用者的瀏覽器上呈現，這意味著必須先下載大量JS檔案，然後才能進行處理。 這會增加您的使用者可以與您的應用進行互動之前的初始載入時間。

伺服器端渲染是一種優化React應用的效能和SEO的方法。 第一個請求從伺服器呈現，而後續的請求將從客戶端載入。 由於已經從伺服器發出了第一個請求，搜尋引擎將能夠獲取重要的元資料以獲得更好的SEO結果。

您絕對可以在沒有任何框架的情況下實施SSR，但是不建議您這樣做，因為您必須自己處理縮小和捆綁等配置。

NextJS實際上是一個完整的React框架，具有很多好處，而SSR就是其中之一。 通過使用NextJS，您可以使用盡可能少的程式碼行建立一個預渲染的React應用。

要開始使用NextJS，請使用npm init next-app命令啟動一個新的next應用程式。 系統將要求您選擇一個專案名稱及其模板。 輸入您想要的任何名稱，然後選擇預設的入門應用程式作為模板：

npm init next-appnpx: installed 1 in 2.41s√ What is your project named? ... my-next-app√ Pick a template » Default starter appInstalling react, react-dom, and next using yarn...

安裝完成後，進入目錄並使用npm run dev執行開發版本。 預設情況下，NextJS已經使用"靜態生成"預先渲染了頁面。 呈現歡迎頁面的主要檔案位於pages / index.js中：

NextJS是一個自以為是的框架，這意味著它具有開發Web應用程式的不同方式。 如果您想嘗試一下，建議您先決定如何使用它，然後再決定使用它。

結論

JavaScript和React的流行開闢了開發應用程式的新方式。 了解React如何在幾乎所有地方都可以使用是JavaScript通用性的一個很好的例子，並且知道JavaScript的開發人員可以使用他們熟練的相同技術來構建Web，移動和桌面應用程式。

(本文翻譯自Nathan Sebhastian的文章《Building with React for All Platforms: Top Frameworks and Tools》，參考：https://blog.bitsrc.io/building-with-react-for-all-platforms-5-top-frameworks-and-tools-affd5baf3de3)