- Tên thư mục và thư mục con sử dụng cách đặt tên theo kiểu snake_case
VD: node_modules, screens, /screens/notes_all/ ...
- Tên file sử dụng cách đặt tên theo kiểu PascalCase
VD: CreateNote.js, Note.js ...
- Tên của components, thực hiện đặt tên component dựa và mẫu đường dẫn, bao gồm đặt tên thành phần tương ứng với đường dẫn tương đối của nó đến các thành phần thư mục hoặc đến ứng dụng. Về cơ bản, một thành phần nằm tại: components / common / Button.js sẽ được đặt tên là Button.js. Tên component sử dụng cách đặt tên theo kiểu PascalCase.
- Khi file nằm trong thư mục có cùng tên, chúng tôi không cần lặp lại tên. Điều đó có nghĩa là components/user/form/Form.js, sẽ được đặt tên là UserForm chứ không phải là UserFormForm.
- Bao gồm tất cả các control trong một lần import duy nhất thuộc về cùng một mô-đun kết thúc bằng dấu chấm phẩy. Không được có khoảng trống giữa hai lần nhập.
import {ScrollView, View, TouchableOpacity, KeyboardAvoidingView, ListView, AsyncStorage, Alert } from ‘react-native’;- Tên class nên được khai báo là tên file sẽ dễ dàng cho import và dễ dàng bảo trì.
- Khai báo đối tượng và biến luôn phải đặt kiểu Camelcase. Nếu chúng ta sử dụng dấu chấm phẩy thì sử dụng ở tất cả các vị trí ở cuối câu lệnh hoặc không sử dụng.
let textExample = “Hello World”;2. Cấu trúc thư mục.
- Tất cả các components, globals, images, redux... Nên được viết bên trong thư mục /app/.
- Tất cả các component (trừ các global component) được viết bên trong thư mục /app/components/. Một kiểu cho mỗi trang được viết trong thư mục tương ứng của nó:
- Tất cả global components, global styles, golbal data ... được viết trong thư mục /app/globals/. Ví dụ vì search bar được hiển thị bên dưới. "Search bar" được viết trong thư mục global:
- Images nên được viết trong thư mục /app/images/.
- Các function Global cho request API được viết trong thư mục /app/request/
- Nếu sử dụng redux, file redux được lưu trong thư mục /app/store/.
- File localization được lưu trong thư mục /app/.
3. Thứ tự đặt imports
a. React import
b. Library imports (Alphabetical order)
c. Absolute imports from the project (Alphabetical order)
d. Relative imports (Alphabetical order)
e. Import * as
f. Import ‘./<some files>.<some extension>
Mỗi loại nên được phân cách nhau mới một dòng trống. Điều này làm cho các câu lệnh import rõ ràng và dễ hiểu cho tất cả các components, thư viện của bên thứ 3,...
4. Layout Conventions
- Luôn kết thúc câu lệnh bằng dấu chấm phẩy.
- Phải tạo 1 class component khi phải sử dụng 1 state, nếu không chúng ta nên sử dụng 1 component functional.
- Không cho phép thiết lập state được gọi trên Render() của 1 Component React.
- Nếu các dòng tiếp tục không được thụt lề tự động, hãy thụt lề chúng ở một điểm dừng tab (bốn dấu cách).
- Thêm ít nhất 1 dòng trống giữa phương thức và định nghĩa thuộc tính.
- Không được có dòng trống giữa 2 câu lệnh tương tự nhau hoặc nhóm code tương tự áp dụng cho cùng một hoạt động.
const [loading, setLoading] = useState(false); const [name, setName] = useState(‘Ramu’); const [age, setAge] = useState(‘22’);
And
if (apiInProgress){
setLoading(true); setName(null); }
5. Commenting Conventions
- Đặt comment trên 1 dòng riêng biệt, không đặt ở cuối cùng của dòng code.
- Bắt đầu comment text với một ký tự viết Hoa.
- Kết thúc comment với một dấu chấm.
- Thêm 1 khoảng trắng giữa dấu phân cách (//) comment và nội dung comment.
- Chỉ thêm comment khi cần thiết.
6. Language Guidelines
- Kiểu dữ liệu: Một biến trong ReactNative có thể chưa bất cứ dữ liệu nào. Một biến tại một thời điểm có thể là 1 String và ở một thời điểm khác có thể là 1 number.
// No error. let message = “hello”; message = 123456;
- Một số (number): Kiểu số dại diện cho cả số nguyên và số thập phân.
let n = 123; n = 123.123;
- Một chuỗi: Một chuỗi trong React Native phải được bao quanh bởi dấu nháy (" / ').
Trong React Native có 3 kiểu sử dụng dấu nháy:
Double quotes: “Hello”. Single quotes: 'Hello'. Backticks: `Hello`.
Dấu nháy đơn (') và dấu nháy kép (") không có sự khác biệt trong React Native. Tuy nhiên trong một dự án chúng ta nên quy định đồng nhất sử dụng 1 loại dấu nháy. Ví dụ các dự án của tôi chỉ sử dụng dấu nháy đơn.
Backticks là dấu nháy "chức năng mở rộng", Cho phép chúng ta nhúng các biến và biểu thức vào 1 String bằng cách gói chúng lại bên trong ${ }, Ví dụ :
let name = “John”; // Embed a variable alert(`Hello, ${name}!`); // Hello, John! // Embed an expression alert(`the result is ${1 + 2}`); // The result is 3
Các kiểu dấu nháy khác không có chức năng nhúng này.
- Boolean: Kiểu boolean chỉ có hai giá trị true và false. Kiểu này thường được sử dụng để lưu trữ các giá trị có / không. Các giá trị Boolean cũng là kết quả của các so sánh
- Literals và properties:
Chúng ta có thể đưa ngay properties và trong {…} như “key: value”:
let user = { // an object name: “John”, // by key “name” store value “John” age: 30 // by key “age” store value 30 };
- Mảng: Có hai cú pháp để tạo một mảng trống:
let arr = new Array(); let arr = [];
Hầu như mọi lúc, cú pháp thứ hai được sử dụng. Chúng ta có thể cung cấp các phần tử ban đầu trong dấu ngoặc:
let fruits = [“Apple”, “Orange”, “Plum”];
7. Tránh sử dụng Inline Style
Sử dụng Inline style làm cho việc bảo trì khó khăn hơn nhiều, nếu có một sự thay đổi sẽ cần thay đổi rất nhiều nơi trong source code của bạn. Bạn sẽ phải tìm kiếm và chỉnh sửa hàng trăm vị trí => Rất mất thời gian và dễ gây thiếu sót.
Tất cả các style nên được xác định rõ ràng bằng các tên class duy nhất trong một CSS stylesheet. Đối với bất kỳ thuộc tính nào bạn muốn thay đổi, bạn chỉ cần sửa đổi thuộc tính tên class tương ứng trong stylesheet, tất cả các DIV sử dụng tên class sẽ có hiệu lực.
Một stylesheet được xác định rõ ràng sẽ cực kỳ hữu ích trong khi xậy dựng các ứng dụng React Native phức tạp. Sử dụng đối tượng React Native Stylesheet để thêm các style cụ thể cho một component nhất định.
8. Xử lý ngoại lệ trong ứng dụng React Native
Một trong những trải nghiệm người dùng tồi tệ nhất là sử dụng một ứng dụng di động gặp sự cố với các lỗi không được xử lý khéo léo. Vì vậy, xử lý ngoại lệ đóng một vai trò quan trọng trong việc giúp ứng dụng của bạn chạy trơn tru.
Sử dụng khối try ... catch để xử lý các ngoại lệ trong ứng dụng React Native.
Câu lệnh try… catch đánh dấu một khối câu lệnh để thử và chỉ định một hoặc nhiều câu trả về nếu một ngoại lệ được "ném" ra. Nếu một ngoại lệ được "ném" ra, câu lệnh try… catch sẽ bắt nó và xử lý.
Câu lệnh try… catch bao gồm một khối try, chứa một hoặc nhiều câu lệnh và một khối catch, chứa các câu lệnh chỉ định những gì phải làm nếu một ngoại lệ được đưa ra trong khối try.
Nếu ứng dụng của bạn bao gồm một khối mã có thể đưa ra các ngoại lệ, bạn có thể xử lý điều đó trong một khối try-catch như hình bên dưới:
try { throw new Error("Error"); } catch (error) { // Handle Error. }
9. Thực hiện gọi API trong componentDidMount()
Để luôn có luồng dữ liệu chính xác và hiển thị các thành phần, bạn phải đặt tất cả các lệnh gọi API của mình trong phương thức componentDidMount().
Việc sử dụng componentDidMount() làm rõ rằng dữ liệu sẽ không được tải cho đến sau lần hiển thị đầu tiên. Điều này sẽ hỗ trợ bạn thiết lập trạng thái ban đầu đúng cách, vì vậy bạn sẽ không gặp phải trạng thái undefined dẫn đến lỗi.
Nếu sử dụng các hook React Native, thì hãy viết các lệnh gọi API của bạn trong useEffect
useEffect(()=>{ //Your Api Call. },[])
10. Luôn thực hiện việc xác thực ở cả Local và Server
Mặc dù, có một số xác thực hoặc kiểm tra mà chỉ server mới có thể xác nhận, chẳng hạn như nếu tên người dùng hoặc mật khẩu đã nhập tồn tại trong database hoặc nếu email đã nhập tồn tại trong database. Nhưng cách tốt nhất là bạn luôn triển khai càng nhiều xác thực ứng dụng khách càng tốt, chẳng hạn như nhập định dạng email thích hợp, xác thực trường trống và cũng cần có số ký tự tối thiểu hoặc tối đa. Vì vậy, bạn nên thực hiện cả xác Local và Server.
11. Đảm bảo App của bạn luôn có Responsive.
Bạn phải luôn đảm bảo rằng ứng dụng bạn đang xây dựng là ứng dụng Responsive, có nghĩa là ứng dụng đó nhất quán trên các thiết bị và nền tảng khác nhau.
12. Thêm quá trình Loading trong khi tìm nạp dữ liệu hoặc chờ phản hồi từ API.
Đây là điều rất dễ thực hiện. Việc thêm Loading giúp cho ứng dụng của bạn chạy mượt mà hơn và chuyên nghiệp hơn đối với người dùng.
13. Không đưa logs vào release.
Có nhiều câu lệnh console.log có thể làm chậm ứng dụng của bạn, đặc biệt nếu bạn đang sử dụng các thư viện logging như redux-logger. Đảm bảo tắt tất cả logs (theo cách thủ công hoặc bằng tập lệnh) khi thực hiện build Release App của bạn.
Refer:
https://sandeeprajbhartechgeek.medium.com/coding-standards-and-good-practice-for-react-native-apps-c8401e87f2d
https://gilshaan.medium.com/react-native-coding-standards-and-best-practices-5b4b5c9f4076
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa