Nader Dabit翻译：疯狂的技术宅原文：[链接]Single SPASingle SPA 是一个用于前端微服务的 javascript 框架。它使你可以在单页应用中使用多个框架，这样就可以按功能拆分代码，并 能使 Angular、React、Vue.js 程序一起运行。你可能已经习惯了 React 和 Vue 的 CLI，通过这些工具可以快速创建项目，并准备好 webpack 的...

作者：Samer Buna翻译：疯狂的技术宅原文：[链接]未经允许严禁转载这道题的答案有点复杂。首先要搞清楚 element 和 component 是不是一回事？从技术上来说，ReactDOM 不会在 DOM 中渲染 React 组件或 React 元素。它渲染由其组件实例支持的 DOM 元素。对于类组件来说这是正确的。但是对于函数组件，ReactDOM 仅渲染 DOM ...

自 Hook 被引入 React 以来，Context API 与 Hook 库在应用状态管理中被一起使用。但是把 Context API 和 Hooks（许多基于 Hooks 的状态管理库建立在其基础上）组合的用法对于大规模应用来说可能效率不高。

说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。

这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。我们将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大，同时又很容易，所以在调试 CRA 和 React 程序时没有理由不这样做。

大多数云提供商都提供了一种部署静态站点的方法。用 React 构建应用只是 JavaScript、HTML 和 CSS。它们是静态文件，几乎可以在任何 Web 服务器上使用。但实际上，如果你使用了 JSX（JS 中的 HTML）和样式化组件，那么这些可以说只有 JavaScript！

作者：Sanwar ranwa翻译：疯狂的技术宅 原文：[链接] 未经允许严禁转载 介绍 在本文中，我们将学习怎样在 ReactJS 中把文本复制到剪贴板。 依赖的知识与环境 React 基本知识。 Visual Studio Code IDE。 Bootstrap 和 HTML 的基本知识。 创建一个 React 项目 首先，用以下命令创建一个 React App。 {代码...} 然后在 Vis...

我了解到，掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型（Mental Model）。前者拥有清晰而先进的思维模型，而后者则没有。

如果有人问你将在 2020 年选择哪种框架进行开发，你的答案将是什么？很明显，你主要有两个选择： React.Js 和 Vue.Js！但是，如果你需要选择一个怎么办？好吧，两个最受欢迎的框架 React Js 和 Vue.Js 之间的战斗是真实的。确实很难表明哪个能推翻另一个。但是，我们试图在此处区分这两个框架。请阅读本文…。

现在，网络上有数百个新冠疫情跟踪器。首先我想知道他们把数据放在了哪里。经过研究，很快确定了两个主要来源。我最初使用了其中的一个。那就是约翰·霍普金斯大学。他们在 GitHub上发布了一些有用的csv文件。但是，那里的数据每天仅更新一次，所以我开始寻找一些实时服务。我找到了 TheVirusTracker。我最终使用了他们的...

React 组件内部的状态是在渲染过程之间保持不变的封装数据。 useState() 是 React hook，负责管理功能组件内部的状态。

在本文中，我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储，但是很容易就能完成这个任务。

尽管一些组织认为应该由用户选择健壮的用户名和密码来保护自己，但是开发人员可以通过将规则包含在程序的设计中来帮助进行良好的密码选择。例如，开发人员可以通过加入进度条、百分比或颜色，来帮助用户在输入密码时规定密码的质量。

作者：Marcin Wanago翻译：疯狂的技术宅 原文：[链接] 未经允许严禁转载 1.JavaScript测试教程-part 1：用 Jest 进行单元测试 2.JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 3.JavaScript测试教程–part 3：测试 props，挂载函数和快照测试 4.JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件...

在此报告中，我们调查了 Angular 和 React 生态系统的安全状态。在这份报告种我们根本没有将它们作为竞争性框架进行比较。相反，我们把它们作为可行的构建 JavaScript 项目的前端生态系统的替代方案进行了审查，同时重点关注了每种方案的安全风险和最佳实践，以及它们之间的差异。

Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。

与我使用的其他框架相比，我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL（ JSX 编译为合理的 JavaScript），组件 API 只是通过添加 React Hooks 变得更简单，并且该框架为解决的核心 UI 问题提供非常少的抽象概念。

第 4 版中发生了很多变化！从较高的层面来看，这个新版本应该可以提供显着的性能提升和改进的导航体验。它还提供对 React Hooks 的完全支持，包括检查嵌套对象。

跨框架组件用到了跨平台的方法。 跨平台是一种允许你在各种平台（操作系统，设备）上使用单一源代码的结构，可以通过 Xamarin、Flutter、NativeScript 和 React Native 等工具在 iOS、Android 和 Windows 中使用。

我们刚刚完成了用于创建在线课程的内部遗留框架的重写。在开始重写时，我们花时间研究了许多不同的解决方案，包括 Mithril、Inferno、Angular、React、Aurelia、Vue 和 Polymer。因为我是一个萌新（我刚从新闻转向网络开发），我记得每个框架的复杂性都让人感到害怕，而且不理解框架的工作方式。

自从 React 团队发布他们的 16.x 愿景以来，已经风靡了整个社区。它添加了一些非常酷的东西：Hooks、惰性加载、Suspense 和缓存 API。

在 React 16 中为了防止不必要的 DOM 更新，允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。

惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现（当它们位于视口中或即将在视口上时）。

Web 为了支持客户端和服务器之间的全双工（或双向）通信已经走过了很长的路。这是 WebSocket 协议的主要目的：通过单个 TCP 套接字连接在客户端和服务器之间提供持久的实时通信。

翻译：疯狂的技术宅原文：[链接] 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 在这篇关于 React Router 的博文中，我将引导你搞懂 React 中路由的概念。 你将看到以下主题： 常规路由 为什么需要 React 路由？ React 中的路由 React Router v4 的优点 常规路由 通常，当用户在浏览器中键入...

JavaScript 工具缓慢而稳定地在市场中扎根，对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。

正如 我们的React教程的第一部分 中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。组件有可能会变大，或者你可能最终得到一堆不是组件的组件，最终你可能会到处编写重...

前端和 JavaScript 是一个奇怪的世界。大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感到不知所措，总希望能有一些稳定的东西，就像能让我们可以休整一段时间的避风港。最近 React 似乎有变成 JavaScript 演变海洋中温暖港湾的趋势。

React Context API 现在已经成为一个实验性功能，但是只有在 React 16.3.0 中才能用在生产中。本文将向你展示两个基本的 Web 商店应用程序，一个使用了 Context API 进行构建，另一个则不用。

翻译：疯狂的技术宅原文：[链接] 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 很多教程都把 React 作为一个 UI 库来引入。这是很有道理的，因为 React 本身就是一个 UI 库。就像官网上所说的那样。 我曾经写过关于构建用户界面中遇到的挑战的文章。但是本文将会用另外一种方式来讲...