Sebagai perpustakaan frontend paling populer, semua orang ingin mempelajari React. ReactJS pada dasarnya adalah JavaScript. Tapi itu tidak berarti Anda harus mempelajari semua yang ada di JavaScript untuk pindah ke ReactJS. Memahami konsep dasar JavaScript akan membantu Anda memahami konsep React dengan lebih mudah, dan pada akhirnya akan mempercepat kemampuan Anda untuk mengerjakan proyek.
Mari kita uraikan konsep-konsep penting yang harus Anda ketahui tentang JavaScript sebelum pindah ke ReactJS.
1. Fungsi Panah
Fungsi panah banyak digunakan di React. Pada versi 16.8, React berpindah dari komponen berbasis kelas ke komponen fungsional. Fungsi panah memungkinkan Anda membuat fungsi dengan sintaks yang lebih pendek.
Mari kita ilustrasikan itu dalam contoh berikut:
Fungsi reguler
fungsisalam() {
kembali'Halo'
}
menghibur.log (salam()) //helloFungsi Panah
membiarkan salam = () =>'Halo'
menghibur.log (salam()) //helloKedua fungsi di atas memiliki keluaran yang sama, meskipun sintaksnya berbeda. Fungsi panah terlihat lebih pendek dan lebih bersih dari fungsi biasa. Biasanya, komponen React memiliki struktur sebagai berikut:
impor Reaksi dari'reaksi'const Buku = () => {
kembali (
Buku</div>)
}
eksporbawaan Buku
Fungsi panah tidak memiliki nama. Jika Anda ingin menamainya, tetapkan ke variabel. Perbedaan antara fungsi biasa dan fungsi panah lebih dari sekadar sintaks. Pelajari lebih lanjut tentang fungsi panah di Mozilla dokumentasi pengembang.
2. Merusak
Destrukturisasi digunakan untuk mendapatkan data dari struktur data yang kompleks. Dalam JavaScript, array dan objek dapat menyimpan banyak nilai. Anda dapat memanipulasi nilai dan menggunakannya di berbagai bagian aplikasi.
Untuk mendapatkan nilai-nilai ini, Anda harus mendestruktur variabel. Bergantung pada struktur data yang Anda hadapi, Anda dapat menggunakan notasi titik (.) atau notasi braket. Misalnya:
const siswa = {'nama': 'Maria',
'alamat': 'Taman Selatan, Bethlehem',
'usia': 15
}
Merusak:
menghibur.log (nama.siswa) // keluarkan MariaPada contoh di atas, notasi titik mengakses nilai kunci 'nama'. Di ReactJS, Anda akan menggunakan konsep destrukturisasi untuk mendapatkan dan berbagi nilai dalam aplikasi Anda. Destrukturisasi membantu menghindari pengulangan dan membuat kode Anda lebih mudah dibaca.
3. Metode Larik
Anda akan menemukan array beberapa kali saat mengerjakan proyek React. Array adalah kumpulan data. Anda menyimpan data dalam array, sehingga Anda dapat menggunakannya kembali saat dibutuhkan.
Metode array terutama digunakan untuk memanipulasi, mengambil, dan menampilkan data. Beberapa metode array yang umum digunakan adalah peta(), Saring(), Dan mengurangi(). Anda pasti sudah familiar dengan metode larik untuk memahami kapan harus menerapkan masing-masing.
Misalnya, peta() metode mengulangi semua item dalam array. Kerjanya pada setiap elemen array untuk membuat array baru.
const angka = [9, 16, 25, 36];
const squaredArr = angka.peta(Matematika.sqrt) // 3,4,5,6
Anda akan banyak menggunakan metode array di ReactJS. Anda akan menggunakannya untuk mengonversi array menjadi string, bergabung, menambahkan item, dan menghapus item dari array lain.
4. Persyaratan Pendek
Kondisional adalah pernyataan yang digunakan JavaScript untuk membuat keputusan dalam kode. Persyaratan pendek termasuk && (dan), II (atau), dan Operator Ternary. Ini adalah ekspresi kondisi yang lebih pendek dan pernyataan if/else.
Contoh berikut menunjukkan cara menggunakan operator ternary.
Kode dengan pernyataan if/else:
fungsiwaktu pembukaan(hari) {
jika (hari == MINGGU) {
kembali12;
}
kalau tidak {
kembali9;
}
}Kode dengan Operator Terner:
fungsiwaktu pembukaan(hari) {
kembali hari == MINGGU? 12: 9;
}Belajar tentang berbagai jenis conditional dengan fokus khusus pada persyaratan singkat. Ini banyak digunakan dalam Bereaksi.
5. Templat Literal
Template Literal menggunakan back-ticks (``) untuk mendefinisikan sebuah string. Templat literal memungkinkan Anda untuk memanipulasi data string sehingga membuatnya lebih dinamis. Literal template yang diberi tag memungkinkan Anda untuk melakukan operasi dalam sebuah string. Ini adalah ekspresi kondisi yang lebih pendek dan pernyataan if/else.
Misalnya:
membiarkan nama depan = "Jane";membiarkan nama belakang = "Kelinci betina";
membiarkan teks = `Selamat datang ${firstName}, ${namabelakang}!`; // Selamat datang Jane Doe!
6. Menyebarkan Operator
Operator Spread (...) menyalin nilai dari suatu objek atau larik ke yang lain. Sintaksnya terdiri dari tiga titik diikuti dengan nama variabel. Misalnya (...nama). Itu menggabungkan properti dari dua array atau objek.
Contoh berikut menunjukkan cara menggunakan operator spread untuk menyalin nilai dari satu variabel ke variabel lainnya.
const nama = ['Maria', 'Jane'];
const anggota grup = ['Fred', ...nama, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Anda dapat menggunakan operator spread untuk melakukan sejumlah operasi. Ini termasuk menyalin isi array, memasukkan array ke array lain, mengakses array bersarang, dan meneruskan array sebagai argumen. Anda dapat menggunakan operator spread di ReactJS untuk menangani perubahan status komponen.
Mengapa Mempelajari ReactJS?
ReactJS populer karena alasan yang bagus. Ini memiliki kurva belajar yang pendek, andal, dan merender dengan cepat ke DOM. Ini mendukung komponen mandiri dan memiliki alat debugging yang hebat.
ReactJS menggabungkan konsep JavaScript baru dari ECMAScript 6 (ES6). Mempelajari konsep dasar dalam JavaScript akan mempermudah pengembangan proyek di ReactJS.
Yang terpenting, ReactJS memiliki komunitas hebat yang terus-menerus merilis pembaruan baru. Jika Anda ingin mempelajari perpustakaan JavaScript, ReactJS akan menjadi pilihan yang bagus. Framework Next.js melengkapi keterbatasan ReactJS. Kombinasi keduanya membuat ReactJS menjadi pustaka front-end yang tangguh.
