JSX to JS: biến mã React thành JavaScript thuần
JSX to JS nghĩa là viết lại cú pháp thẻ trong các component React thành JavaScript thuần mà trình duyệt chạy được. Công cụ này dùng Babel nên kết quả giống một bước build bằng Babel. Bạn chọn giữa lệnh gọi React.createElement kiểu Cổ điển và runtime jsx() kiểu Tự động, rồi sao chép kết quả. Mã của bạn được biên dịch ngay trong trình duyệt, không bao giờ được tải lên hay chạy.
JSX to JS online: các bước thực hiện
Bạn không cần cài gì và cũng không cần tài khoản:
- Dán mã của bạn vào ô Mã JSX. Khi ô còn trống, bạn sẽ thấy dòng “Dán JSX vào đây…”. Giới hạn là 1.000.000 ký tự.
- Chờ một chút. Công cụ biên dịch khi bạn gõ hoặc dán, khoảng một phần ba giây sau thay đổi cuối cùng, nên không có nút nào để bấm. Lần đầu, Babel được tải về một lần nên sẽ lâu hơn một chút.
- Đọc kết quả dưới tiêu đề JavaScript. Kết quả hiện ra dưới dạng mã được tô màu, chỉ để đọc.
- Chọn Sao chép vào khay nhớ tạm. Nút sẽ đổi thành Đã sao chép.
- Để đổi cách JSX được biên dịch, hãy dùng nút bánh răng bên cạnh (Cài đặt runtime JSX). Nút này mở nhóm Runtime JSX với hai lựa chọn, Cổ điển và Tự động. Sau khi đổi, mã được biên dịch lại.
Nếu văn bản không phải JSX hợp lệ, bạn sẽ thấy thông báo lỗi cú pháp kèm số dòng và số cột, dòng bị lỗi và dấu ^ ngay dưới vị trí đó, và không có kết quả cho đến khi bạn sửa lỗi. Nếu mã không có JSX nào, mã được trả lại như JavaScript thuần kèm thông báo “Không tìm thấy JSX trong mã này, nên kết quả trả về là JavaScript thuần.”
JSX vs React createElement: Cổ điển hay Tự động
Với Cổ điển, lựa chọn mặc định, mỗi phần tử trở thành một lệnh gọi React.createElement(type, props, ...children) và fragment trở thành React.Fragment. Không có import nào được thêm, nên React phải nằm trong phạm vi. Hãy chọn nó nếu dự án hoặc bài hướng dẫn của bạn vẫn import React ở mọi tệp, hoặc bạn nhắm tới một cấu hình cũ hơn.
Với Tự động, JSX trở thành các lệnh gọi jsx() hoặc jsxs(), phần tử con nằm trong props, và fragment được gọi là _Fragment. Import từ react/jsx-runtime được thêm vào, chỉ gồm những tên mà mã dùng. Lựa chọn này cần React 17 trở lên và cho ra kết quả giống những gì bộ công cụ React hiện nay tạo ra.
Kết quả giữ nguyên gì, thay đổi gì trong JSX to JS converter
- Import và export giữ nguyên như bạn viết.
- Chú thích được giữ nguyên, ở đúng vị trí cũ.
- JavaScript thông thường quanh JSX không bị đụng tới, ngoài cách trình bày của Babel.
- Định dạng là của Babel, không phải của Prettier: dấu nháy và các lần xuống dòng của bạn trong JSX không được giữ lại. Muốn làm gọn kết quả, hãy chạy nó qua Định dạng mã nguồn.
- Chú thích
/*#__PURE__*/được thêm vào trước các lệnh gọi phần tử. Chúng báo cho công cụ đóng gói biết lệnh gọi đó không có tác dụng phụ.
Những gì công cụ không làm: TSX, TypeScript, Flow
Công cụ chỉ xử lý JSX. Nó không đọc được TypeScript, nên TSX có chú thích kiểu sẽ báo lỗi cú pháp, và Flow cũng không được hỗ trợ. Nó không chạy mã của bạn, không kiểm tra xem component có hoạt động không và không gộp tệp.
Muốn đi theo hướng ngược lại, từ JavaScript thông thường sang mã có kiểu, hãy dùng Chuyển JS sang TS. Để đọc các tập lệnh đã nén hoặc bị làm rối, hãy dùng Gỡ làm rối mã JS.
Babel JSX online: chạy ngay trong trình duyệt của bạn
Babel được tải một lần, vào lần đầu bạn dán, rồi việc biên dịch diễn ra trong một Web Worker trên thiết bị của bạn. Component của bạn không được gửi đi đâu và không bao giờ được chạy, nên bạn có thể yên tâm dán cả một tệp có tác dụng phụ.
Câu hỏi thường gặp
Làm sao dùng JSX to JS online?
Dán JSX của bạn vào ô “Mã JSX”. Khoảng một phần ba giây sau, JavaScript đã biên dịch hiện ra dưới tiêu đề “JavaScript”. Không có nút chuyển đổi, và “Sao chép vào khay nhớ tạm” sẽ lấy kết quả giúp bạn. Babel được tải một lần vào lần dán đầu tiên, nên lần chuyển đổi đầu tiên lâu hơn một chút.
Babel có biến JSX thành JavaScript không?
Có. Preset React của Babel sẽ biên dịch mã JSX thành JavaScript, và đó chính là thứ trang này chạy trong trình duyệt của bạn, nên kết quả giống một bước build bằng Babel. Khi bạn build dự án, các công cụ build cũng làm đúng việc đó một cách tự động. Hãy dùng trang này khi muốn xem hoặc sao chép kết quả cho một component hay một đoạn mã.
Khác biệt giữa JS và JSX là gì?
JSX là JavaScript với cú pháp giống XML để mô tả giao diện, ví dụ thẻ button kèm trình xử lý onClick. Trình duyệt không chạy trực tiếp được, nên một trình biên dịch viết lại mỗi thẻ thành một lệnh gọi hàm thông thường. Kết quả là JavaScript bình thường. Đuôi .jsx chỉ là quy ước đặt tên cho các tệp có chứa JSX.
Runtime Cổ điển và Tự động khác nhau thế nào?
Cổ điển biến JSX thành các lệnh gọi React.createElement, nên React phải nằm trong phạm vi ở mọi tệp dùng JSX. Tự động biến JSX thành lệnh gọi jsx() và jsxs() rồi tự thêm import từ react/jsx-runtime, nên bạn không phải import React chỉ để viết JSX. Tự động cần React 17 trở lên. Mặc định ở đây là “Cổ điển”.
JSX vs React createElement: làm sao ra React.createElement từ JSX?
Để runtime JSX ở “Cổ điển”, đó là mặc định. Mỗi phần tử trở thành một lệnh gọi React.createElement: trước hết là tên thẻ, rồi đến đối tượng props (null nếu không có), rồi đến các phần tử con. Fragment trở thành React.Fragment.
Vì sao kết quả dùng React nhưng không import nó?
Kết quả kiểu Cổ điển gọi React.createElement và React.Fragment mà không thêm import, vì nó cho rằng React đã nằm trong phạm vi. Nếu tệp của bạn không mở đầu bằng import React from 'react', hãy thêm dòng đó, hoặc đổi runtime JSX sang “Tự động”, nơi import cần thiết được viết sẵn.
Vì sao kết quả có chú thích /*#__PURE__*/?
Babel đặt /*#__PURE__*/ trước mỗi lệnh gọi phần tử. Nó báo cho công cụ nén và đóng gói biết lệnh gọi đó không có tác dụng phụ, nên phần tử không bao giờ được dùng có thể bị loại khỏi gói cuối cùng. Bạn có thể giữ hoặc xóa các chú thích này, chúng không làm đổi hành vi của mã.
Có xử lý được TSX hoặc TypeScript không?
Không. Công cụ mong đợi JSX nằm trong JavaScript thông thường, nên chú thích kiểu như props: Props là lỗi cú pháp. Hãy bỏ kiểu đi trước, hoặc biên dịch TypeScript bằng trình biên dịch TypeScript. Cú pháp Flow cũng không được hỗ trợ.
Mã của tôi có bị tải lên hoặc chạy không?
Không. Babel biên dịch mã ngay trong trình duyệt của bạn, trong một Web Worker, và không có gì được gửi tới máy chủ. Mã cũng không bao giờ được chạy, nên bạn có thể yên tâm dán một component có tác dụng phụ. Thứ duy nhất được tải về là chính Babel, và chỉ một lần.
