用 React 创建个人名片 | 交互式 Web 应用程序

介绍

在这个项目中，你将学习如何使用 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 组件。

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

导入必要的模块和组件：

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import profile from "../profile.png";

实现 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 状态渲染表单或名片。

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

最终结果如下：

个人资料卡提交结果

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

总结

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

使用 React 创建响应式名片

介绍

👀 预览

🎯 任务

🏆 成果

设置项目

实现 ProfileCard 组件

总结