使用 React 为代码块创建打字机效果

使用打字机效果，单词一次显示一个字母，而不是一次显示所有单词，使文本看起来好像是实时书写的。您可以在Codepen 的登录页面上找到代码块打字机效果的示例，该示例使用语法高亮（一种特殊的颜色格式）来轻松地以代码的形式显示书面文本。

在本文中，我们将学习如何使用 React 从头开始构建类似的代码块打字机效果。我们还将演示一种使用预先存在的打字机包的替代方法。要学习本教程，您需要具备 React 的基本知识。我们将介绍以下内容：

• 安装依赖项

• 打造打字机效果

  • 打字机展示区

  • 添加闪烁的光标

• 将打字机效果添加到文本

• 删除和重新输入文本

• 高亮代码语法

• 使用打字库

您可以在此 GitHub 存储库中找到本教程的完整源代码。让我们开始吧！

安装依赖项

如果您还没有安装 React，请在您的系统中导航到您的项目目录，打开一个命令行窗口，然后在其中运行以下 bash 脚本：

npx create-react-app typewriter

上面的命令创建了一个 React 项目文件夹，该文件夹调用typewriter了构建我们的应用程序所需的所有依赖项。为了轻松设计我们的应用程序，我们将使用 Tailwind CSS。您可以通过在 CLI 中运行以下命令来安装 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

安装完成后，修改tailwind.config.js文件以允许支持jsx元素，如下所示：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

最后，将以下 Tailwind CSS 指令添加到 的顶层index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

打造打字机效果

我们的打字机效果将由两个主要部分组成，一个用于保存我们想要动画的文本的容器和一个用于模仿打字机的闪烁光标。

打字机展示区

首先，在我们的 App.js文件中，我们将构建打字机效果的显示窗口：

import "./App.css";
import {React, useState, useEffect} from "react";
​
function App() {
  const [text1, setT