Một vài kinh nghiệm làm việc với React
Chào mọi người, lần này mình xin nối tiếp chủ đề “vở sạch chữ đẹp” như những tiết học trước. Bài viết lần này mình xin chia sẻ vài kinh nghiệm viết code React mà mình đã đúc kết qua một vài dự án. 1. Cách tổ chức component Cách đặt tên component và kiểu file Tên ...
Chào mọi người, lần này mình xin nối tiếp chủ đề “vở sạch chữ đẹp” như những tiết học trước. Bài viết lần này mình xin chia sẻ vài kinh nghiệm viết code React mà mình đã đúc kết qua một vài dự án.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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:
|
1 2 3 4 5 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
|
1 2 3 4 5 6 7 8 9 |
// 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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ó.
Đoạn này mình chỉ chém gió theo suy nghĩ của mình thôi nhé
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.
Ở bài trước mình đã chia sẻ nhiều extension về bắt lỗi “vở sạch chữ đẹp” bài này mình chỉ chia sẻ những extension support cho chức năng nhé
- ES7 React/Redux/GraphQL/React-Native snippets: Extension này định nghĩa nhiều snippets tuyệt vời cho React
- Auto Import – ES6, TS, JSX, TSX: Gợi ý đường dẫn component để import chính xác
- HTML to JSX: Giúp convert code HTML sang JSX chuẩn
- Guides: Giúp định vị được phạm vi trong dấu mở ngoặc
- VScode-styled-components: Support snippets cho styled component
- Change-case: Chuyển đổi chuẩn đặt tên nhanh chóng
Tổng kết
Trên đây là một vài chia sẻ của mình để làm việc với project React. Hi vọng sẽ giúp bạn dễ quản lý source và code sạch đẹp hơn. Nếu bạn có đóng góp gì hãy nhiệt tình để lại bên dưới nhé.
TechTalk via Viblo
