王尘宇

5个保举的框架和东西，将帮忙您利用React构建所有平台。

自2013年初次发布以来，React不断是用于构建Web应用法式的更受欢迎的库之一。全世界的开发人员都十分喜好它，以致于他们创造了奇特的办法来使React不只可用于Web开发，并且可用于挪动和桌面。

现在，React不只能够用于开发Web应用法式。 在本文中，您将进修可帮忙您构建某些特定类型的应用法式的React框架。 您会发现保举的React框架，用于构建静态网站，挪动应用，桌面应用和办事器端衬着框架。

1.跨应用重用React组件：Bit.dev

"进修一次，四处写做"

"一次构建，到处构成"

React Native的标语是"进修一次，到处写"。 关于多种平台利用不异的框架，那显然是一个很大的优势。

但是，对所有内容利用React带来了另一个庞大的优势-组件能够在差别的应用法式和页面中反复利用，以帮忙我们更快地发布并连结一致的UI。 那意味着您能够一次构建组件，并将它们用于新的合成，即便它们用于差别的平台。

单个产物可能具有一个Web应用法式，一个静态营销站点，一个iOS应用法式和一个Android应用法式。 好多啊！ 为了使工作简单和承担得起，我们必需在那些项目之间重用代码。 那就是云组件中心Bit.dev对我们更大的帮忙。

> Example: exploring React components published on Bit.dev

通过Bit.dev，能够轻松地从任何代码库发布React组件，从而使每个React项目敏捷成为可重用组件在其他所有项目中利用的另一个来源。

Bit不只通过简化发布，并且通过供给一个曲不雅的平台来记录，组织和衬着可重用组件，从而帮忙我们重用了组件。 那很重要，因为不容易找到的组件不会被经常反复利用。

示例：利用Bit从React SPA发布组件

在此示例中，我将发布应用法式" Bad Jokes"（Github）中的组件。

> 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// thats .

那是我发布的组件：

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

并且，那里我发布的组件用于新的Gatsby静态博客：

> https://bad-jokes-blog.netlify.app/ (Github)

2.静态网站：盖茨比

> https://www.gatsbyjs.org/

静态网站是一种供给固定内容的网站，凡是由诸如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的文档以获取更多信息。

3. React for mobile（Android和iOS）：React Native

> https://reactnative.dev/

自从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 welcome screen

关于更高级的开发，React Native允许您为Android和iOS创建本机模块和组件。 因而，若是您对利用React开发挪动应用感兴趣，请查看React Native文档以获取更多详细信息。

4. React for Desktop：Electron

> https://www.electronjs.org/

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

5. React SSR框架：NextJS

> https://nextjs.org/

办事器端衬着不是某品种型的应用法式，而是一种用于优化应用法式内容的初始负载的手艺。 利用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)