jQuery dan React keduanya merupakan library JavaScript yang populer untuk pengembangan front-end. Sementara jQuery adalah pustaka manipulasi DOM, React adalah pustaka JavaScript untuk membangun antarmuka pengguna.

Cari tahu cara memigrasikan aplikasi yang sudah ada dari jQuery ke React.

jQuery vs. Reaksi?

Ketika memilih antara jQuery dan React, itu tergantung pada kebutuhan dan preferensi Anda. Jika Anda mencari library yang mudah digunakan dan memiliki komunitas yang besar, maka jQuery adalah pilihan yang tepat. Namun jika Anda mencari perpustakaan yang lebih cocok untuk pengembangan berskala besar, React adalah pilihan yang lebih baik.

Mengapa Bermigrasi dari jQuery ke Bereaksi?

Ada beberapa alasan mengapa Anda mungkin ingin memigrasikan aplikasi Anda dari jQuery ke React.

  • Bereaksi lebih cepat dari jQuery: Jika kita berbicara tentang performa mentah, React lebih cepat dari jQuery. Ini karena React menggunakan DOM virtual, yang merupakan representasi JavaScript dari DOM sebenarnya. Artinya, saat pengguna berinteraksi dengan aplikasi React, hanya bagian DOM yang berubah yang akan diperbarui. Ini lebih efisien daripada manipulasi DOM penuh jQuery.
    instagram viewer
  • Bereaksi lebih dapat dipertahankan: Alasan lain untuk bermigrasi ke React adalah lebih dapat dipertahankan daripada jQuery. Ini karena komponen React berdiri sendiri sehingga Anda dapat dengan mudah menggunakannya kembali. Ini berarti bahwa jika Anda perlu membuat perubahan pada komponen React, Anda dapat melakukannya tanpa memengaruhi basis kode lainnya.
  • Bereaksi lebih terukur: Terakhir, React lebih terukur daripada jQuery. Ini menggunakan arsitektur berbasis komponen, yang lebih terukur daripada pendekatan monolitik jQuery. Ini berarti Anda dapat dengan mudah memperluas dan memodifikasi aplikasi React seperlunya.
  • Bereaksi memiliki dukungan yang lebih baik untuk pengujian unit: Dalam hal pengujian unit, React memiliki dukungan yang lebih baik daripada jQuery. Karena Anda dapat dengan mudah mengisolasi komponen React, lebih mudah untuk menulis pengujian unit untuk komponen tersebut.

Cara Memigrasikan Aplikasi Anda Dari jQuery ke React

Jika Anda berencana memigrasikan aplikasi dari jQuery ke React, ada beberapa hal yang perlu Anda ingat. Penting untuk mengetahui apa yang Anda perlukan untuk memulai dan mendapatkan ide bagus tentang bagaimana Anda dapat memigrasikan bagian individual dari aplikasi Anda.

Prasyarat

Sebelum Anda memulai proses migrasi, ada beberapa hal yang perlu Anda lakukan untuk mengatur semuanya. Pertama, Anda perlu membuat aplikasi Bereaksi menggunakan buat-reaksi-aplikasi.

Setelah Anda menginstal dependensi ini, Anda perlu membuat file bernama index.js di Anda src direktori. File ini akan menjadi titik masuk untuk aplikasi React Anda.

Terakhir, Anda dapat beralih ke masing-masing bagian dari basis kode Anda dan memperbaruinya sesuai kebutuhan.

1. Menangani Acara

Di jQuery, Anda dapat melampirkan acara ke elemen. Misalnya, jika Anda memiliki tombol, Anda dapat melampirkan event klik ke tombol tersebut. Ketika seseorang mengklik tombol, event handler akan dijalankan.

$("tombol").klik(fungsi() {
// lakukan sesuatu
});

React menangani event secara berbeda. Alih-alih melampirkan acara ke elemen, Anda mendefinisikannya dalam komponen. Misalnya, jika Anda memiliki tombol, Anda akan menentukan event klik di komponen:

kelasTombolmemanjangReaksi.Komponen{
 handleClick() {
// lakukan sesuatu
 }
 render() {
kembali (
<tombol onClick={ini.handleClick}>
 Klik saya!
</button>
 );
 }
}

Di sini, komponen Button berisi definisi metode handleClick(). Ketika seseorang mengklik tombol, metode ini akan berjalan.

Setiap metode memiliki pro dan kontra. Di jQuery, acara mudah dilampirkan dan dihapus. Namun, akan sulit untuk melacaknya jika Anda memiliki banyak acara. Di React, Anda mendefinisikan event dalam komponen, yang membuatnya lebih mudah untuk dilacak. Tapi mereka tidak mudah dipasang dan dilepas.

