测试是确保在任何应用程序中创建的功能符合业务逻辑和编码规范的过程之一。React 推荐使用React 测试库来测试 React 组件和jest test runner 来运行测试。react-testing-library允许单独检查组件。
它可以使用以下命令安装在应用程序中 –
npm install –save @testing-library/react @testing-library/jest-dom
创建 React 应用
Create React app默认配置React 测试库和jest测试运行器。因此，测试使用Create React A[……]
动画是现代 Web 应用程序的一个令人兴奋的功能。它给应用程序带来了清爽的感觉。React 社区提供了许多优秀的基于 React 的动画库，如 React Motion、React Reveal、react-animations 等，React 本身提供了一个动画库，React Transition Group作为附加选项更早。它是一个独立的库，增强了该库的早期版本。让我们在本章学习 React Transition Group 动画库。
React过渡组
React Transition Group库是一个简单的动画实现。它不做任何开箱即用的动画。相反，它公开了核心动画相关信息。[……]
React redux 是 React 的高级状态管理库。正如我们之前所了解的，React 仅支持组件级别的状态管理。在一个大而复杂的应用程序中，使用了大量的组件。React 建议将状态移动到顶级组件，并使用属性将状态传递给嵌套组件。它在一定程度上有所帮助，但是当组件增加时它变得复杂。
React redux 参与并帮助维护应用程序级别的状态。React redux 允许任何组件随时访问状态。此外，它允许任何组件随时更改应用程序的状态。
让我们在本章中学习如何使用 React redux 编写 React 应用程序。
概念
React redux 将应用程序的状态维护在[……]
在 Web 应用程序中，路由是将 Web URL 绑定到 Web 应用程序中特定资源的过程。在 React 中，它将 URL 绑定到组件。React 本身不支持路由，因为它基本上是一个用户界面库。React 社区提供了许多第三方组件来处理 React 应用程序中的路由。让我们学习 React Router，这是 React 应用程序的首选路由库。
安装React 路由器Routing
让我们学习如何在 Expense Manager 应用程序中安装React Router组件。
打开命令提示符并转到我们应用程序的根文件夹。
cd /go/to/expense/manag[……]
表单编程的本质是需要维护状态。因为，当用户与表单交互时，输入字段信息会发生变化。但是正如我们之前所了解的，React 库本身并不存储或维护任何状态信息，组件必须使用状态管理 API 来管理状态。考虑到这一点，React 提供了两种类型的组件来支持表单编程。
Http 客户端编程使应用程序能够通过 JavaScript 从 http 服务器连接和获取数据。它减少了客户端和服务器之间的数据传输，因为它只获取所需的数据而不是整个设计，从而提高了网络速度。它改善了用户体验，并成为每个现代 Web 应用程序不可或缺的功能。
如今，许多服务器端应用程序通过 REST API（HTTP 协议功能）公开其功能，并允许任何客户端应用程序使用该功能。
React 不提供自己的 http 编程 api，但它支持浏览器内置的fetch() api 以及像 axios 这样的第三方客户端库来进行客户端编程。本章让我们学习如何在 React 应用程序中[……]
状态管理是任何动态应用程序的重要且不可避免的特性之一。React 提供了一个简单灵活的 API 来支持 React 组件中的状态管理。让我们在本章中了解如何在 React 应用程序中维护状态。
什么是状态？
State表示给定实例的 React 组件的动态属性的值。React 为每个组件提供了一个动态数据存储。内部数据表示 React 组件的状态，可以使用组件的 this.state 成员变量访问。每当组件的状态发生变化时，组件都会通过调用render()方法以及新的状态来重新渲染自己。
更好地理解状态管理的一个简单示例是分析实时时钟组件。时钟组件的主要工作是显示给定实例中某[……]
事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序进行交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，几乎没有变化。让我们在本章学习如何在 React 应用程序中处理事件。
让我们看看在 React 组件中处理事件的分步过程。
log() {
cosole.log(“Event is fired”);
}
React 提供了另一种语法，使用 lambda 函数来定义事件处理程序。lambda 语法是 –
log = () => {[……]
React 使开发人员能够使用属性创建动态和高级组件。每个组件都可以具有类似于 HTML 属性的属性，并且每个属性的值都可以在组件内部使用属性（props）进行访问。
例如，带有 name 属性的Hello组件可以通过 this.props.name 变量在组件内部访问。
<Hello name=”React” />
// value of name will be “Hello* const name = this.props.name
React 属性支持不同类型的属性值。它们如下，
通常，React 允许通过 className 属性使用 CSS 类对组件进行样式设置。由于 React JSX 支持 JavaScript 表达式，因此可以使用许多常见的 CSS 方法。一些顶级选项如下 –