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

FormattedMoney 组件

让我们创建一个组件FormattedMoney以在渲染前将金额格式化为小数点后两位。

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

接下来，在src/components文件夹中创建一个FormattedMoney.js文件，然后导入 React 库。

import React[……]

继续阅读

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

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

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

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

constructor(props) {
super(props);
}

接下来，更改渲染方法并从 props 中填充值。

render() {
return (
<div>
<div><b>Item:</b> <em>{t[……]

继续阅读

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

import { connect } from ‘react-redux’;

接下来，导入 Formik 库..

iimport { Formik } from ‘formik’;

接下来，从路由器库中导入 withRouter 方法。

import { withRouter } from “react-router-dom”;

接下来，从我们的操作库中导入 addExpense。

import { addExpense } from ‘../actions/exp[……]

继续阅读

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

import { connect } from ‘react-redux’;

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

import { getExpenseList, deleteExpense } from ‘../actions/expenseActions’;

接下来，添加带有道具的构造函数。

constructor(props) {
super(props);
}

接下来，在componentDidMount([……]

继续阅读

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

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

让我们创建用于管理 Redux 状态的操作类型、操作创建者、操作和归约器。

在 src 文件夹下创建文件夹操作。

接下来，创建一个文件types.js来创建动作类型。

export const LIST_EXPENSE_STARTED = ‘LIST_EXPENSE[……]

继续阅读

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

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

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

npm install –save redux react-redux react-router-dom formik redux-thunk

配置路由器

接下来，在src/components文件夹下创建一个新文件Home.js并编写一个基本的Home组件。

import React from “react”;

class Home extend[……]

继续阅读

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

创建骨架应用程序

打开终端并转到您的工作区。

> cd /go/to/your/workspace

接下来，使用Create React App工具创建一个新的 React 应用程序。

> create-react-app react-expense-app

它将使用启动模板代码创建一个新文件夹rea[……]

继续阅读

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

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

特征

我们的示例费用管理器应用程序的一些功能是 –

• 列出服务器的所有费用
• 添加费用项目
• 删除费用项目

这里，

• Expense管理器 API
• 安装必要的模块
• 状态管理
• 列出Expense
• 添加Expense

[……]

继续阅读

Building & Deployment

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

建造

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

一个命令就足以创建应用程序的生产版本。

npm run build
> expense-manager@0.1.0 build path\to\expense-manager
> react-scripts build

Creating an optimized production build…
C[……]

继续阅读

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

创建新应用程序

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

使用npx脚本。

npx create-react-app <react-app-name>
npx create-react-app hello-react-app

使用npm包管理器。

npm init react-app <react-app-name>
npm init react-app hello-react-app

使用纱线包管理器。

y[……]

继续阅读