Hướng dẫn cấu trúc thư mục và cách viết COMPONENT chuẩn trong REACT

Sau một thời gian tìm hiểu và áp dụng rất hiệu quả, hôm nay mình chia sẻ với các bạn cấu trúc thư mục và cách viết component chuẩn trong React. Mục tiêu là làm sao cho dự án dễ quản lý, cũng như dễ hiểu để cộng tác làm việc với nhau, cũng như tăng tính tái sử dụng của một component React, việc áp dụng theo hay không thì tùy bạn – tất nhiên, nhưng nếu bạn không sử dụng một quy luật nào đó thống nhất, một ngày không xa bạn sẽ cảm thấy không quản lý hết được dự án của mình khi ngày nó càng phình ra.

Một dự án web app đơn giản nếu muốn đạt mức độ thành phẩm thì sẽ có từ 20-30 components, và theo tiêu chí component càng nhỏ càng tốt vì nó có tính tái sử dụng cao, với cấu trúc thư mục bên dưới webapp có thể chứa khoảng 200-300 components. Đối với mức 20,000 React components thì phải hỏi chính đội ngũ của Facebook mới được, chứ mình thì chịu! (trích dẫn “the Facebook codebase has over 20,000 React components, and that’s not even counting React Native”)

CẤU TRÚC THƯ MỤC CỦA MỘT DỰ ÁN REACT

Về Component có nhận dữ liệu từ máy chủ hoặc từ store và nhận dữ liệu từ thao tác người dùng, mình chia làm 2 component với 2 chức năng riêng biệt:

• Container: nhận dữ liệu từ server, component này không render và cũng không nhận bất kỳ thao tác nào của người dùng
• Presentation: chỉ đảm nhiệm việc render, chỉ nhận dữ liệu thông qua props, không có state

Cách tiếp cận này (Container component và Presentation) được Dan Abramov (tác giả Redux và đang là thành viên của React) giới thiệu qua bài viết: Smart and Dump components, và cấu trúc thư mục thì dựa theo Gist này.

Mình sử dụng component stateful và stateless độc lập như trên để dễ quản lý luồng dữ liệu. Trong cấu trúc trên có sử dụng Redux, tuy nhiên chỉ để tham khảo là chính, nếu bạn có sử dụng Redux thì có thêm các thư mục reducers, stores, actions. Còn thư mục core thì có thể chứa business logic, helpers dùng để chứa các hàm hỗ trợ, constants để chứa các biến hằng số.

Thật ra, nếu bạn không sử dụng Redux, có thể chia làm 3 components – đã áp dụng thấy rất ổn:

• Container: như trên
• Presentation: như trên
• Interactive: nhận các thao tác từ người dùng, component này sẽ khai báo các hàm handleClick, handleChange,…và truyền cho presentation component thông qua props.

Với cách tổ chức 3 components như trên thì ưu điểm là phân rõ rạch ròi nhiệm vụ cho từng component: lấy dữ liệu, xuất dữ liệu và tương tác người dùng. Khuyết điểm của cách tiếp cận này là dữ liệu có thể bị trùng lặp ở component Interactive, vì bản thân nó không sử dụng mà truyền xuống cho Presentation, tuy nhiên đây không phải quá tệ để cho cách tổ chức component dễ hiểu và quản lý luồng dữ liệu, cách này được xem là tương tự actions -> store <=> reduce.

Trong thư mục chính components, được chia làm các thư mục con, các thư mục con này cũng là các react component, tuy nhiên được phân loại theo từng cấp độ lớn nhỏ: pages chứa các component theo phân loại chức năng trang, trong một trang (page component) chứa rất nhiều component nhỏ khác và được bọc trong layout component (layouts)

CÁCH VIẾT MỘT COMPONENT REACT ĐÚNG CHUẨN ….AIRBNB

Tham khảo tại đây: https://github.com/airbnb/javascript/tree/master/react

Học theo những kinh nghiệm của các đàn anh là cách tiếp cận thông minh nhất :), bạn hãy đọc sơ lược, nếu chưa nhớ rõ áp dụng hết những thứ trong đó thì cứ làm theo từng cái thôi. Nhưng tốt hơn hết là đọc 1 lượt kỹ càng, sau đó viết 2-3 components, cái này quên quen bay qua coi lại, chừng 5-6 components là bạn sẽ quen cách tổ chức và viết component đúng chuẩn rồi.

Nói chung, chuẩn Airbnb là ngon rồi, nhưng nếu bạn đã áp dụng một chuẩn nào khác thì không nên chuyển qua làm gì, vì có thể nó cũng giống nhau gần 90%.