Создание страницы профиля в 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. Создайте компонент страницы профиля.

Затем создайте компонент ProfilePage.js . Этот компонент будет отображать информацию профиля пользователя, включая его аватар, имя и адрес электронной почты, и позволит пользователю обновлять свою информацию с помощью form.jsx.

 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="[email protected]" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage;

В этом компоненте:

• Мы используем хук useState для управления пользовательскими данными.

• Хук useEffect извлекает пользовательские данные из фиктивного API при монтировании компонента.

• Мы используем компонент Avatar из Avatarium для отображения аватара случайной тематики.

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