React 教程：2020 年学习 React JS 的综合指南

如果您打算构建一个需要高性能和安全性的现代网站或应用程序，那么了解 React 是必要的！

如今，许多开发者和网站所有者都开始拥抱基于 React 构建的 Web 技术和框架。其中包括Gatsby 网站框架和Gutenberg 文章编辑器中的WordPress 区块。

这些只是其中几个例子。

这意味着，如果您想成为当今的开发人员，就无法逃避学习 React。

在本 React 教程中，你将学习 React JS 基础知识。此外，你还将能够构建 React 应用程序并将其部署到 Web 上。

在本系列的后续部分，您将学习React Hooks。它们是什么，以及它们如何让您轻松编写 React 代码。

一旦你对 React 有了充分的了解，那么遵循 Gatsby 网站项目或其他基于它构建的项目将是小菜一碟。

先决条件

在继续本 React 教程之前，请确保您已：

对 HTML 和 CSS 有基本的了解。
JavaScript 基础知识（对象、数组、条件等）。
熟悉 JavaScript ES6 特性（类语法、箭头函数、对象解构等）。

如果你仍然觉得 JavaScript 很难，那就跟着我一起阅读和编写代码吧。我会在编写 React 应用的过程中解释每个任务。

在本 React 教程结束时，您将能够构建此 Todos 应用程序。

为了继续，您可以在我的 GitHub 存储库中找到所有代码。

现在让我们开始吧。

什么是 React？

React（有时也称为 React.js 或 ReactJS）是一个用于构建快速交互式用户界面的 JavaScript 库。它起源于 2011 年的 Facebook，允许开发人员使用一小段独立的代码片段创建大型 Web 应用程序或复杂的 UI。

在某些方面，React 通常因其行为和功能而被称为框架。

但从技术上讲，它是一个库。与Angular或Vue等其他框架不同，你通常需要使用 React 中的更多库来构建任何解决方案。

让我们退一步来看。

我提到它允许开发人员从独立的代码片段创建复杂的 UI。

这是什么意思？

为了更好地理解，您需要开始以 React Component 的方式思考。

React 组件的思考

使用 React 构建应用程序时，你会构建一堆独立、隔离且可复用的组件。你可以将组件视为一个简单的函数，你可以调用它来输入一些数据，然后渲染一些输出。

正如我们可以重用函数一样，我们也可以重用组件，合并它们，从而创建复杂的用户界面。

我们来看看下面的图片。一个简单的待办事项应用程序。

如你所知，我们将在本教程中从头开始创建这个应用程序。它可能看起来很简单，但相信我，你最终会理解 React 的概念以及它的工作原理。

要构建此类应用或任何复杂的应用（即使像 Twitter 这样复杂），首先要做的就是将 UI 设计拆分成更小、更独立的单元，如图所示。每个单元都可以表示为一个组件，这些组件可以独立构建，然后合并形成复杂的 UI。

仍在图像上。

父组件（也称为根组件） labelTodoContainer包含所有其他组件（称为子组件）。该Header组件渲染标题内容，InputTodo接受用户输入，TodosList渲染待办事项列表，最后TodoItem处理每个待办事项。

通过这种细分，我们将单独创建五个不同的组件。

拥有这种本能表明您正在使用 React 思考！

继续。

虚拟DOM的概念

作为一名 JavaScript 开发者，你在构建交互式网站时肯定与真实的 DOM 进行过交互。不过，你或许可以避免去理解它的工作原理。

因此，让我们重申一下，以便您快速掌握 React 为我们提供的虚拟 DOM 背后的概念。

DOM（文档对象模型）是一个允许 JavaScript 或其他脚本读取和操作文档（在本例中为 HTML 文档）内容的接口。每当 HTML 文档作为网页加载到浏览器中时，都会为该页面创建一个相应的文档对象模型。这只是 HTML 的一种基于对象的表示。

这样，JavaScript 就能连接并动态操作 DOM，因为它能够读取并理解其基于对象的格式。这使得在网页上添加、修改内容或执行操作成为可能。

