分类： 架构设计

正如我们之前所了解的，React 组件是 React 应用程序的构建块。一个 React 组件由多个单独的组件组成。React 允许组合多个组件以创建更大的组件。此外，React 组件可以嵌套到任意级别。让我们看看如何在本章中组合 React 组件。

FormattedMoney 组件[……]

继续阅读

让我们修改ExpenseEntryItem组件并尝试使用属性。

在您喜欢的编辑器中打开我们的费用管理器应用程序。

打开src/components文件夹中的ExpenseEntryItem文件。

使用参数 props 引入构造函数。

constructor(props) {[……]

继续阅读

打开ExpenseEntryItemList.js并从 redux 库导入连接。

import { connect } from ‘react-redux’;

接下来，导入 Formik 库..

iimport { Formik } from ‘formik’;

接下来，[……]

继续阅读

打开ExpenseEntryItemList.js并从 redux 库导入连接。

import { connect } from ‘react-redux’;

接下来，导入 addExpenseList 和 deleteExpense 操作。

import { getExpens[……]

继续阅读

我们将执行以下操作来管理我们的 redux 存储。

• 通过 async fetch api 从服务器获取费用并将其设置在 Redux 存储中。
• 通过异步获取编程向服务器添加新费用，并设置在 Redux 存储中添加新费用。
• 通过 async fetch api 从服务器中删除现有费用并更新 Redux[……]

  继续阅读

该应用程序使用下面给出的第三方反应库 –

• Redux
• React Redux
• React Router
• Formik
• Redux Thunk（用于异步获取 api）

使用以下命令使用 npm 包管理器安装所有库 –

npm install –save redux react-redux[……]

继续阅读

首先，按照Http Client Programming -> Expense Rest API Server中的说明创建一个新的费用 Rest API 应用程序并启动服务器。费用服务器将在http://localhost:8000运行。

创建骨架应用程序

打开终端并转到您的工作区[……]

继续阅读

让我们通过应用我们在本教程中学到的概念来创建一个示例费用管理器应用程序。下面列出了一些概念 –

• React 基础知识（组件、jsx、道具和状态）
• 使用react-router 的路由器
• Http客户端编程（Web API）
• 使用 Formik 进行表单编程
• 使用 Redux 进行高级状态管理
• 异步/等待[……]

  继续阅读

Building & Deployment

让我们在本章中学习如何进行 React 应用程序的生产构建和部署。

建造

完成 React 应用程序开发后，需要将应用程序捆绑并部署到生产服务器。让我们在本章中学习可用于构建和部署应用程序的命令。

一个命令就足以创建应用程序[……]

继续阅读

让我们学习本章创建 React App 命令行应用程序中可用的基本命令。

创建新应用程序

Create React App 提供了多种创建 React 应用程序的方法。

使用npx脚本。

npx create-react-app <react-app-name>[……]

继续阅读