如何在 ReactJS 中创建打字机效果？

ReactJS 中的打字机效果是一个 JS 包，可以用于更好的 UI 设计。这个效果允许我们在 ReactJS 中创建一个简单的打字动画。为了在 ReactJS 中使用 Typewriter，我们需要安装 typewriter-effect 包。

先决条件：

• ReactJS 的基础知识
• 已经创建了 ReactJSapp

下面按顺序描述了在 React 中使用样式组件的所有步骤。

安装：

• 步骤 1：在继续之前，首先我们必须安装打字机效果，通过在项目目录中运行以下命令，在 src 文件夹中的终端的帮助下，或者您也可以在 Visual Studio Code 的终端中运行此命令项目文件夹。

  npm install --save typewriter-effect

  yarn add typewriter-effect

• 第 2 步：安装包后，现在打开项目目录中 src 文件夹下的 App.js 文件，然后删除其中的代码。
• 第 3 步：现在导入 React 和 typewriter-effect 包。
• 第 4 步：在您的 app.js 文件中，添加此代码片段以导入 React 和 typewriter-effect 包。

  import React from 'react';
  import Typewriter from "typewriter-effect";

下面是一个示例程序来说明打字机效果的使用：

文件名 - App.js：

Javascript

import React from 'react';
  
//importing typewriter-effect
import Typewriter from "typewriter-effect";
import './App.css';
  
function App() {
  return (
    

       {
  
       typewriter
        
       .typeString("GeeksForGeeks")
         
       .pauseFor(1000)
       .deleteAll()
       .typeString("Welcomes You")
       .start();
       }}
       />
    
  );
}
  
export default App;

文件名-App.css

CSS

.App {
  font-family: sans-serif;
  font-weight:800;
  font-size:40px;
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:green;
}

输出：因此使用上述步骤，我们可以使用打字机效果来导入和更改打字动画React。