如何在 ReactJS 中创建密码清单？

在本文中，我们将学习如何在 ReactJS 中添加密码清单。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要添加我们的清单，我们将使用 react-password-checklist 包。 react-password-checklist 包帮助我们将密码清单集成到我们的应用程序中。所以首先，我们将安装 react-password-checklist 包，然后我们将在我们的主页上添加一个清单。

创建 ReactJS 应用程序：您可以使用以下命令创建一个新的 ReactJS 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-password-checklist 包：

npm i react-password-checklist

项目结构：看起来像这样

添加密码清单：安装软件包后，我们可以轻松地在应用程序的任何页面上添加清单。对于此示例，我们将向我们的主页添加一个清单。

在App.js文件中添加以下内容：

App.js

import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"
  
export default function PasswordGfg(){
  const [password, setPassword] = useState("")
    const [passwordAgain, setPasswordAgain] = useState("")
    return (
        

      
ReactJs Password Checklist
            Password:
             setPassword(e.target.value)}>
            
            Password Again:
             setPasswordAgain(e.target.value)}>
            
  
            
        
    )
};

说明：在上面的示例中，我们首先导入 PasswordChecklist 组件，然后在新函数中使用已安装的组件来添加我们的清单。我们还使用 useState 挂钩来存储密码的值。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：