使用 React 创建响应式名片

JavaScriptJavaScriptIntermediate
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用 React 创建一张个人名片。该项目涉及构建一个响应式且交互式的 Web 应用程序,允许用户输入他们的个人信息并生成一张定制的名片。

👀 预览

项目预览

🎯 任务

在这个项目中,你将学习:

  • 如何设置一个 React 项目并安装必要的依赖项
  • 如何使用 react-hook-form 库中的 useForm 钩子来实现一个 ProfileCard 组件
  • 如何将 ProfileCard 组件集成到主 App 组件中
  • 如何使用 CSS 对应用程序进行样式设计,以创建一个吸引人且视觉上一致的设计

🏆 成果

完成这个项目后,你将能够:

  • 使用 react-hook-form 库中的 useForm 钩子来管理表单状态和验证
  • 创建可复用的 React 组件并将它们集成到一个更大的应用程序中
  • 使用 CSS 对 React 应用程序进行样式设计,以实现所需的视觉外观
  • 理解模块化和可维护的代码结构在 React 项目中的重要性

设置项目

在这一步中,你将学习如何设置项目并安装必要的依赖项。

打开你的代码编辑器,导航到项目目录。

├── public
├── src
│   ├── components
│   │   └── ProfileCard.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── profile.png
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

接下来,在终端中使用 npm install 命令下载依赖项,等待依赖项下载完成,然后使用 npm start 命令启动项目。

一旦项目成功启动,点击 “Web 8080” 在浏览器中进行预览。

实现 ProfileCard 组件

在这一步中,你将使用 react-hook-form 库中的 useForm 钩子来实现 ProfileCard 组件。

  1. 打开位于 src/components 目录下的 ProfileCard.js 文件。

  2. 导入必要的模块和组件:

    import React, { useState } from "react";
    import { useForm } from "react-hook-form";
    import profile from "../profile.png";
  3. 实现 ProfileCard 组件:

    export const ProfileCard = () => {
      const [submitted, setSubmitted] = useState(false);
      const [data, setData] = useState({});
      const {
        register,
        formState: { errors },
        handleSubmit
      } = useForm();
    
      const onSubmit = (data) => {
        setSubmitted(true);
        setData(data);
      };
    
      return (
        <div className="wrapper">
          {submitted ? (
            <>
              <img src={profile} alt="profile" className="profile" />
              <h2 className="name-text">{data.name}</h2>
              <p className="position-text">{data.position}</p>
              <p className="info-text">{data.info}</p>
            </>
          ) : (
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="form-field">
                <label htmlFor="name">姓名: </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  {...register("name", { required: "请输入你的姓名" })}
                />
                <p className="name-error">{errors.name?.message}</p>
              </div>
    
              <div className="form-field">
                <label htmlFor="position">职位: </label>
                <input
                  type="text"
                  id="position"
                  name="position"
                  {...register("position", {
                    required: "请输入你的职位"
                  })}
                />
                <p className="position-error">{errors.position?.message}</p>
              </div>
    
              <div className="form-field">
                <label htmlFor="info">简介: </label>
                <input
                  type="text"
                  id="info"
                  name="info"
                  {...register("info", { required: "请输入你的简介" })}
                />
                <p className="info-error">{errors.info?.message}</p>
              </div>
    
              <input type="submit" value="提交" className="submit" />
            </form>
          )}
        </div>
      );
    };

    在这个实现中,我们使用 react-hook-form 库中的 useForm 钩子来管理表单状态和验证。当表单提交时,会调用 onSubmit 函数,它会将 submitted 状态设置为 true,并将表单数据存储在 data 状态中。

    然后,组件会根据 submitted 状态渲染表单或名片。

  4. 通过填写表单并提交来测试应用程序。验证名片是否正确显示输入的信息。

最终结果如下:

个人资料卡提交结果

恭喜你!你已经完成了个人名片生成器项目。你已经学会了如何使用 react-hook-form 库中的 useForm 钩子来管理表单状态和验证,以及如何将 ProfileCard 组件集成到 App 组件中。你还学会了如何使用 CSS 对应用程序进行样式设计。

✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程