Tạo một trang hồ sơ trong React không chỉ cần thiết mà còn cực kỳ thú vị! Nó cho phép người dùng của bạn xem và quản lý thông tin cá nhân của họ một cách phong cách. Trong hướng dẫn này, chúng ta sẽ xây dựng một trang hồ sơ đẹp mắt bằng cách sử dụng một số gói npm thú vị, bao gồm Avatarium để có những bức ảnh hồ sơ tuyệt đẹp, React Router để điều hướng mượt mà, Axios để tìm nạp dữ liệu và Formik để xử lý dữ liệu đầu vào của biểu mẫu. Hãy cùng lao vào và làm điều gì đó tuyệt vời!

Điều kiện tiên quyết

Trước khi chúng tôi bắt đầu, hãy đảm bảo bạn có những điều sau:

• Đã cài đặt Node.js và npm
• Hiểu biết cơ bản về React
• Một dự án React mới đã được tạo bằng create-react-app

Bước 1: Thiết lập dự án React của bạn

Đầu tiên, tạo một dự án React mới nếu bạn chưa có:

 npx create-react-app profile-page cd profile-page

Bước 2: Cài đặt các gói npm cần thiết

Chúng ta sẽ cần một số gói npm cho hướng dẫn này:

• Avatarium: để tạo avatar theo chủ đề ngẫu nhiên
• React Router: để xử lý điều hướng
• Axios: để tìm nạp dữ liệu từ API
• Formik: để xử lý trạng thái biểu mẫu và xác thực

Cài đặt các gói này bằng cách chạy:

 npm install @sabfry/avatarium react-router-dom axios formik

Bước 3: Thiết lập bộ định tuyến React

Chúng tôi sẽ sử dụng React Router để điều hướng giữa các trang khác nhau trong ứng dụng của chúng tôi. Đầu tiên, hãy thiết lập bộ định tuyến trong 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;

Bước 4: Tạo thành phần trang hồ sơ

Tiếp theo, tạo thành phần ProfilePage.js . Thành phần này sẽ hiển thị thông tin hồ sơ của người dùng, bao gồm hình đại diện, tên và email của họ, đồng thời cho phép người dùng cập nhật thông tin của họ bằng 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;

Trong thành phần này:

• Chúng tôi sử dụng hook useState để quản lý dữ liệu người dùng.

• hook useEffect tìm nạp dữ liệu người dùng từ API mô phỏng khi thành phần được gắn kết.

• Chúng tôi sử dụng thành phần Avatar từ Avatarium để hiển thị hình đại diện có chủ đề ngẫu nhiên.

• Formik được sử dụng để xử lý trạng thái và xác thực biểu mẫu, giúp dễ dàng quản lý thông tin nhập vào biểu mẫu và xử lý việc gửi.

Bước 5: Tạo kiểu cho trang hồ sơ

Thêm một số CSS cơ bản để tạo kiểu cho trang hồ sơ. Tạo tệp ProfilePage.css và nhập tệp đó vào 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; }

Nhập tệp CSS này vào ProfilePage.js của bạn:

 import './ProfilePage.css';

Bước 6: Chạy ứng dụng của bạn

Cuối cùng, hãy chạy ứng dụng của bạn để xem trang hồ sơ đang hoạt động:

 npm start

Điều hướng đến http://localhost:3000/profile để xem trang hồ sơ.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã xây dựng một trang hồ sơ đơn giản bằng React, Avatarium, React Router, Axios và Formik. Trang này tìm nạp dữ liệu người dùng từ API và hiển thị dữ liệu đó cùng với hình đại diện được tạo ngẫu nhiên và cho phép người dùng cập nhật thông tin của họ bằng biểu mẫu. Bạn có thể mở rộng ví dụ này bằng cách thêm nhiều tính năng hơn, chẳng hạn như các trường bổ sung cho thông tin người dùng, quy tắc xác thực cho biểu mẫu và kiểu dáng nâng cao.