Jika Anda menggunakan React, Anda perlu memperbarui kode Anda untuk menggunakan metode penanganan kejadian yang baru. Untuk setiap kejadian yang ingin Anda tangani, Anda perlu menentukan metode dalam komponen. Metode ini akan dijalankan saat peristiwa dipicu.

2. Efek

Di jQuery, Anda mungkin menggunakan metode .show() atau .hide() untuk menampilkan atau menyembunyikan elemen. Misalnya:

$("#elemen").menunjukkan();

Di React, Anda bisa menggunakan hook useState() untuk mengelola status. Misalnya, jika Anda ingin menampilkan atau menyembunyikan suatu elemen, Anda harus menentukan status dalam komponen tersebut:

impor { status penggunaan } dari "reaksi";
fungsiKomponen() {
const [isShown, setIsShown] = useState(PALSU);
kembali (
<div>
 {ditampilkan &&<div>Halo!</div>}
<tombol onClick={() => setIsShown(!isShown)}>
 Beralih
</button>
</div>
 );
}

Kode ini mendefinisikan variabel keadaan isShown dan fungsi setIsShown(). Bereaksi memiliki berbagai jenis kait yang dapat Anda gunakan di aplikasi Anda, salah satunya adalah useState. Saat pengguna mengklik tombol, variabel status isShown diperbarui dan elemen hanya ditampilkan jika sesuai.

Di jQuery, efek mudah digunakan, dan bekerja dengan baik. Namun, mereka bisa sulit dikelola jika Anda memiliki banyak. Di React, efek berada di dalam komponen yang membuatnya lebih mudah dikelola, jika tidak mudah digunakan.

3. Pengambilan Data

Di jQuery, Anda dapat menggunakan metode $.ajax() untuk mengambil data. Misalnya, jika Anda ingin mengambil beberapa data JSON, Anda dapat melakukannya seperti ini:

$.ajax({
 url: "https://example.com/data.json",
 tipe data: "json",
 kesuksesan: fungsi(data) {
 // Mengerjakan sesuatu dengan itu data
 }
});

Di React, Anda bisa menggunakan metode fetch() untuk mengambil data. Inilah cara Anda mengambil data JSON menggunakan metode ini:

mengambil("https://example.com/data.json")
 .lalu (respons => respon.json())
 .lalu (data => {
 // Mengerjakan sesuatu dengan itu data
 });

Di jQuery, metode $.ajax() mudah digunakan. Namun, mungkin sulit untuk menangani kesalahan. Di React, metode fetch() lebih bertele-tele, tetapi lebih mudah menangani kesalahan.

4. CSS

Di jQuery, Anda dapat menentukan CSS berdasarkan halaman. Misalnya, jika Anda ingin memberi gaya pada semua tombol di halaman, Anda dapat melakukannya dengan menargetkan elemen tombol:

tombol {
 background-color: merah;
 warna putih;
}

Di React, Anda dapat menggunakan CSS dengan berbagai cara. Salah satu caranya adalah dengan menggunakan gaya sebaris. Misalnya, jika Anda ingin memberi gaya pada tombol, Anda dapat melakukannya dengan menambahkan atribut gaya ke elemen:

<gaya tombol={{warna latar belakang: 'merah', warna: 'putih'}}>
 Klik saya!
</button>

Cara lain untuk menata komponen React adalah menggunakan gaya global. Gaya global adalah aturan CSS yang Anda tentukan di luar komponen dan diterapkan ke semua komponen dalam aplikasi. Untuk melakukan ini, Anda dapat menggunakan pustaka CSS-in-JS seperti komponen-gaya:

impor bergaya dari 'gaya-komponen';
const Tombol = ditata.tombol`
 background-color: merah;
 warna putih;
`;

Tidak ada pilihan yang benar atau salah antara gaya sebaris dan gaya global. Itu sangat tergantung pada kebutuhan Anda. Secara umum, gaya sebaris lebih mudah digunakan untuk proyek kecil. Untuk proyek yang lebih besar, gaya global adalah pilihan yang lebih baik.

Terapkan Aplikasi React Anda dengan mudah

Salah satu keuntungan paling signifikan dari React adalah sangat mudah untuk menerapkan Aplikasi React Anda. Anda dapat menerapkan React di server web statis apa pun. Anda hanya perlu mengkompilasi kode Anda menggunakan alat seperti Webpack, lalu meletakkan file bundle.js yang dihasilkan di server web Anda.

Anda juga dapat menghosting aplikasi React Anda secara gratis di halaman GitHub.