当你开始建立一个新网站，你要做的第一件事是运行create-react-appmy-website，但是你有没有停下来考虑一下为什么你甚至首先使用React?仅仅是钩子还是你可以轻松创建组件并在页面中使用它们?
为什么会有这个工具?本文将解释React存在的原因以及它如何成为一种快速创建网站的首选工具。
React是JavaScript的一个框架，JavaScript在Web开发环境中发挥着重要作用。HTML和CSS分别是标记和样式表文档，它们将元素组合在一起并设置样式以在网页上美观地显示，但这就是他们所能做的，你不能触发任何动态内容，这就是JavaScript的用武之地。
Web浏览器中的JavaScript引擎还连接JavaScript和使用HTML和CSS构建的Web文档，在浏览器允许JavaScript执行的许多其他功能中，浏览器还允许JavaScript访问文档对象模型(DOM)。DOM是一个树对象，它包含Web文档中的所有元素。访问此树使JavaScript可以删除、修改和添加元素到文档。
我们过去是怎么做的?现在怎么不一样了?
例如，我们有一个包含三个页面的网站：Home、About和Contact。这是一个在没有JavaScript功能的情况下如何创建此网站的示例：
index.html用于主页页面
about.html用于关于页面
contact.html用于联系页面
styles.css用于样式表，其中包含应用程序的样式声明
对于这样的网站，导航到mywebsite. 如果用户点击主页上的about链接，浏览器将不得不再次获取HTML文件并将资源加载到页面，联系页面也是如此。任何新导航总是会重新加载站点，即使第1页和第2页之间的差异可能是单个字符或图像。
引入了单页应用程序(SPA)来解决这个问题和其他缺点，今天的网站速度更快，并且有了SPA，调试网站也变得更加容易。
单页应用(SPA)的兴起
多页应用程序(MPA)-构建应用程序的传统方式-需要在每次导航时刷新页面，即使前一页和当前页面包含的差异很小。
SPA的概念涉及动态组合元素并在客户端(即浏览器)上为你导航到的任何页面呈现页面，这与MPA不同，后者从服务器呈现页面并且只为该页面提供资源。
客户端渲染是使用JavaScript完成的，其中大部分是在激活新页面时借助DOM操作(修改、添加和删除屏幕上的元素)完成的。
使用SPA，网站通常只访问服务器一次以获取index.html文件。该文件引用了一个JavaScript文件，该文件处理不同页面的客户端呈现实现。因此，当你导航到新页面时，该页面不会重新加载。
地址栏中的URL更新，浏览器中的路由状态更新，JavaScript在需要的地方更新文档。对于像页眉和页脚这样的地方，通常在所有页面上都是相同的，这些地方不会重新渲染，只会呈现具有新更改的正文内容。
前端Web开发极具挑战性
SPA的进步为前端开发带来了更高级的挑战，开发人员现在必须处理事件、动态加载数据、手动管理导航等等。前端已经不是以前的样子了，使用JavaScript操作DOM是一项繁重的工作，需要抽象。
声明式代码可以更可预测且更易于调试
有两种编程范式，即命令式编程和声明式编程。
在命令式编程中，你告诉计算机它需要采取的确切步骤才能达到你想要的结果。声明式编程涉及告诉计算机你想要的结果并让它处理这些步骤。
声明式代码主要是提高代码可读性的抽象，此外，它们使代码可预测。for循环可以做很多事情，但是使用过滤器抽象，你希望仅通过命名约定来获得过滤结果。当代码更容易阅读和预测时，当出现问题时更容易调试。
使用JavaScript，这些方法中的任何一种在技术上都是有效的，但是，随着人们不断构建，抽象上的抽象被创建以使代码更具声明性。你拥有lodash、jQuery、日期格式库等库。
带有可重用组件的声明式代码
构建网站的旧方法涉及在网站的所有页面上重复通用组件(如页眉和页脚)。这些组件通常具有相同的类名，都连接到一个样式表以在每个页面上显示相同。但是这种方法使得更新这些通用组件变得很困难。对主页上标题部分的任何添加都需要对使用标题的每个.html文件进行类似的更新。这种方法还使测试特定组件变得更加困难，因为你必须在每个页面上测试它，而不是只在一个地方进行测试。
今天的Web应用程序是基于组件的，从某种意义上说，它们是使用独立组件的组合构建的。在React等框架的帮助下，这种构建方法变得更加容易。
你已经单独构建了页眉、页脚和明信片组件并进行了相应的测试。然后，在创建主页时，你将导入页眉和页脚组件(如变量)并使用这些组件构建你的页面。
现在，你无需在所有页面中编写相同的标头实现，而是将其仅放在一个地方并在所有页面之间共享。对标题应用样式更改，更改会反映在整个应用程序中。
React来自哪里，谁编写和维护它
随着对更灵活、声明性、易于维护和更易于控制的组件和用户界面组合方式的需求不断增长，Facebook创建了名为FaxJS的原型是由Facebook的软件工程师JordanWalker创建的。
今天有很多人编写React，从个人开发人员到Gatsby和Next.js等框架。React在整个技术生态系统中都被使用。作为一个开源库，React吸引了许多贡献者，他们添加了功能、修复了错误，并帮助维护和管理版本更新。
为什么它在当前的就业市场中受欢迎且有价值
由于受到Facebook的支持，React是一个理想的框架。选择一个框架对企业来说是一项长期投资，他们希望为他们选择的工具提供可靠的长期支持。React还具有高性能、可扩展、灵活且易于维护的特点。
对于开发人员来说，React是一个有吸引力的选择，原因有很多：它易于上手，React背后的社区很友好，并且已经为它构建了许多工具，你有用于钩子、状态管理和许多其他东西的库!
结论
React是一个强大的抽象，它允许我们编写可重用的声明性组件。而在此之前，我们正在编写静态HTML页面，花费大量时间使用命令式JavaScript代码操作浏览器，或者在多个文件中编写相同的重复组件。
许多开发人员最初选择React是因为它使启动网站变得非常容易，但正如我们所了解的，它所做的远不止这些。