但是有一个问题！虽然不是 DOM 的问题。

每次 DOM 发生变化时，浏览器都需要重新计算 CSS、运行布局并重新绘制网页。

在单页应用（SPA）中，JavaScript 更新 DOM 的次数远远超过实际需要。由于 DOM 操作后浏览器工作流中的处理，速度会变得更慢。

因此我们需要一种方法来尽量减少重新绘制屏幕所需的时间。

这就是虚拟 DOM 的用武之地。

顾名思义，它是实际 DOM 的虚拟表示。

它采用一种无需重绘所有网页元素即可更新 DOM 的策略。这确保了实际的 DOM 只接收重绘 UI 所需的数据。

工作原理如下，

每当向 UI 添加新元素时，就会创建一个虚拟 DOM。

现在，如果该元素的状态发生变化，React 将第二次重新创建虚拟 DOM，并与之前的版本进行比较，以检测哪个虚拟 DOM 对象发生了变化。

然后它仅更新真实 DOM 上的对象。

这具有大量的优化，因为它降低了重新渲染网页的性能成本。

如果这些看起来很奇怪，请不要担心，您稍后会在实践中看到它们。

设置工作环境

我们可以通过多种方式与 React 交互并开始使用。虽然 React 建议通过 CLI 工具设置环境create-react-app，但我将快速指导您如何通过在 HTML 文件中编写 React 代码来开始使用 React。

这将使您快速启动并运行，并且不需要任何安装。

那么我们就这么做吧。

直接在 HTML 中编写 React

这种与 React 交互的方法是最简单的方法，如果您曾经使用过 HTML、CSS 和 JavaScript，那么它就非常容易。

让我们看看它是如何完成的。

我们首先创建index.html一个文件。在其中，我们将在 head 元素中加载三个脚本，这些脚本指向它们各自的 CDN—— React、ReactDOM和Babel。然后，我们将创建一个空div元素，并赋予其唯一值id。root这就是我们的应用程序所在的位置。最后，我们将创建一个script元素，用于编写 React 代码。

所以你的index.html文件应该是这样的：

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>React Tutorial</title>
   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
 </head>

 <body>
   <div id="root"></div>

   <script type="text/babel">
     const element = <h1>Hello from React</h1>;
     console.log(element);
   </script>
 </body>
</html>

上面代码的重点是script元素。type打开标签中的属性是使用 Babel 的必需属性（稍后会解释）。

在脚本中，我们有类似 HTML 的内容。

const element = <h1>Hello from React</h1>

您可能想知道为什么我们要在 JavaScript 中编写 HTML。

嗯，那行不是 HTML 而是 JSX。

什么是 JSX？

编写 JavaScript/React 代码来描述用户界面（UI）的外观并不像您想象的那么简单。

这使得 React 作者能够创建类似于 JavaScript 版本的 HTML。这被称为 JSX（JavaScript XML）。它是 JavaScript 的一种类似 XML 的语法扩展，使 UI 描述更加轻松直观。

在底层，由于浏览器无法读取 JSX，因此它在运行时被转换为其自身的常规 JavaScript 版本。

工作原理如下：

JSX 代码会被传入 Babel（一个 JavaScript 编译器），它会将其转换为所有浏览器都能理解的纯 JavaScript 代码。该编译器还会将所有 JavaScript ES6 特性转换为老版本浏览器能够识别的特性。例如，它会将const关键字转换为var。

让我们看一个快速演示。

前往babel 网站并在 Babel 编辑器中添加 JSX 代码。

您应该看到与上面的图像类似的内容。

如图所示，JSX 代码被转换为纯 React 代码。由此可见，使用 JSX 来描述 UI 外观要容易得多。

另外，请记住，尽管我们并没有明确使用 React 库，但我们在 HTML 代码的头部就加载了它。但在底层，React 正在使用库中的 React 对象，正如您在 Babel 编辑器右侧看到的那样。

关于 JSX，请注意以下几点

