你已经准备好用React制作简单项目了，但你不知道该做什么。从哪里开始呢？

我为你创建了七个独特有趣的React项目，它们将教你在2023年所需的必要React概念。

与其他需要使用多个第三方库的推荐项目不同，所有这些项目都仅使用核心React库。每个项目都使用最新的React版本（18）和没有CSS框架。

我创建这个指南的目标是向你展示，你不需要大量的代码和特殊的库来开始用React构建酷炫的东西。

让我们开始吧！

1. 图片轮播

我们列表中的第一个React项目是一个图片滑块或轮播图。

轮播项目

如何构建

我们的轮播图应该允许用户点击向前或向后的按钮，以前往上一张或下一张图片。

图片将存储在一个简单的数组中。我们将学习如何使用状态来存储当前的图片。然后，我们将根据用户按下的按钮更新该状态以前往上一张或下一张图片。

如果用户浏览完所有图片，你将学习如何从数组的开头开始，以允许他们再次循环浏览图片。如果你不想使用图片，你还可以使用文本来制作一个推荐轮播图，该轮播图会循环浏览给定产品的评论。

最后，如果你想将你的轮播图提升到一个新的高度，可以尝试添加一个有趣的CSS过渡效果，以动画形式展示图像的变化。

你将学到的React概念

• useState（存储和更新状态）
• 条件语句（三元运算符）
• 列表、键和.map()

2. 常见问题/手风琴

另一种常见的组件类型，可以利用状态，是手风琴组件，它可以显示和隐藏文本。

手风琴项目

如何构建

你将学习如何切换状态，以确保每个手风琴在每次按钮按下后都会打开和关闭。你还将学习简单的条件语句，如(&&)运算符，它只会在手风琴状态为打开时显示手风琴的内容。

最后，我们将通过显示多个手风琴组件来创建整个FAQ（常见问题解答）部分。为此，我们将学习如何通过props将每个手风琴的数据传递到组件中。

你将学到的React概念

• 使用useState切换状态
• 条件语句（&&）
• 通过props向组件传递数据
• 使用.map()显示多个组件

3. 引用生成器

使用外部API和进行HTTP请求是任何React应用程序的必要部分。为了学习如何在React中进行HTTP请求，我们将制作一个随机引用生成器。

引用项目

如何构建

我们的引用生成器将需要使用useEffect钩子来执行“副作用”以从外部API获取引用。在获取引用后，我们将把它们放入我们的本地应用程序状态中，我们将称之为“引用”。

然后，我们将取出引用数组并使用一个函数在该数组中选择一个随机项。然后我们将把它放入另一个状态变量中，称为“引用”，然后可以将其显示给用户。

我们还想在每个引用上方添加一个“新引用”按钮，该按钮将执行相同的操作——从我们的“引用”数组中获取一个新的随机引用并将其放入“引用”中。

最后，引用未在状态中加载。因此，我们将确保使用可选链操作符（?）在尝试从状态中获取引用的值之前安全地检查我们的对象，以确保我们的应用程序不会抛出错误。

你将学到的React概念

• useEffect（执行副作用）
• 使用Fetch API进行HTTP请求
• 条件链操作符（?）

4. 购物清单

接下来，我们将看一下如何构建一个购物清单，用户可以向其中添加他们想从商店购买的新物品，并从清单中删除物品。

购物清单项目

如何构建

本项目将教你如何使用JavaScript中的数组展开运算符向我们的本地状态中添加新项目。此外，你将学习如何使用JavaScript中的“filter”函数删除任何喜欢的项目。

本项目还将让你熟悉在表单输入中输入值，然后在提交表单时检索这些值。你将使用“onSubmit”事件处理程序完成此操作。

增强此项目的一种有趣方法是使我们的用户可以双击列表中的每个项目，以在删除该项目的同时在其上画一条横线。

你将学到的React概念

• 使用useState更新列表
• JavaScript数组展开运算符和“filter”函数
• React中的表单和输入
• “onSubmit”事件处理程序

5. GitHub用户搜索

在本项目中，我们将使用输入的值来搜索GitHub中的用户，使用他们的用户名或电子邮件。

Github用户搜索项目

如何构建

你将首先将输入中键入的值存储在名为“query”的状态值中。之后，你将使用HTTP请求到GitHub API端点，然后使用浏览器的fetch API获取用户的个人资料。请求URL将使用输入值。一、GitHub用户搜索

当结果被获取后，我们将看到如何显示所有相关信息，如它们的名称、头像和链接到其个人资料的链接。

一个很好的扩展此项目的方式是尝试在用户键入时允许搜索功能，而不是必须先提交表单。确保使用防抖函数来确保你不会对GitHub API进行过多的请求并得到429错误响应（太多请求）。

二、视频播放器

React也可以用于处理HTML视频元素，并在不同视频之间切换。

视频播放器项目

如何构建

在我们的项目中，我们将允许用户使用单选输入在多个不同的视频之间切换。我们不仅将看到如何在React中处理表单中的单选输入，还将看到如何将props传递到我们的两个组件Menu和Video中。

特别是，我们将学习如何将函数传递给子组件中的父组件以更新状态。这种模式称为状态提升，是React中非常重要的模式。

改进此项目的有趣方式是添加一个按钮来扩展视频播放器的功能。例如，添加控制视频是否循环播放、视频是否自动播放等按钮。

你将学到的React概念

• React中的单选输入
• 将函数作为props传递
• 在React中提升状态

三、BMI计算器

最后，我们将构建一个简单的BMI（身体质量指数）计算器，它将使用人的体重和身高来计算他们的身体质量指数。

BMI计算器项目

如何构建

我们将使用一对范围输入，使用户可以在滑动尺度上选择其体重和身高。

基于存储的体重和身高值计算身体质量指数。我们的目标是根据存储在weight和height状态变量中的任何值立即计算其身体质量指数。

为此，我们将使用useMemoReact hook来在这两个值中任何一个发生变化时有效地计算这个值。

你将学到的React概念

• React中的范围输入
• useMemo（用于高效执行计算）

译自：https://medium.com/webdevhero/7-react-projects-for-beginners-in-2023-code-1430229684b6