11 个 React 示例

概括

在这篇文章中，我将介绍我最近创建的 11 个 React 项目，旨在帮助 React 新手快速上手。这不是一个教程，而是一个通过示例进行学习的项目参考。

项目列表如下：

1. 起动机
2. Clicker -现场演示在这里
3. 基本时钟-现场演示在这里
4. 基本计时器-现场演示在这里
5. 高级计时器-现场演示在这里
6. 电影卡-现场演示在这里
7. Masterminds -现场演示在这里
8. 标准计算器-在线演示
9. 比特币监控器-现场演示在这里
10. 标准天气监测器-现场演示在这里
11. NoteWorx React

第 11 个项目代表了一个更高级的 React 项目，因此与本文介绍的其他 10 个项目的简洁性有所不同。它是我正在开发的另一个系列的一部分。

更新

• [2018 年 1 月 3 日] - 根据反馈，添加了项目现场演示的链接。

项目

我创建了 11 个复杂程度各异的 React 项目。每个项目虽然各有不同，但都体现了以下共同特征：

• 典型的 React 项目布局结构
• babel 设置和配置
• webpack 设置和配置
• eslint 设置和配置
• SCSS 设置和配置

每个项目都有一个详细的 README 文档，提供有关该项目的更多信息以及如何启动和运行。

项目概要清单如下：

1.启动器

这是一个基础模板，包含构建 React 应用程序所需的基本元素。此项目可作为构建新 React 项目的基础。

在此处查找更多信息。

2. Clicker

一个基本的 React 应用程序，允许增加、减少或重置计数器。

更多信息请见此处。
现场演示请见此处。

3.基本时钟

显示当前日期和时间的基本数字时钟，以及用于打开和关闭日期的切换开关。

在此处查找更多信息。

在此处查找现场演示。

4.基本计时器

一个基础计时器，根据输入的秒数开始倒计时。该计时器提供启动、停止和重置功能。当计时器达到小于等于 10 的值时，计时器颜色变为红色。

更多信息请见此处。
现场演示请见此处。

5.高级计时器

一款提供高级用户界面体验的倒计时器。计时器使用键盘在显示屏上输入小时、分钟和秒。计时器启动后，将切换到全屏模式。控制面板允许用户启动、停止、恢复和重置计时器。

在此处查找更多信息。

在此处查找现场演示。

6.电影卡

一个基础应用，以卡片列表的形式展示电影列表。每张卡片都提供电影详情，例如片名、副标题、描述、图片和评分。

在此处查找更多信息。

在此处查找现场演示。

7.主谋

这是一款基于不同难度等级的猜数字游戏。游戏的目标是猜出游戏引擎随机生成的数字。每次猜测时，游戏都会通过消息和颜色提示您的猜测与实际生成的数字的接近程度（或远近）。猜对后，玩家可以选择再次游戏。

游戏提供三种难度设置，分别为简单、中等和困难。游戏引擎会根据难度设置生成一个落在特定数字范围内的随机数。例如：

• 简单 - 0 -> 10
• 中 - 0 -> 100
• 困难 - 0 -> 1000

在此处查找更多信息。

在此处查找现场演示。

8.标准计算器

计算器提供基本的算术运算、表达式生成器以及所有表达式的完整历史记录。它允许用户在键盘和历史记录之间切换输入机制。

在此处查找更多信息。

在此处查找现场演示。

9.比特币监控器

一款监控比特币价格指数（BPI）变化的应用程序。

默认情况下，BPI 将显示美元、英镑和欧元。除了上述三种货币外，您还可以选择显示自己的货币。

Bitcoin Monitor 使用CoinDesk 比特币价格指数 API。

在此处查找更多信息。

在此处查找现场演示。

10.标准气象监测器

一款天气应用，根据您当前的地理位置显示当前天气、每日和每小时天气预报。该应用集成了OpenWeather API和Google Geolocation API。

在此处查找更多信息。

在此处查找现场演示。

11. NoteWorx React

这个项目并不像前面提到的项目那样基础。事实上，它是我正在开发的另一个系列项目的一部分，未来会发布。不过，我认为对于那些寻求更高级内容的人来说，在这篇文章中提到它会很有帮助。如果你对这个项目感兴趣，你可以在我的GitHub 页面上找到该系列迄今为止的项目列表。

NoteWorx React是一个基本的笔记应用程序，它使用 React 前端来捕获和管理笔记，使用 ExpressJS 编写的 api，以及 mongodb 来存储笔记。

在此处查找更多信息。

结论

这不是终点。我会持续添加新的项目。我会添加更多简单的 React 项目，但也会添加更多高级的 React 项目。最终，我的目标是提供尽可能多的项目，帮助你先爬，再走，再跑。飞翔的步伐，留给比我更聪明的人 ;)。到目前为止，我创建的 10 个项目就是为了帮助你先爬，甚至可能先走。