Создание страницы профиля в 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: Аватариум: для создания случайных тематических аватаров. 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 и отображает их вместе со случайно сгенерированным аватаром, а также позволяет пользователю обновлять свою информацию с помощью формы. Вы можете расширить этот пример, добавив дополнительные функции, такие как дополнительные поля для информации о пользователе, правила проверки формы и расширенные стили.
