一、使用 MERN 释放 React 应用

React 可能为前端 web 开发开辟了新的领域,改变了我们编写 JavaScript 用户界面的方式,但我们仍然需要一个坚实的后端来构建一个完整的 web 应用。尽管在选择后端技术时有无数种选择,但使用完整 JavaScript 堆栈的好处和吸引力是不可否认的,特别是当存在强大且被广泛采用的后端技术(如 Node、Express 和 MongoDB)时。将 React 的潜力与这些经过行业测试的服务器端技术结合起来,在开发真实世界的 web 应用时,创造了多种可能性。

本书指导您完成基于 MERN 的 web 开发的设置,以构建各种复杂度的真实 web 应用。

在深入开发这些 web 应用之前,我们将在本章中回答以下问题,以设置使用 MERN 的环境:

  • 什么是 MERN 堆栈?
  • 为什么 MERN 与今天相关?
  • MERN 何时适合开发 web 应用?
  • 这本书是如何组织起来帮助梅恩大师的?

梅恩栈

MongoDB、Express、React 和 Node 一起用于构建 web 应用并组成 MERN 堆栈。在这个列表中,Node 和 Express 将 web 后端绑定在一起,MongoDB 充当 NoSQL 数据库,React 制作用户可以看到并与之交互的前端。

这四种技术都是免费的、开源的、跨平台的、基于 JavaScript 的,并得到了广泛的社区和行业支持。每种技术都有一组独特的属性,当这些属性集成在一起时,就形成了用于 web 开发的简单但有效的完整 JavaScript 堆栈。

节点

Node 是在 Chrome 的 V8 JavaScript 引擎上开发的 JavaScript 运行时环境。Node 使得在服务器端开始使用 JavaScript 来构建各种工具和应用成为可能,而以前的用例仅限于在浏览器中。

Node 具有一个事件驱动的体系结构,能够进行异步、非阻塞 I/O。其独特的非阻塞 I/O 模型消除了服务请求的等待方法。这允许构建可伸缩、轻量级的实时 web 应用,可以有效地处理许多请求。

Node 的默认包管理系统 Node package manager 或 npm 与节点安装捆绑在一起。Npm 可以访问世界各地开发人员构建的数十万个可重用节点包,并吹嘘它是目前世界上最大的开放源码库生态系统。

Learn more about Node at https://nodejs.org/en/ and browse through available npm modules at https://www.npmjs.com/.

表示

Express 是使用节点服务器构建 web 应用和 API 的基本框架。它提供了一个简单的基本 web 应用功能层,补充了 Node。

在使用 Node 开发的任何 web 应用中,Express 都可以用作路由和中间件 web 框架,该框架本身具有最少的功能。Express 应用本质上是一系列中间件功能调用。

Middleware functions are functions that have access to the HTTP request and response objects, and also the next middleware function in the web application's request-response cycle.

几乎可以按任何顺序将您选择的任何兼容中间件插入到请求处理链中,这使得 Express 的使用非常灵活。

Find out what is possible with Express.js at expressjs.com.

蒙哥达

在为任何应用选择 NoSQL 数据库时,MongoDB 都是首选。它是一个面向文档的数据库,将数据存储在灵活的类似 JSON 的文档中。这意味着字段可能因文档而异,并且数据模型可以随着时间的推移而变化,以响应不断变化的应用需求。

高度重视可用性和可扩展性的应用受益于 MongoDB 的分布式体系结构特性。它内置了对高可用性、使用分片的水平扩展以及跨地理分布的多数据中心可扩展性的支持。

MongoDB 有一种表达性查询语言,支持即席查询、快速查找索引和实时聚合,提供了强大的方式来访问和分析数据,同时即使数据大小呈指数增长也能保持性能。

Explore MongoDB features and services at https://www.mongodb.com/.

反应

React 是一个用于构建用户界面的声明性和基于组件的 JavaScript 库。它的声明性和模块化特性使开发人员能够轻松地创建和维护可重用、交互式和复杂的用户界面。

如果使用 React 构建显示大量变化数据的大型应用,那么它可以快速响应,因为它可以在特定数据发生变化时高效地更新和呈现正确的 UI 组件。React 通过其著名的虚拟 DOM 实现实现了这种高效的呈现,它将 React 与其他 web UI 库区分开来,这些 web UI 库直接在浏览器的 DOM 中通过昂贵的操作来处理页面更新。

使用 React 开发用户界面还迫使前端程序员编写合理的模块化代码,这些代码可以重用,更易于调试、测试和扩展。

Check out resources on React at https://reactjs.org/.

由于这四种技术都是基于 JavaScript 的,因此它们本质上是针对集成而优化的。然而,在实践中如何将这些元素组合在一起以形成 MERN 堆栈可能会根据应用需求和开发人员偏好而有所不同,从而使 MERN 可定制并可扩展到特定需求。

MERN 的相关性

JavaScript 自诞生以来已经走过了漫长的道路,而且还在不断发展。MERN 堆栈技术挑战了现状,为 JavaScript 的可行性开辟了新的天地。但是,当涉及到开发需要可持续发展的实际应用时,这是一个值得选择的选择吗?下面简要介绍了为下一个 web 应用选择 MERN 的一些理由。

跨技术堆栈的一致性

由于 JavaScript 一直在使用,开发人员不需要经常学习和改变齿轮来使用非常不同的技术。这也使得处理 web 应用不同部分的团队能够更好地进行沟通和理解。

学习、开发、部署和扩展的时间更少

整个堆栈的一致性还使学习和使用 MERN 变得容易,减少了采用新堆栈的开销和开发工作产品的时间。一旦建立了 MERN 应用的工作基础和工作流,复制、进一步开发和扩展任何应用所需的工作量就会减少。

在业界广泛采用

各种规模的组织都在根据其需求采用此堆栈中的技术,因为它们可以更快地构建应用,处理高度多样化的需求,并在规模上更高效地管理应用。

社区支持和增长

围绕非常流行的 MERN stack 技术的开发人员社区非常多样化,并且定期增长。随着许多人不断使用、修复、更新这些技术,并愿意帮助这些技术的发展,支持系统在可预见的未来将保持强大。这些技术将继续得到维护,并且很可能在文档、附加库和技术支持方面提供资源。

使用这些技术的方便性和好处已经得到广泛认可。由于高知名度的公司继续采用和改编,以及越来越多的人参与代码库、提供支持和创建资源,MERN 堆栈中的技术将在很长一段时间内继续发挥作用。

MERN 应用范围

考虑到每种技术的独特特性,以及通过集成其他技术来扩展此堆栈功能的便利性,使用此堆栈构建的应用范围实际上是相当多样化的。

如今,默认情况下,web 应用应该是身临其境、交互式的富客户端应用,并且在性能和可用性方面不存在缺陷。MERN 的优势组合使其非常适合开发满足这些方面和需求的 web 应用。

此外,其中一些技术的新特性和即将出现的特性,如节点的低级操作操作、MongoDB GridFS 的大文件流功能以及使用 React 360 在 web 上的虚拟现实功能,使得使用 MERN 构建更加复杂和独特的应用成为可能。

选择 MERN 技术中的特定功能,并讨论为什么这些功能不适用于某些应用似乎是合理的。但是考虑到 MERN 堆栈如何组合和扩展的多功能性;这些问题可以在 MERN 中逐案解决。在本书中,我们将演示在构建应用时如何考虑特定的需求。

本书中开发的 MERN 应用

为了展示 MERN 的各种可能性,以及如何轻松开始构建具有各种功能的 web 应用,本书将展示日常使用的 web 应用以及复杂而罕见的 web 体验:

The preceding screenshot gives a glimpse of the four different MERN applications developed in the rest of this book 

社交媒体平台

对于第一个 MERN 应用,我们将以 Twitter 和 Facebook 为灵感构建一个基本的社交媒体应用。这个社交媒体平台将实现一些简单的功能,比如分享帖子、喜欢和评论、关注好友以及聚合新闻提要。

在线市场

互联网上各种各样的电子商务 web 应用非常丰富,而且这些应用短期内不会过时。使用 MERN,我们将构建一个在线市场应用,涵盖核心方面,例如对卖家帐户、产品列表、客户购物车和支付处理的支持。

流媒体应用

为了测试一些高级 MERN 功能,下一个选择是一个更沉浸式的应用,例如媒体流应用。受 Netflix 和 YouTube 功能的启发,该应用将通过内容提供商的媒体内容上传功能和观众的实时内容流实现内容上传和查看功能。

虚拟现实网络游戏

React 360 的发布使 web VR 功能能够应用于 React 用户界面。我们将探索如何通过整合一个基本的网络虚拟现实游戏应用,在 MERN 中使用 React 360 创建罕见的网络体验。用户将能够制作和玩虚拟现实游戏,每个游戏都有动画虚拟现实对象,玩家可以收集这些对象来完成游戏。

图书结构

这本书的目的是帮助那些对 MERN 堆栈没有多少经验的 JavaScript 开发人员建立并开始开发各种复杂度的 web 应用。它包括构建和运行不同应用的指南,并辅以代码片段和关键概念的解释。

本书分为五个部分,从基本主题到高级主题,带领您从头开始构建 MERN,然后使用它开发具有简单到复杂功能的不同应用,同时演示如何根据应用需求扩展 MERN 堆栈的功能。

MERN 入门

第 1 章使用 MERN释放 React 应用准备开发环境为在 MERN 堆栈中开发 web 应用设置上下文,并指导您完成开发环境的设置。

从头开始构建 MERN–一个框架应用

第 3 章用 MongoDB、Express、Node构建后端在第 4 章中增加一个 React 前端来完成 MERN展示了如何将 MERN 堆栈技术结合起来,形成一个具有最少基本功能的框架 web 应用。这个骨架 MERN 应用作为本书其余部分中开发的四个主要应用的基础。

使用 MERN 开发基本 web 应用

在本部分中,您将通过构建两个真实世界的应用来熟悉 MERN stack web 应用的核心属性:第 5 章中的简单社交媒体平台;从简单社交媒体应用开始,以及第 6 章中的在线市场,通过在线市场章节7扩展订单和支付市场来练习新的 MERN 技能

向复杂 MERN 应用迈进

第 8 章构建流媒体应用第 9 章定制媒体播放器并改进 SEO第 10 章开发基于网络的虚拟现实游戏第 11 章使用 MERN将虚拟现实游戏动态化,展示如何使用此堆栈开发具有更复杂和沉浸式功能的应用,如使用 React 360 的媒体流和虚拟现实。

与梅恩一起前进

最后第 12 章遵循最佳实践并进一步开发 MERN总结了前面的章节和通过扩展最佳实践开发的应用,以成功开发 MERN 应用,建议改进和进一步开发。

根据您的经验水平和偏好,您可以选择按规定顺序使用本书。一个对 MERN 非常陌生的开发人员可以遵循书中列出的路径。对于经验更丰富的 JS 开发人员来说,从头开始构建 MERN-一个框架应用部分中的章节将是开始构建基础应用的好地方,然后选择四个应用中的任何一个进行构建和扩展。

充分利用这本书

本书的内容是面向实践的,涵盖了与构建每个 MERN 应用相关的实现步骤、代码和概念。建议您不要只阅读章节,而应并行运行相关代码,并在遵循本书中的说明的同时浏览应用功能。

讨论代码实现的章节将指向包含完整代码的 GitHub 存储库,以及关于如何运行代码的说明。在阅读本章之前,您可以提取代码、安装并运行它:

您可以考虑以下建议的步骤,以遵循本书中的实施方案:

  • 在深入讨论本章中讨论的实现细节之前,请从相关 GitHub 存储库中提取代码
  • 按照代码说明安装和运行应用
  • 浏览正在运行的应用的功能,同时阅读相关章节中的功能描述
  • 代码在开发模式下运行,并在编辑器中打开,请参阅本书中的步骤和说明,以更深入地了解实现

本书旨在为每个应用提供一个快速的工作代码。您可以根据需要试验、改进和扩展此代码。为了获得积极的学习体验,我们鼓励您在阅读本书的同时重构和修改代码。在一些例子中,本书选择了冗长的代码,而不是简洁、清晰的代码,因为对于新手来说,这更容易推理。在其他一些实现中,本书坚持使用更广泛的传统约定,而不是现代和未来的 JavaScript 约定。这样做是为了在您自己研究所讨论的技术和概念时,在参考在线资源和文档时尽量减少差异。本书中的代码可以更新的这些实例是一个很好的机会,可以探索和提高本书所涵盖的以外的技能

总结

在本章中,我们了解了在 MERN 堆栈中开发 web 应用的上下文,以及本书将如何帮助您使用该堆栈进行开发。

MERN stack 项目集成 MongoDB、Express、React 和 Node 来构建 web 应用。这个堆栈中的每一项技术都在 web 开发领域取得了相关的进步。在不断壮大的社区的支持下,这些措施得到了广泛采用,并在不断改进。可以开发具有不同需求的 MERN 应用,从日常使用的应用到更复杂的 web 体验。本书中面向实践的方法可用于将 MERN 技能从基础提高到高级,或直接用于构建更复杂的应用。

在下一章中,我们将通过设置开发环境开始为 MERN 应用开发做准备。