您可以通过花括号在 JSX 中使用有效的 JavaScript 表达式{}。
在 JSX 中，元素属性和事件处理程序始终采用驼峰命名法。少数例外是aria-*和data-*属性，它们采用小写形式。

回到我们的代码。

保存index.html文件并使用网络浏览器打开它。

确保您已连接到互联网，因为我们已通过 CDN 包含库。

目前，浏览器视口中什么也没有显示。但是如果你打开 DevTools 并检查 Console 选项卡（因为我们console.log在代码中用到了该元素），你会看到一个表示 JSX 的对象。

此输出是一个 React 元素，它也是虚拟 DOM 的一部分。

在 React 中，此元素可以拥有状态。每当状态发生变化时，都会创建一个新的 React 元素。React 会比较这些元素，找出哪些发生了变化。然后，它会访问真实的 DOM 并仅更新发生变化的对象。

让我们在真实的 DOM 中渲染 React 元素。

更新script元素，使其看起来像这样：

<script type="text/babel">
  const element = <h1>Hello from React</h1>; ReactDOM.render(element,
  document.getElementById("root"));
</script>

在脚本中，我们调用了render()React通过ReactDOM对象暴露的方法。

记住，我们已经将库包含在HTML 文件的文件ReactDOM中了。否则，该方法将无法正常工作。headrender()

该方法的第一个参数render()定义了要渲染的内容，而第二个参数定义了要渲染的位置。如代码所示，我们使用原生 JavaScript 在文件中引用div容器（通过rootid）.html。

保存 HTML 文件并重新加载网页。

如果您成功地在屏幕上呈现了内容，那么您就创建了一个 React 应用程序。

恭喜。

使用 Create-React-App CLI

您无需在文件的 head 元素中手动加载脚本，而是通过安装 CLI 工具来设置 React 环境create-react-app。

此 CLI 工具将安装 React 以及您需要的其他第三方库。

要安装和使用此 CLI，您需要在计算机上安装 Nodejs才能访问其npm（节点包管理器）工具。

node -v您可以在终端中分别运行以下命令来检查是否已安装 Nodejs 和 npm npm -v。确保 Node 版本为 8.10 或更高版本，npm 版本为 5.2 或更高版本。

但如果您还没有安装它，请转到Node.js，下载并安装最新的稳定版本。

然后，从终端运行以下命令：

C:\Users\Your Name> npx create-react-app simple-todo-app

simple-todo-app这将在您选择的目录中创建一个名为的文件夹。

现在，用你最喜欢的代码编辑器打开文件夹。我将使用 Visual Studio Code。

您的初始文件结构应如下所示：

让我们快速浏览一下项目文件夹。

该node_modules文件夹包含所有第三方库以及 React 本身。它还将包含您稍后将通过 npm 安装的软件包。该public文件夹包含应用程序的公共资源，也是静态文件所在的位置。index.html公共文件夹中的内容与我们之前创建的文件夹类似。它还有一个div容器元素，您的整个应用程序将出现在其中。

该src文件夹包含工作文件。其中一个文件index.js将作为我们应用程序的入口点。不用担心所有src文件，我们将从头开始编写所有内容。

最后，它package.json包含有关您的应用程序的信息。它包含一些当前已安装的库的依赖项，如果您安装了其他软件包，它们也会列出。

说得够多了。

让我们启动开发服务器。

从您的终端，更改项目文件夹内的目录cd simple-todo-app。

然后运行此命令：

C:\Users\Your Name\simple-todo-app > npm start

注意：Ctrl + `如果您使用的是 VsCode，则可以通过按或Cmd + `或转到来切换终端View-> Terminal。

该npm start命令将启动开发服务器port 3000，并自动出现一个显示您的应用程序的新浏览器窗口。

如果没有任何反应，请在浏览器地址栏中访问此URL， localhost：3000 。

您应该看到类似下图的内容。

如图所示，您可以通过修改文件夹App.js中的文件来编辑横幅上显示的内容src。

