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 BlogPost bằng ReactJS
Trong bài tập này, mình sẽ tạo một component ReactJS có tên là BlogPost. Component này sẽ nhận một prop là post, là một đối tượng chứa thông tin về một bài viết blog, bao gồm tiêu đề, nội dung, ngày đăng và ảnh đại diện. Mình sẽ hiển thị thông tin này trong các thẻ HTML tương ứng để tạo ra một bài viết blog đẹp và chất lượng.
Tạo một component BlogPost bằng ReactJS
Bước 1: Mở dự án hiện tại
Nếu bạn đã thực hiện các bài tập trước, hãy tiếp tục sử dụng dự án React hiện tại. Nếu không, bạn có thể tạo một dự án mới bằng cách sử dụng create-reactjs.
Bước 2: Tạo Component BlogPost
Mở file src/components/BlogPost.js và thêm nội dung sau:
// src/components/BlogPost.js
import React from 'react';
import './BlogPost.css';
const BlogPost = ({ post }) => {
return (
<div className="blog-post">
<img src={post.image} alt={post.title} className="post-image" />
<h2>{post.title}</h2>
<p className="post-date">{post.date}</p>
<p>{post.content}</p>
</div>
);
};
export default BlogPost;
Bước 3: Tạo File CSS
Tạo một file mới có tên là BlogPost.css trong thư mục src/components. Thêm các quy tắc CSS để tùy chỉnh giao diện của BlogPost:
/* src/components/BlogPost.css */
.blog-post {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
.blog-post h2 {
color: #333;
}
.post-date {
color: #888;
margin-bottom: 10px;
}
.post-image {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
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 BlogPost from './components/BlogPost';
import './App.css';
function App() {
const blogPost = {
title: 'Tạo một component BlogPost bằng ReactJS 1',
date: 'January 20, 2024',
content: 'Tạo một component ReactJS có tên là BlogPost ...',
image: 'https://codelearnstorage.s3.amazonaws.com/Upload/Blog/react-js-co-ban-phan-1-63738082145.3856.jpg', // Thay đổi URL của ảnh đại diện
};
const blogPost1 = {
title: 'Tạo một component BlogPost bằng ReactJS 2',
date: 'January 20, 2024',
content: 'Tạo một component ReactJS có tên là BlogPost ...',
image: 'https://codelearnstorage.s3.amazonaws.com/Upload/Blog/react-js-co-ban-phan-1-63738082145.3856.jpg', // Thay đổi URL của ảnh đại diện
};
return (
<div className="App">
<header className="App-header">
<BlogPost post={blogPost} />
<BlogPost post={blogPost1} />
</header>
</div>
);
}
export default App;Bước 5: Chạy ứng dụng
Mở terminal và chạy ứng dụng bằng cách sử dụng lệnh sau:
npm start
Ứng dụng sẽ khởi chạy trên http://localhost:3000, và bạn sẽ thấy một trang web hiển thị nội dung của bài viết blog trong một thẻ <div> với ảnh đại diện.
Mình đã thành công tạo ra một component BlogPost trong ReactJS, cho phép hiển thị thông tin chi tiết của một bài viết blog, bao gồm cả ảnh đại diện. Bài tập này giúp mình thực hành kỹ năng sử dụng Props để truyền dữ liệu vào component và tùy chỉnh giao diện của nó bằng CSS. Tiếp tục học và áp dụng những kiến thức này để xây dựng các thành phần ReactJS mạnh mẽ và đẹp mắt. Cảm ơn bạn đã tham gia hành trình này, và chúc bạn có những kiến thức tuyệt vời khi làm việc với ReactJS!
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
