Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Tạo một component BookList bằng ReactJS
Trong Bài tập ReactJS thú vị này, mình sẽ xây dựng một component có tên là BookList. Component này sẽ nhận một prop là books, đó là một mảng chứa tên của nhiều sách. Mục tiêu là hiển thị danh sách các sách này bằng cách sử dụng thẻ <ul> và <li> để tạo ra một danh sách sách thú vị và dễ đọc.
Tạo một component BookList 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 BookList
Mở file src/components/BookList.js và thêm nội dung sau:
// src/components/BookList.js
import React from 'react';
import './BookList.css';
const BookList = ({ books }) => {
return (
<ul className="book-list">
{books.map((book, index) => (
<li key={index}>{book}</li>
))}
</ul>
);
};
export default BookList;
Bước 3: Tạo File CSS
Tạo một file mới có tên là BookList.css trong thư mục src/components. Thêm các quy tắc CSS để tùy chỉnh giao diện của BookList:
/* src/components/BookList.css */
.book-list {
list-style: none;
padding: 40px;
border: 2px solid gainsboro;
}
.book-list li {
margin-bottom: 10px;
font-size: 18px;
}
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 BookList from './components/BookList';
import './App.css';
function App() {
const bookArray = ['Đắc nhân tâm', 'Nhà giả kim', '1984', 'Đọc vị bất kì ai'];
return (
<div className="App">
<header className="App-header">
<BookList books={bookArray} />
</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ị danh sách sách từ mảng đã được định nghĩa.
Mình đã tạo thành công một component BookList trong ReactJS, giúp hiển thị danh sách các sách một cách dễ đọc. Bài tập này giúp mình làm quen với cách sử dụng Props để truyền dữ liệu vào component và tạo ra một danh sách động từ một mảng. Tiếp tục học và áp dụng kiến thức để xây dựng các ứng dụng ReactJS phong phú và linh hoạt.
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