例如，您可以将“Learn React”文本更改为其他内容。

保存文件后，浏览器会自动重新加载以使更改生效。这是因为create-react-appCLI 捆绑了热重载功能。

好的。

编写待办事项应用程序

现在，我们可以开始创建 React 应用了。描述前端内容的文件位于该src文件夹中。

由于本 React 教程主要针对初学者，因此我们将src从头开始编写所有文件。

因此，让我们首先删除文件夹中的所有文件src。

执行此操作后，前端会立即崩溃。这是因为 React 需要文件夹index.js中有一个文件src。该文件是入口点。

让我们创建该文件。

在src文件夹中创建一个index.js文件并添加以下代码：

import React from "react"
import ReactDOM from "react-dom"

const element = <h1>Hello from Create React App</h1>

ReactDOM.render(element, document.getElementById("root"))

保存文件后，您将看到前端显示的标题文本。

将此代码与我们一开始直接在 HTML 文件中编写的代码进行比较。您会发现，除了导入 React 和 ReactDOM 而不是加载它们各自的 CDN 之外，我们没有做任何特殊的事情。

注意：语句是 ES6 的一项功能，它允许我们从各自的模块（和）中import引入对象（React和）。ReactDOMreactreact-dom

模块只是一个通常包含类或函数库的文件。

CLIcreate-react-app已安装这两个文件供我们使用。

另请注意，我们不会加载 Babel 来将 JSX 编译为 JavaScript。Babel 已随此 CLI 捆绑。

目前，我们通过直接在真实 DOM 中渲染 JSX 元素ReactDOM.render。这是不切实际的。

想象一下，如果有一个应用程序包含数百个元素，您会同意我的观点，认为它很难维护。

因此，我们不会渲染一个简单的元素，而是渲染一个 React 组件。

创建组件文件

记得，一开始，我们将应用程序分解成一个由独立组件组成的树状结构。其中TodoContainer，父组件包含三个子组件（Header、InputTodo和TodosList）。然后，TodosList包含另一个名为的组件TodoItem。

意思是，我们总共创建了五个组件。

再次，请参见下图：

让我们创建这些文件。

components首先在目录内创建一个名为的文件夹，然后src创建这些组件文件 –TodoContainer.js即Header.js，，，InputTodo.js和。TodosList.jsTodoItem.js

接下来在父组件文件中添加以下代码，TodoContainer.js并保存：

import React from "react"
class TodoContainer extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello from Create React App</h1>
        <p>I am in a React Component!</p>
      </div>
    )
  }
}
export default TodoContainer

另外，进入index.js文件并更新它，使其看起来像这样：

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

ReactDOM.render(<TodoContainer />, document.getElementById("root"))

保存文件并检查前端。

您应该在屏幕上呈现一个标题和一个段落文本。

我们做了什么？

首先，要在 React 中创建组件，您可以将其编写为类或基于函数的。

类组件是使用 ES6 类语法创建的，而函数组件是通过编写函数创建的。

在我们应用程序的父文件中，我们定义了一个名为的 React 组件类，TodoContainer并扩展了ComponentReact 库中的类。在这个类中，我们有一个render()方法，用于返回在屏幕上渲染的 JSX。

确保导入React对象以使 JSX 能够正常工作。

请注意：除非将多个 JSX 元素包装在一个元素中，否则您无法返回多个相邻的 JSX 元素。在我们的例子中，我们将它们包装在一个中<div>。但是，如果您不想在元素周围使用多余的包装器，则可以将所有内容包装在一个React Fragment（一个不会显示在 DOM 中的虚拟元素）中。

例如，使用<React.fragment>（或使用快捷方式<></>）而不是<div>。
<React.Fragment>
  <h1>Hello from Create React App</h1>
  <p>I am in a React Component!</p>
</React.Fragment>

在我们将其导入并在文件中呈现之前，该TodoContainer组件与应用程序是隔离的index.js。

在文件中，我们使用类似于 HTML 的自定义标签来渲染组件<TodoContainer />。

