1. Cách tổ chức component
Cách đặt tên component và kiểu file
Tên component nên đặt theo chuẩn PascalCase Header.jsx
// bad
import reservationCard from './ReservationCard';
// good
import ReservationCard from './ReservationCard';
// bad
const ReservationItem = <ReservationCard />;
// good
const reservationItem = <ReservationCard />;
Tên component cần đề cập đúng mục đích của nó, phải rõ ràng và duy nhất trong ứng dụng, để dễ tìm thấy hơn và tránh những nhầm lẫn có thể xảy ra.
Một vài ví dụ về tên và mục đích component:
Header.jsx // component Header
PageAbout.jsx // component chứa page About
Sidebar.jsx // component Sidebar
Tổ chức component
Giả sử bạn muốn tổ chức một cấu trúc component bạn có thể tham khảo path đơn giản sau:
components/
|
|– header/ // component Header
| |– index.jsx
| |– styled.scss
|
|– PageAbout/
| |– index.jsx // component PageAbout
| |– partials // folder sub components
| | |– PageAboutAdmin
| | | |– index.js
| | | |– styled.scss
| | |
| | |– PageAboutSubUser
| | | |– index.js
| | | |– styled.scss
|
components/
|
|– header/ // component Header
| |– index.jsx
| |– styled.scss
|
|– PageAbout/
| |– index.jsx // component PageAbout
| |– partials // folder sub components
| | |– PageAboutAdmin
| | | |– index.js
| | | |– styled.scss
| | |
| | |– PageAboutSubUser
| | | |– index.js
| | | |– styled.scss
|
Cách import component
// good
import Header from 'Header';
import Header from 'PageAbout/partials/PageAboutAdmin';
// bad
import Header from 'Header/index';
import Header from 'PageAbout/partials/PageAboutAdmin/index';
Giữ component gọn nhất có thể
Thông thường, một file chứa duy nhất 1 component và export default. Cũng có thể 1 file chứa nhiều component. Tuy nhiên chúng ta nên viết 1 file với 1 component, chỉ định nghĩa nhiều component trong 1 file khi đó là định nghĩa những thứ liên quan tới common như Button, Image…
2. Stateless và Stateful
Một React component thường có hai loại: component kiểu class hoặc component kiểu function. Sự khác biệt giữa hai loại trên có thể thấy rõ ràng từ tên của chúng.
// Stateful
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>Hello {props}</div>;
}
}
// Stateless
const Hello = ({name}) => <div>Hello, {name}!</div>;
Chọn cái nào
JavaScript khác với những ngôn ngữ như C/C++, Java, PHP... vì nó không phải là ngôn ngữ hướng đối tượng, mà là ngôn ngữ chức năng (function languge). Chính vì vậy React ở bản nâng cấp đầu năm vừa qua đã bỏ cách viết class (stateful) để hướng người dùng trở về đúng với mục đích của nó.
React từ phiên bản 16.8 khi chúng ta cài boilerplate template create react app xong sẽ thấy code ví dụ ở file App.js được viết theo kiểu function (stateless). Ở bản cập nhật này, React cũng đã đưa ra rất nhiều cải tiến, với tên React Hooks.
Câu trả lời thì rõ ràng rồi, nên chọn cách viết Stateless để định nghĩa component.
3. Thời buổi này phải dùng tool
Để làm anh hùng bàn phím, ngoài việc gõ 10 ngón là chưa đủ, mình chỉ là thằng mổ cò nhưng mình viết code rất nhanh, một phần do mình gõ nhanh nhưng phần lớn là dùng những extends xịn sò mà có thể bạn chưa biết.