入门

开发者经常会一起使用 Flow 和 React，因此 Flow 能够有效地键入常见和高级 React 模式非常重要。本指南将教你如何使用 Flow 创建更安全的 React 应用。

¥Developers will often use Flow and React together, so it is important that Flow can effectively type both common and advanced React patterns. This guide will teach you how to use Flow to create safer React applications.

在本指南中，我们将假设你了解 React 基础知识 并重点关注为你已经熟悉的模式添加类型。我们将使用基于 react-dom 的示例，但所有这些模式也适用于 react-native 等其他环境。

¥In this guide we will assume you know the React basics and focus on adding types for patterns you are already familiar with. We will be using examples based on react-dom, but all of these patterns work in other environments like react-native as well.

使用 React 设置 Flow

¥Setup Flow with React

Flow 和 Babel 配合得很好，因此作为已经使用 Babel 的 React 用户，采用 Flow 并不需要太多的时间。如果你需要使用 Flow 设置 Babel，可以按照 本指南 进行操作。

¥Flow and Babel work well together, so it doesn't take much to adopt Flow as a React user who already uses Babel. If you need to setup Babel with Flow, you can follow this guide.

检查组件语法

¥Check Out Component Syntax

Flow 支持使用我们推荐的专用语法来编写 React 组件和钩子，而不是使用常规的函数/类组件。确保你使用我们的 配置工具链的最新说明 进行设置，然后查看 组件语法 和 钩子语法 文档。

¥Flow supports a dedicated syntax for writing React components and hooks that we recommend instead of using regular function/class components. Ensure you are set up using our most up-to-date instructions to configure your toolchain and then take a look at the Component Syntax and Hook Syntax docs.

React 运行时

¥React Runtimes

Flow 支持使用 JSX 所需的 @babel/plugin-transform-react-jsx 运行时选项，而无需显式导入 React 命名空间。

¥Flow supports the @babel/plugin-transform-react-jsx runtime options required to use JSX without explicitly importing the React namespace.

如果你使用新的自动运行时，请在 .flowconfig 中使用此配置，以便 Flow 知道自动导入 jsx：

¥If you are using the new automatic runtime, use this configuration in your .flowconfig so that Flow knows to auto-import jsx:

[options]
react.runtime=automatic