现在，我们不再渲染一个简单的 JSX 元素，而是渲染一个 React 组件。

几点说明：

对于组件文件名使用 UpperCamelCase 是一个很好的惯例（即TodoContainer.js）。
React 中的组件名称必须大写。在我们的例子中，TodoContainer是。

这是必要的，以便<TodoContainer />JSX 中的实例（例如）不会被视为 DOM/HTML 标签。

另外，请注意index.js文件中使用的组件文件路径。确保始终指定该文件相对于当前目录的相对路径。在本例中，"./components/TodoContainer". 表示该TodoContainer文件位于components当前目录下的文件夹中。

文件扩展名默认为.js，因此您不需要附加它。

处理数据

创建 React 应用时，组件接收和/或传递数据是必不可少的。子组件可能从父组件接收数据，也可能由用户直接向组件输入数据。了解如何处理数据对于构建 React 组件至关重要。

这给我们带来了状态和道具的概念。

从道具开始

props（代表属性）可以被认为是 HTML 元素中的属性。

例如下面标签中的属性 – type, checked–input就是 props。

<input type="checkbox" checked="{true}" />

它们是沿组件树发送数据和/或事件处理程序的主要方式，即从父组件到其子组件。

当这种情况发生时，子组件中接收的数据将变为只读，并且无法被子组件更改。这是因为数据归父组件所有，并且只能由同一个父组件更改。

国家

如果 props 允许子组件从其父组件接收数据，那么当用户直接向组件输入数据时会发生什么？

这就是我们拥有国家的原因。

将状态视为可以存储到特定组件的数据。这些数据归其所有，并且只能由持有它的组件更新。因此，状态应为该组件的本地状态。

因此，每当您希望在用户执行某些操作（例如更新输入字段、切换菜单按钮等）时更新某些数据时，您都将利用状态。

添加状态

正如我们在应用程序图中看到的，InputTodo组件将承担接受用户输入的责任。

这意味着我们需要一个地方来存储通过输入接收到的数据。这样，我们就可以在前端显示这些数据了。

不过，您可以决定在前端显示一些默认的待办事项。或者，如果您愿意，也可以显示一个空的待办事项列表。

无论哪种方式，您都需要在文件中定义一个状态。

对于每个将访问状态数据的组件，您都需要在其最近的公共父级文件中声明状态。

例如，在我们的应用图中，InputTodo组件中的输入字段将向状态添加数据。此外，TodoItem组件中的“删除”按钮将访问状态数据并删除待办事项。

因此，状态数据将存在于其TodoContainer最接近的共同父级组件中。

希望清楚吗？

要在类组件中添加状态，我们只需创建一个state具有不同键值对的对象。值可以是字符串或对象数组。

对于待办事项数据，我们将有一个对象数组。

render()因此在文件中的方法上方添加以下代码TodoContainer.js：

state = {
 todos: [
   {
     id: 1,
     title: "Setup development environment",
     completed: true
   },
   {
     id: 2,
     title: "Develop website and add content",
     completed: false
   },
   {
     id: 3,
     title: "Deploy to live server",
     completed: false
   }
 ]
};

仍然在文件中，更新render()方法，使其看起来像这样：

render() {
 return (
   <div>
     {this.state.todos.map(todo => (
       <li>{todo.title}</li>
     ))}
   </div>
 );
}

保存文件并检查前端。

那么我们做了什么？

定义状态数据后，我们在render()方法中使用访问它this.state.todos。由于它的值是状态中声明的对象数组，我们循环遍历该数组并输出每个待办事项，即title。

在 React 中，我们利用map()高阶函数的方法来进行这种迭代。

请记住，您可以通过花括号在 JSX 内使用有效的 JavaScript 表达式{}。

如果你查看 DevTools 的控制台，你会看到 React 警告。我们稍后会处理这个问题。

现在，我希望你比较一下前端结果和应用程序图。你会发现另一个名为的组件TodosList负责处理待办事项列表。

