Tạo một component UserProfile bằng ReactJS
Trong bài tập ReactJS này, mình sẽ xây dựng một component có tên là UserProfile
. Component này sẽ nhận một prop là user, đó là một đối tượng chứa thông tin về người dùng, bao gồm tên, email và URL của ảnh đại diện. Mục tiêu là hiển thị thông tin này trong một thẻ <div>, bao gồm cả ảnh đại diện của người dùng.
Tạo một component UserProfile bằng ReactJS
Bước 1: Mở dự án hiện tại
Nếu bạn đã có một dự án ReactJS, hãy tiếp tục sử dụng nó. Nếu chưa, bạn có thể tạo một dự án mới bằng lệnh create-reactJs.
Bước 2: Tạo Component UserProfile
Mở file src/components/UserProfile.js
và thêm nội dung sau:
// src/components/UserProfile.js import React from 'react'; import './UserProfile.css'; const UserProfile = ({ user }) => { return ( <div className="user-profile"> <img src={user.avatarUrl} alt={user.name} className="avatar" /> <div className="user-info"> <h2>{user.name}</h2> <p>{user.email}</p> </div> </div> ); }; export default UserProfile;
Bước 3: Tạo File CSS
Tạo một file mới có tên là UserProfile.css
trong thư mục src/components.
Thêm các quy tắc CSS để tùy chỉnh giao diện của UserProfile
:
/* src/components/UserProfile.css */ .user-profile { display: flex; align-items: center; padding: 20px; border: 1px solid #ddd; border-radius: 8px; } .avatar { width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; } .user-info { flex: 1; } .user-info h2 { color: brown; } .user-info p { color: #888; }
Bước 4: Sử dụng Component trong App
Mở file src/App.js
và sửa nội dung như sau:
// src/App.js import React from 'react'; import UserProfile from './components/UserProfile'; import './App.css'; function App() { const userObject = { name: 'Freetuts.net', email: 'Freetuts.net@gmail.com', avatarUrl: 'https://freetuts.net/public/logo/logo.png?rand=5', }; return ( <div className="App"> <header className="App-header"> <UserProfile user={userObject} /> </header> </div> ); } export default App;
Bước 5: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng lệnh:
npm start
Ứng dụng sẽ mở trên http://localhost:3000 và hiển thị thông tin của người dùng từ đối tượng đã được định nghĩa.
Mình đã thành công tạo ra một component UserProfile
trong ReactJS, cho phép hiển thị thông tin của người dùng, bao gồm cả ảnh đại diện. Bài tập này giúp mình làm quen với việc sử dụng Props để truyền dữ liệu vào component và tạo ra giao diện người dùng linh hoạt. Tiếp tục học và áp dụng những kiến thức này để xây dựng các ứng dụng ReactJS phức tạp và thú vị.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Tạo một component ReactJS đơn giản
- Tạo một component Greeting trong ReactJS
- Tạo một component PersonList trong ReactJS
- Tạo một component ProductCard trong ReactJS
- Tạo một component Avatar trong ReactJS
- Tạo một component BlogPost bằng ReactJS
- Tạo một component BookList bằng ReactJS
- Tạo một component UserProfile bằng ReactJS
- Tạo một component ProductList bằng ReactJS
- Tạo một component CommentSection bằng ReactJS