Bộ phận Post
Chúng ta đã nghĩ về các phần tử nào một post có suốt việc tạo mock-up và thiết kế của backend. Một post
nên có một title, contents, và một author.
Hãy thực thi bộ phận Post bây giờ:
1. Trước tiên, tạo một file src/components/Post.jsx mới.
2. Trong file đó, nhập khẩu PropTypes:
import PropTypes from ‘prop-types’
3. Định nghĩa một bộ phận hàm, chấp nhận title, contents, và author props:
export function Post({ title, contents, author }) {
4. Tiếp theo, duyệt tất cả các props theo một cách cái giống mock-up:
Tip
Hãy chú ý rằng bạn nên luôn thích hơn tạo khoảng trắng qua CSS, hơn là sử dụng <br/> HTML tag. Tuy
nhiên, chúng ta đang tập trung vào cấu trúc UI và tích hợp với backend trong các học phần, nên chúng
ta đơn giản sử dụng HTML bất cứ khi nào có thể.
5. Bây giờ, định nghĩa propTypes, đảm bảo chỉ title được yêu cầu:
Post.propTypes = {
title: PropTypes.string.isRequired,
contents: PropTypes.string,
author: PropTypes.string,}
6. Hãy test ra bộ phận của chúng ta bằng cách thay thế src/App.jsx file với các nội dung sau:
7. Biên tập src/main.jsx và cập nhật việc nhập khẩu bộ phận App, vì chúng ta bây giờ không đang sử
dụng export default chút nào nữa:
import { App } from ‘./App.jsx’
Info
Tôi cá nhân có xu hướng thích hơn không sử dụng default exports, khi chúng làm nó khó hơn để nhóm
lại và xuất khẩu lại các bộ phận và hàm từ các files khác. Cũng vậy, chúng cho phép chúng ta
thay đổi các tên của các bộ phận, cái có thể gây nhầm lẫn. Ví dụ, nếu chúng ta thay đổi tên của
một bộ phận, tên khi nhập khẩu nó không bị thay đổi tự động.
8. Cũng vậy, loại bỏ dòng sau khỏi src/main.jsx:
import ‘./index.css’
9. Cuối cùng, chúng ta có thể xóa index.css và App.css files, khi chúng không được cần chút nào nữa.
Bây giờ rằng bộ phận Post tĩnh của chúng ta đã được thực thi, chúng ta có thể chuyển sang bộ phận
CreatePost.