这就是我们将应用前面解释过的知识的地方props。

我们想要做的是将state数据从TodoContainer传递给TodosList组件。回想一下，我们可以通过沿树向下传递数据props。并且我提到过， prop 就像 HTML 属性一样。

让我们应用它。

首先，进入TodosList.js文件并创建一个名为的组件TodosList。现在，您可以渲染任何内容。我们很快就会更新它。

之后，打开TodoContainer.js文件并修改render()方法，使其如下所示：

render() {
  return (
    <div>
      <TodosList todos={this.state.todos} />
    </div>
  );
}

由于我们使用的是组件实例，因此<TodosList />在另一个文件中，您必须导入该组件。因此，请在文件顶部添加此代码TodoContainer.js。

import TodosList from "./TodosList";

至此，你已经在 propsstate中获得了数据todos。感谢这一行代码：

<TodosList todos={this.state.todos} />

现在，我们可以通过组件访问这些props数据TodosList。

因此让我们更新TodosList.js文件，使其看起来像这样：

import React from "react"

class TodosList extends React.Component {
  render() {
    return (
      <div>
        {this.props.todos.map(todo => (
          <li>{todo.title}</li>
        ))}
      </div>
    )
  }
}

export default TodosList

保存文件。待办事项标题应该像之前一样呈现在屏幕上。

TodosList注意我们如何使用从子组件内部访问状态数据this.props.todos。这称为prop 钻取。

通过 props，我们可以访问组件层次结构不同级别的状态数据。

总结一下，

来自组件状态的待办事项数据TodoContainer通过 props 传递。然后，我们从组件内部todos={this.state.todos}访问它。this.props.todosTodosList

让我们修复控制台警告。

每当你映射某个对象时，都会创建一个列表。React 希望列表中的每个子项都有一个唯一的 key prop。这有助于 React 识别哪些项已更改、添加或删除。

要添加这个唯一的 key prop，我们将利用stateid中提供的TodoContainer。我们可以id像访问一样访问它们title。

因此继续更新组件<li>中的元素TodosList，以便您拥有：

<li key={todo.id}>{todo.title}</li>

保存文件后错误消失。

再次，如果您回到应用程序图，您会发现另一个名为的组件TodoItem有责任处理每个待办事项。

我们之前做过类似的事情。

打开TodoItem.js文件并创建一个名为的组件TodoItem。目前，您可以渲染任何内容。

接下来，使用以下行在文件中导入组件TodosList.js：

import TodoItem from "./TodoItem";

之后，用以下行替换方法<li>中的元素map()：

<TodoItem key={todo.id} todo={todo} />

注意：由于我们正在通过待办事项进行映射，所以不要忘记添加keyprop。

此时，每个状态数据都存在于todoprops 中。现在您可以通过组件中的 props 访问这些数据TodoItem。

因此让我们更新TodoItem.js文件，使其看起来像这样：

import React from "react"

class TodoItem extends React.Component {
  render() {
    return <li>{this.props.todo.title}</li>
  }
}

export default TodoItem

保存所有文件。前端应该能够正常显示。

在TodoItem组件中，请注意我们如何访问titleusing this.props.todo.title。

在继续之前，我们先简单讨论一下React 开发者工具。

React 开发者工具

如果您想检查和调试您的应用程序，检查您的组件树或查看 React 的实时工作方式，您将需要此工具。

该工具可作为 Chrome 和 Firefox 的浏览器扩展使用。

让我们继续安装它。

转到您选择的浏览器的扩展页面（此处为Chrome，此处为Firefox ）并安装它。

安装完成后就大功告成了。无需任何其他设置。

要查看它，请右键单击网页视口上的任意位置打开浏览器 devtools，然后根据您的浏览器选择“检查”或“检查元素” 。

然后，在浏览器检查窗口中，选择“组件”选项卡以查看应用程序层次结构的视图。

请注意，如果您的网页目前没有使用 React，您将无法看到“组件”选项卡。

您可以在树中浏览不同的组件，并查看状态和属性数据。尽情体验吧。

