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 . 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. 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; Trong thành phần này: Chúng tôi sử dụng hook để quản lý dữ liệu người dùng. useState hook 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. useEffect Chúng tôi sử dụng thành phần từ Avatarium để hiển thị hình đại diện có chủ đề ngẫu nhiên. Avatar 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 và nhập tệp đó vào . 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; } Nhập tệp CSS này vào của bạn: ProfilePage.js 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 để xem trang hồ sơ. http://localhost:3000/profile 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.
