JSX ke JS: dari kode React ke JavaScript biasa
JSX ke JS berarti mengubah sintaks tag pada komponen React menjadi JavaScript biasa yang bisa dijalankan browser. Alat ini memakai Babel, jadi hasilnya sama dengan langkah build Babel. Anda memilih antara panggilan React.createElement klasik dan runtime jsx() otomatis, lalu menyalin hasilnya. Kode Anda dikompilasi di browser, tidak pernah diunggah, dan tidak pernah dijalankan.
Convert JSX ke JS online: langkah-langkahnya
Anda tidak perlu memasang apa pun atau membuat akun:
- Tempel kode Anda ke kolom Kode JSX. Selama kosong, kolom menampilkan “Tempel JSX di sini…”. Batasnya 1.000.000 karakter.
- Tunggu sebentar. Alat ini mengompilasi saat Anda mengetik atau menempel, sekitar sepertiga detik setelah perubahan terakhir, jadi tidak ada tombol yang perlu ditekan. Pertama kali, Babel diunduh satu kali sehingga prosesnya sedikit lebih lama.
- Baca hasilnya di bawah judul JavaScript. Hasil tampil sebagai kode berwarna yang hanya bisa dibaca.
- Pilih Salin ke papan klip. Tombolnya berubah menjadi Tersalin.
- Untuk mengubah cara JSX dikompilasi, gunakan tombol roda gigi di sebelahnya (Pengaturan runtime JSX). Tombol itu membuka grup Runtime JSX dengan dua pilihan, Klasik dan Otomatis. Setelah diganti, kode dikompilasi ulang.
Jika teks bukan JSX yang valid, Anda melihat pesan kesalahan sintaks dengan nomor baris dan kolom, baris yang bermasalah, serta tanda ^ tepat di bawah titiknya, dan tidak ada hasil sampai kesalahan diperbaiki. Jika kode sama sekali tidak mengandung JSX, kode ditampilkan kembali sebagai JavaScript biasa dengan pesan “Tidak ada JSX di kode ini, jadi hasilnya kembali sebagai JavaScript biasa.”
JSX ke React createElement: klasik atau otomatis
Dengan Klasik, pilihan bawaan, setiap elemen menjadi panggilan React.createElement(type, props, ...children) dan fragmen menjadi React.Fragment. Tidak ada impor yang ditambahkan, jadi React harus berada dalam cakupan. Pilih ini jika proyek atau tutorial Anda masih mengimpor React di setiap berkas, atau Anda menargetkan konfigurasi yang lebih lama.
Dengan Otomatis, JSX menjadi panggilan jsx() atau jsxs(), dengan anak elemen di dalam props, dan fragmen bernama _Fragment. Impor dari react/jsx-runtime ditambahkan, hanya dengan nama yang dipakai kode. Pilihan ini memerlukan React 17 atau lebih baru dan menghasilkan keluaran seperti yang dibuat toolchain React masa kini.
Yang dipertahankan dan yang berubah pada hasil
- Impor dan ekspor tetap seperti yang Anda tulis.
- Komentar tetap ada di tempatnya.
- JavaScript biasa di sekitar JSX dibiarkan apa adanya, selain tata letak Babel.
- Pemformatannya milik Babel, bukan Prettier: tanda kutip dan jeda baris Anda di dalam JSX tidak dipertahankan. Untuk merapikan hasilnya, jalankan lewat alat Formatir Kode.
- Anotasi
/*#__PURE__*/ditambahkan di depan panggilan elemen. Anotasi ini memberi tahu bundler bahwa panggilan tersebut tidak punya efek samping.
Yang tidak didukung: TSX, TypeScript, dan Flow
Alat ini hanya mengompilasi JSX. TypeScript tidak dibaca, jadi TSX dengan anotasi tipe menghasilkan kesalahan sintaks, dan Flow juga tidak didukung. Alat ini tidak menjalankan kode Anda, tidak memeriksa apakah komponen Anda berfungsi, dan tidak menggabungkan berkas.
Untuk arah sebaliknya, dari JavaScript biasa ke kode bertipe, gunakan Konverter JS ke TS. Untuk membaca skrip yang diminifikasi atau diacak, gunakan Deobfuskator JS.
Mengapa semuanya berjalan di browser Anda
Babel dimuat sekali, saat Anda pertama kali menempel, lalu proses kompilasi berjalan di Web Worker pada perangkat Anda. Komponen Anda tidak dikirim ke mana pun dan tidak pernah dijalankan, jadi berkas yang punya efek samping pun aman ditempel.
Pertanyaan yang sering diajukan
Bagaimana convert JSX ke JS secara online?
Tempel JSX Anda ke kolom “Kode JSX”. Sekitar sepertiga detik kemudian JavaScript hasil kompilasi muncul di bawah judul “JavaScript”. Tidak ada tombol konversi, dan “Salin ke papan klip” mengambil hasilnya. Babel diunduh sekali saat pertama kali menempel, jadi konversi pertama sedikit lebih lama.
Apakah Babel mengubah JSX menjadi JavaScript?
Ya. Preset React milik Babel mengompilasi JSX menjadi JavaScript, dan itulah yang dijalankan halaman ini di browser Anda, jadi hasilnya sama dengan langkah build Babel. Alat build melakukan hal yang sama secara otomatis saat proyek dibangun. Gunakan halaman ini saat Anda ingin melihat atau menyalin hasil untuk satu komponen atau cuplikan.
Apa perbedaan JSX dan JS?
JSX adalah JavaScript dengan sintaks mirip XML untuk menggambarkan antarmuka, misalnya tag button dengan penangan onClick. Browser tidak bisa menjalankannya, jadi kompiler menulis ulang setiap tag menjadi panggilan fungsi biasa. Hasilnya adalah JavaScript biasa. Ekstensi .jsx hanyalah kebiasaan penamaan untuk berkas yang berisi JSX.
Apa perbedaan runtime klasik dan otomatis?
Klasik mengubah JSX menjadi panggilan React.createElement, sehingga React harus berada dalam cakupan di setiap berkas yang memakai JSX. Otomatis mengubahnya menjadi panggilan jsx() dan jsxs() serta menambahkan impor dari react/jsx-runtime untuk Anda, jadi Anda tidak perlu mengimpor React hanya untuk menulis JSX. Otomatis memerlukan React 17 atau lebih baru. Nilai bawaan di sini adalah “Klasik”.
Bagaimana menghasilkan React.createElement dari JSX?
Biarkan runtime JSX pada “Klasik”, yaitu nilai bawaan. Setiap elemen menjadi panggilan React.createElement: nama tag lebih dulu, lalu objek props (null jika tidak ada), lalu anak elemen. Fragmen menjadi React.Fragment.
Mengapa hasilnya memakai React tetapi tidak mengimpornya?
Keluaran klasik memanggil React.createElement dan React.Fragment tanpa menambahkan impor, karena mengira React sudah ada dalam cakupan. Jika berkas Anda tidak diawali import React from 'react', tambahkan baris itu atau ganti runtime JSX ke “Otomatis”, yang menuliskan impor yang dibutuhkan.
Mengapa ada komentar /*#__PURE__*/ di hasilnya?
Babel menaruh /*#__PURE__*/ di depan setiap panggilan elemen. Komentar ini memberi tahu minifier dan bundler bahwa panggilan tersebut tidak punya efek samping, sehingga elemen yang tidak pernah dipakai bisa dibuang dari bundel akhir. Komentar boleh dibiarkan atau dihapus, perilaku kodenya tidak berubah.
Apakah bisa mengonversi TSX atau TypeScript?
Tidak. Alat ini mengharapkan JSX di dalam JavaScript biasa, jadi anotasi tipe seperti props: Props menjadi kesalahan sintaks. Hapus tipenya terlebih dahulu atau kompilasi TypeScript dengan kompiler TypeScript. Sintaks Flow juga tidak didukung.
Apakah kode saya diunggah atau dijalankan?
Tidak. Babel mengompilasi kode di browser Anda, di dalam Web Worker, dan tidak ada yang dikirim ke server. Kode juga tidak pernah dijalankan, jadi komponen yang punya efek samping aman ditempel. Satu-satunya yang diunduh adalah Babel itu sendiri, satu kali.
