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.dev，可以轻松地从任何代码库发布React组件，从而使每个React项目迅速成为可重用组件在其他所有项目中使用的另一个来源。

Bit不仅通过简化发布，而且通过提供一个直观的平台来记录，组织和渲染可重用组件，从而帮助我们重用了组件。 这很重要，因为不容易找到的组件不会被经常重复使用。

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

在此示例中，我将发布应用程序" Bad Jokes"（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>

这是我发布的组件：

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

2.静态网站：盖茨比

静态网站是一种提供固定内容的网站，通常由诸如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还具有广泛的入门库，可帮助您快速设置新站点。 因此，如果您对使用React创建静态网站感兴趣，请务必查看Gatsby的文档以获取更多信息。

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

自从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文档以获取更多详细信息。

4. React for Desktop：Electron

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运行项目，运行后将看到启动器屏幕：

5. React SSR框架：NextJS

服务器端渲染不是某种类型的应用程序，而是一种用于优化应用程序内容的初始负载的技术。 使用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)