创建函数组件

到目前为止，我们一直在使用基于类的组件来描述 UI。

在 React 16.8 之前，如果组件需要管理状态数据和/或生命周期方法（稍后会详细介绍），则必须使用此类型。这就是为什么类组件也称为有状态组件。

另一方面， React 16.8 之前的版本中的函数组件无法维护状态和生命周期逻辑，因此被称为无状态组件。

这种类型是 React 组件的最简单形式，因为它主要关注事物的外观。

但现在，随着React Hooks 的引入，情况发生了变化。

现在，您可以在函数组件内部管理基于类的逻辑（状态和生命周期）。这使我们能够灵活地仅使用函数组件创建 React 应用程序。

在本系列的后面，您将学习如何使用这些 React Hooks 来管理函数组件中的状态和生命周期逻辑。

现在，我们将在课程组件中管理它们，以便您掌握基础知识。

回到我们的应用程序。

如果你看一下我们创建的组件，就会发现只有一个组件保存着状态数据，那就是父组件TodoContainer。

这意味着我们将保留该组件作为基于类的组件。

其他目前是类组件的组件也可以是函数组件。这是因为它们不保存状态数据。

为了清楚起见，让我们将其中一个类组件转换TodoItem为函数组件。

将基于类的组件转换为函数组件

在该TodoItem.js文件中，将代码替换为以下内容：

import React from "react"

function TodoItem(props) {
  return <li>{props.todo.title}</li>
}

export default TodoItem

如果您保存文件并检查您的应用程序，您仍然会显示待办事项。

那么，有什么变化呢？

在这里，我们创建了一个具有相同组件名称的函数，而不是扩展 ES6 类React.Component。此功能组件不需要render()属于生命周期方法的方法（即将实现）。

另外，请注意，this.props类中的 component 已被替换为props。为了使用 this props，我们将其作为函数参数包含在内。

刚开始学习 React 时，你可能并不总是知道应该使用函数组件还是类组件。很多时候，一段时间后你才会意识到自己选择了错误的类型。但随着你创建的组件越来越多，做出这个选择会变得越来越容易。

好了，这个问题解决了，我们现在可以只用函数来创建 React 组件了。感谢 React Hooks。

我们将在本系列的后面讨论这个问题。

在此之前，需要注意的一个有用提示是，仅在方法内具有标记的类组件render()可以安全地转换为函数组件。

在这个 React App 中，我们将使用功能组件进行简单的展示，就像组件的情况一样Header。

在那里，我们正在渲染一个简单的标题文本。

因此，将TodoItem组件恢复为类组件。

让我们创建Header组件。

这很简单。因此，在Header.js文件中添加以下代码：

import React from "react"

const Header = () => {
  return (
    <header>
      <h1>Simple Todo App</h1>
      <p>Please add to-dos item(s) through the input field</p>
    </header>
  )
}

export default Header

保存文件。

接下来，进入TodoContainer组件内部并在顶部导入文件，如下所示：

import Header from "./Header"

<Header />然后，在方法中调用它的实例，render()这样你就有了：

render() {
  return (
    <div>
      <Header />
      <TodosList todos={this.state.todos} />
    </div>
  );
}

保存文件。标题文本应该显示在前端。

注意我们如何使用 ES6 箭头函数：

const Header = () => {

上面这一行与下面这一行相同：

function Header() {

因此，选择您最舒服的一个。

结论

很高兴你来！我们已经开始了。

到目前为止，我们已经接触了一些 React 基础知识并开始编写简单的待办事项应用程序。

在下一部分中，我们将深入探讨如何在 React 中处理表单、引发和处理事件等等。

在开始下一部分之前，请尽量在网上分享本指南。如果您有任何疑问，我很乐意为您解答。

第 2 部分：React 表单和事件处理入门

在 Twitter 上关注我@ibaslogic

文章来源：https://dev.to/ibaslogic/react-tutorial-a-compressive-guide-to-learning-react-js-in-2020-1jdi