在 React 中创建个人资料页面不仅必不可少，而且非常有趣！它可让您的用户以时尚的方式查看和管理他们的个人信息。在本教程中，我们将使用一些很酷的 npm 包构建一个时尚的个人资料页面，包括用于制作精美个人资料图片的 Avatarium、用于流畅导航的 React Router、用于获取数据的 Axios 和用于处理表单输入的 Formik。让我们开始制作一些令人惊叹的东西吧！ 先决条件 在开始之前，请确保您已准备好以下内容： 已安装 Node.js 和 npm 对 React 的基本理解 使用 创建了一个新的 React 项目 create-react-app 步骤 1：设置你的 React 项目 首先，如果你还没有创建一个新的 React 项目：   npx create-react-app profile-page cd profile-page 第 2 步：安装所需的 npm 包 本教程需要几个 npm 包：  Avatarium：用于生成随机主题头像 React Router：用于处理导航 Axios：用于从 API 获取数据 Formik：用于处理表单状态和验证 通过运行以下命令安装这些包：   npm install @sabfry/avatarium react-router-dom axios formik 步骤 3：设置 React Router 我们将使用 React Router 在应用程序中的不同页面之间导航。首先，在 中设置路由器： App.js   import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage';   function App() { return ( <Router> <Switch> <Route path="/profile" component={ProfilePage} /> </Switch> </Router> ); }export default App; 步骤 4：创建个人资料页面组件 接下来，创建一个 组件。此组件将显示用户的个人资料信息，包括其头像、姓名和电子邮件，并允许用户使用 form.jsx 更新其信息。 ProfilePage.js   import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Avatar from '@sabfry/avatarium'; import { Formik, Form, Field } from 'formik';   const ProfilePage = () => { const [user, setUser] = useState(null); useEffect(() => { axios.get('https://api.example.com/user') .then(response => setUser(response.data)) .catch(error => console.error('Error fetching user data:', error)); }, []); if (!user) return <div>Loading...</div>; return ( <div className="profile-page"> <h1>Profile Page</h1> <div className="profile-info"> <Avatar theme="blobs" /> <h2>{user.name}</h2> <p>{user.email}</p> <Formik initialValues={{ name: user.name, email: user.email }} onSubmit={(values, { setSubmitting }) => { axios.post('https://api.example.com/user/update', values) .then(response => { setUser(response.data); setSubmitting(false); }) .catch(error => { console.error('Error updating user data:', error); setSubmitting(false); }); }} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="name">Name</label> <Field id="name" name="name" placeholder="John Doe" /> </div> <div> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="john.doe@example.com" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage; 在此组件中： 我们使用 钩子来管理用户数据。 useState 当组件安装时，  钩子会从模拟 API 中获取用户数据。 useEffect 我们使用 Avatarium 的 组件来显示随机主题的头像。 Avatar  Formik 用于处理表单状态和验证，从而轻松管理表单输入和处理提交。 步骤 5：设置个人资料页面的样式 添加一些基本 CSS 来设置个人资料页面的样式。创建一个 文件，并将其导入到 中。 ProfilePage.css ProfilePage.js   /* ProfilePage.css */ .profile-page { display: flex; flex-direction: column; align-items: center; padding: 20px; }   .profile-info { display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #f9f9f9; }.profile-info div { margin-bottom: 10px; }button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }button:disabled { background-color: #c0c0c0; cursor: not-allowed; } 将此 CSS 文件导入到你的 中： ProfilePage.js   import './ProfilePage.css'; 步骤 6：运行你的应用程序 最后，运行您的应用程序以查看个人资料页面的实际效果：   npm start 导航到 来查看个人资料页面。 http://localhost:3000/profile 结论 在本教程中，我们使用 React、Avatarium、React Router、Axios 和 Formik 构建了一个简单的个人资料页面。此页面从 API 获取用户数据并将其与随机生成的头像一起显示，并允许用户使用表单更新其信息。您可以通过添加更多功能来扩展此示例，例如用于用户信息的附加字段、表单的验证规则和增强的样式。

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

該音頻是用故事的原始語言製作的！

如何创建您的第一个 React 个人资料页面！

About Author

註釋

標籤

这篇文章刊登在

Related Stories

使用这 18 种开发工具来提高你的工作效率 🚀🔥

创建以用户为中心的加密产品：客户反馈的重要性

比特币 UTXO 模型，为独特的生态系统提供动力

扬帆起航：利用数据湖开发生产级 RAG 应用程序

使用这 18 种开发工具来提高你的工作效率 🚀🔥

创建以用户为中心的加密产品：客户反馈的重要性

比特币 UTXO 模型，为独特的生态系统提供动力

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps