3 lệnh Bash hữu ích cho lập trình viên React

0 0 0

Người đăng: Thái Thịnh

Theo Viblo Asia

Làm việc với các React Component đôi khi có thể trở nên khó khăn, đặc biệt là với những codebase lớn. Bài viết này chia sẻ 3 lệnh bash hữu ích giúp đơn giản hóa một số công việc khi làm việc với React Component.

1. Tìm các thành phần có văn bản được mã hóa cứng

Nỗi ám ảnh của việc quốc tế hóa ứng dụng đến từ những đoạn text được "hardcode" trực tiếp vào mã nguồn. Việc này gây khó khăn cho việc bản địa hóa, cản trở ứng dụng tiếp cận người dùng toàn cầu.

Bạn có thể sử dụng lệnh sau để tìm văn bản được mã hóa cứng, để ứng dụng của bạn có thể hỗ trợ nhiều ngôn ngữ:

grep -Er "['\"].*['\"]" src/**/*.jsx | grep -v 'i18n' | tee hardcoded_text.log

2. Xác định những component nào chưa có file test

Một lệnh hữu ích khác thường được sử dụng để kiểm tra độ bao phủ của test, đó là tìm ra những component nào chưa có file test tương ứng.

Bạn có thể sử dụng lệnh sau:

find src -name '*.jsx' | sed 's/.jsx$/.test.js/' | while read file; do [ ! -f "$file" ] && echo "Missing test: $file"; done

3. Kiểm tra các phương thức lifecycle bị deprecated

Việc nâng cấp codebase React lên phiên bản mới thường gặp phải vấn đề về các phương thức lifecycle bị deprecated.

Chạy lệnh bash sau để chủ động xác định mã lỗi thời và nâng cấp mượt mà hơn.

grep -Er '(componentWillMount|componentWillReceiveProps|componentWillUpdate)' src/**/*.jsx

Và thế là xong.

Hy vọng bạn thấy những lệnh này hữu ích khi làm việc với các thành phần React.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 399

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 146

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 146

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 371

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 280