Có một cái gì đó tôi thấy rất khó hiểu khi làm việc React.
Có rất nhiều ví dụ có sẵn trên internet sử dụng .jscác tệp có phản ứng nhưng nhiều ví dụ khác sử dụng .jsxcác tệp.
Tôi đã đọc về .jsxcác tập tin và sự hiểu biết của tôi là họ chỉ cho phép bạn viết các thẻ html trong của bạn javascript. Nhưng điều tương tự cũng có thể được viết trong .jscác tập tin.
Vì vậy, sự khác biệt thực sự giữa hai phần mở rộng .jsvà là .jsxgì?
Câu trả lời:
Không có gì khi nói đến phần mở rộng tập tin. Trình đóng gói / bộ chuyển đổi / bất cứ điều gì của bạn đảm nhiệm việc giải quyết loại nội dung tệp nào có.
Tuy nhiên có một số lưu ý khác khi quyết định những gì để đưa vào một .jshoặc một .jsxloại tập tin. Vì JSX không phải là JavaScript tiêu chuẩn, người ta có thể lập luận rằng bất kỳ thứ gì không phải là JavaScript "đơn giản" nên đi vào các phần mở rộng của riêng nó, ví dụ, .jsxđối với JSX và .tscho TypeScript chẳng hạn.
.jsxkhông phải là một yêu cầu
Trong hầu hết các trường hợp, nó chỉ cần bộ chuyển đổi / gói, có thể không được cấu hình để hoạt động với các tệp JSX, nhưng với JS! Vì vậy, bạn buộc phải sử dụng các tệp JS thay vì JSX.
Và vì Reac chỉ là một thư viện cho javascript, nên bạn không có sự khác biệt nào khi lựa chọn giữa JSX hoặc JS. Chúng hoàn toàn có thể hoán đổi cho nhau!
Trong một số trường hợp, người dùng / nhà phát triển cũng có thể chọn JSX thay vì JS, vì làm nổi bật mã, nhưng hầu hết các trình soạn thảo mới hơn cũng đang xem chính xác cú pháp phản ứng trong các tệp JS.
Các thẻ JSX ( <Component/>) rõ ràng không phải là javascript tiêu chuẩn và không có ý nghĩa đặc biệt nếu bạn đặt chúng trong một <script>thẻ trần chẳng hạn. Do đó, tất cả các tệp React chứa chúng là JSX chứ không phải JS.
Theo quy ước, điểm vào của ứng dụng React thường là .js thay vì .jsx mặc dù nó có chứa các thành phần React. Nó cũng có thể là .jsx. Bất kỳ tệp JSX nào khác thường có phần mở rộng .jsx.
Trong mọi trường hợp, lý do có sự không rõ ràng là vì cuối cùng phần mở rộng không quan trọng lắm vì bộ chuyển đổi vui vẻ nhai bất kỳ loại tệp nào miễn là chúng thực sự là JSX.
Lời khuyên của tôi sẽ là: đừng lo lắng về điều đó.
var elem = <div>Text</div>;không phải là một phần tử html tiêu chuẩn; nó không hỗ trợ appendChild, classListvà có lẽ tính năng html khác. Nếu bạn muốn các thẻ html trực tiếp trong javascript, tốt hơn là sử dụng mẫu bằng chữ (backtick `) cùng với innerHtmlhoặc outerHtml.
Bên cạnh thực tế được đề cập rằng các thẻ JSX không phải là javascript tiêu chuẩn, lý do tôi sử dụng phần mở rộng .jsx là vì với nó Emmet vẫn hoạt động trong trình chỉnh sửa - bạn biết đấy, plugin hữu ích đó mở rộng mã html, ví dụ: ul> li vào
<ul>
<li></li>
</ul>
"emmet.includeLanguages": { "javascript": "javascriptreact" }nhưng có, tôi đồng ý rằng mã JSX nên sử dụng phần mở rộng .jsx nếu có thể.
Như đã đề cập khác JSXkhông phải là một phần mở rộng Javascript tiêu chuẩn. Tốt hơn là đặt tên điểm nhập cảnh của Ứng dụng dựa trên .jsvà cho các thành phần còn lại, bạn có thể sử dụng .jsx.
Tôi có một lý do quan trọng tại sao tôi sử dụng .JSXcho tất cả các tên tệp của thành phần. Trên thực tế, trong một dự án quy mô lớn với một loạt mã lớn, nếu chúng ta đặt tất cả thành phần của React với .jsxphần mở rộng, sẽ dễ dàng hơn trong khi điều hướng đến các tệp javascript khác nhau trong dự án (như người trợ giúp, phần mềm trung gian, v.v.) và bạn biết điều này là Thành phần React chứ không phải các loại tệp javascript khác.
JSX không phải là JavaScript chuẩn, dựa trên hướng dẫn kiểu 'eslint' của Airbnb có thể xem xét mẫu này
// filename: MyComponent.js
function MyComponent() {
return <div />;
}
như một cảnh báo, nếu bạn đặt tên tệp của mình là MyComponent.jsx, nó sẽ vượt qua, trừ khi bạn chỉnh sửa quy tắc eslint, bạn có thể kiểm tra hướng dẫn kiểu ở đây