Eson Wong's Blog

从 2013 年 React 开放源码到现在已经过去了九年，React 一直是我最喜欢的一个前端开发框架。有追求的团队和公司前端前端团队也都会使用 React 开发。因为 React 的生态丰富又活跃。

这篇文章就来看看 React 2022 年最新的生态。希望对自己和要做Web 开发的读者的带来一些帮助。

我平时使用 Mac 电脑办工和使用 Window 电脑打游戏，我老婆使用 Apple 手机和 Window 电脑。我们都会遇到跨系统传输文件或复制本的困扰。

像云盘和同步笔记类的应用可以分别的解决这类问题，但又在各方面存在着不便。

使用国内的服务，在传输的内容上被受法律影响会被监控和审查。使用国外的服务，又会受防火墙的干扰，使用不顺畅。

于是我找到了 Snapdrop ，是一个跨平台方便在内网传输文件和文本的开源 Web 应用。但是它使用了的 Google 的服务，导致国内无法正常使用。

Nuxt.js 是一个基于 Vue 可用来创建服务端渲染(SSR) Web 应用的框架。

为什么要服务器端渲染？

Web 前端的服务器端渲染（SSR）主要有以下好处：

1. 更好的 SEO，搜索引擎可以爬取完全渲染的  HTML
2. 更快的内容到达时间（减少访问的白屏时间）

Commitlint 是一个用于检查 Git 提交的 message 是否符合项目的规范的工具。规范的提交内容可以让开发者方便快速浏览查找比较代码，可以直接从 提交内容 生成 Change log，触发 CI 流程。

1

echo '提交内容' | npx commitlint

构建前端项目会使用很多的工具，比如 ESLint、Prettier、Webpack、Babel、Husky、lint-staged、git 、编辑器等等。创建一个项目配置起来相当繁琐。

Mrm 是一个命令行工具，用于帮助开发者更好对这些工具进行管理配置。除此之外还可以对帮助我们配置 README.md、license、package.json 等文件进行管理。

1

npx mrm gitignore # 生成或更新 .gitignore

用 npx 命令可以在不安装的情况下使用 mrm。

Husky 是一个 NPM 包，用更好的使用 Git 钩子来管理项目。通常它被用于项目的代码提交前的各类规范的检查。

React Hooks 是什么？

React Hooks 是 React 16.8 版本引入的新特性，它可以让你在 React 函数组件中使用状态和其它 React Class 组件的特性。

React context 是 React 提供的基本工具，用于在组件间共享状态。

本文介绍 React context 的基本用法。

封面图：升空近三个月的 James Webb 望远镜传回第一张清晰的图像，用于镜片对齐评估。

科学技术见闻和评论。分享优秀的文章、视频、软件、服务和摘录。

封面图：M1 系列芯片。

科学技术见闻和评论。分享优秀的文章、视频、软件、服务和人生感悟等。