by Langkah Awal Pemula Untuk Belajar Kerangka JavaScript Desain Website – Berapa banyak JavaScript yang harus Anda ketahui untuk beralih ke kerangka kerja? Saya mendapatkan pertanyaan ini banyak dari pemula di bidang pengembangan web. Artikel ini hanyalah panduan sederhana tentang keterampilan yang saya rekomendasikan untuk dipelajari sebelum terjun ke kerangka kerja seperti React, Angular, atau Vue. Kerangka kerja ini semuanya berbeda, tetapi hal-hal tertentu digunakan di setiap kerangka itu, dan jika Anda mempelajari keterampilan ini sebelumnya, Anda akan memiliki lebih sedikit kesulitan untuk memahami konsep kerangka kerja tertentu.
Langkah Awal Pemula Untuk Belajar Kerangka JavaScript Desain Website
phpbbstyles – Pertama-tama, setiap pemula harus memiliki dasar-dasar JavaScript sebelum pindah ke kerangka kerja. Mereka termasuk variabel sintaks dasar, array, objek, fungsi, loop, semua konsep lain yang akan Anda pelajari ketika Anda mulai belajar bahasa. Dengan sebagian besar kerangka kerja, Anda tidak langsung menyentuh DOM. Namun, saya masih akan merekomendasikan mempelajari cara memanipulasinya jika Anda ingin membangun sesuatu dalam JavaScript vanilla murni.
Satu masalah yang saya lihat adalah orang ingin langsung masuk ke kerangka kerja setelah mempelajari dasar-dasarnya. Saya pikir itu adalah kesalahan besar karena mereka tidak hanya mencoba mempelajari konsep kerangka kerja, mereka juga mempelajari semua ES6 secara bersamaan. Hal-hal seperti kelas, fungsi panah, perusakan. Masalah dengan pendekatan ini adalah mereka tidak akan dapat mengidentifikasi apa yang merupakan bagian dari kerangka kerja dan apa itu JavaScript.
Modul
Modul digunakan di setiap kerangka kerja karena digunakan untuk mengimpor file ke file lain atau untuk mengimpor paket. Tanpa modul, tidak akan ada kerangka kerja apa pun karena modul memungkinkan semuanya bekerja bersama alih-alih memiliki file kode yang terisolasi. Ada berbagai jenis modul, tetapi Anda ingin fokus pada ES6, yang merupakan sintaks “impor-dari”. Angular menggunakan TypeScript, yang memiliki banyak fitur yang sama dengan ES6 termasuk modul. Jadi, jika Anda mempelajari modul ES6, Anda akan baik-baik saja dengan TypeScript.
Baca Juga : Dasar-Dasar Database WordPress Dan MySQL
Modul tidak didukung di browser secara langsung, oleh karena itu, Anda harus menggunakan beberapa jenis alat, seperti Parcel atau Webpack dengan Babble jika Anda ingin dapat mengkompilasi modul. Saya tidak akan mengatakan bahwa Anda harus belajar bagaimana melakukannya sebelum pindah ke kerangka kerja, tetapi saya akan menyarankan setidaknya membaca tentang modul sedikit, melihat sintaks, mungkin menonton tutorial sebelum Anda melanjutkan untuk mempelajari kerangka.
Kelas
Kelas diperkenalkan di ES6. Kelas digunakan dalam banyak bahasa dan Anda bahkan mungkin akrab dengan kelas dari bahasa OOP lain. Kelas lebih umum digunakan dalam React dan Angular. Vue menggunakan tipe literal objek. Saya akan menyarankan kelas belajar, bahkan jika Anda sedang belajar Vue. Pelajari cara menyusunnya, pelajari tentang konstruktor, metode dan properti, instantiasi, serta perluasan kelas dan pewarisan.
Fungsi panah
Fungsi panah akan membuat kode Anda jauh lebih ringkas dan bersih, meskipun ada banyak situasi di mana Anda tidak perlu menggunakan fungsi panah. Dalam pengalaman saya, mereka adalah norma dalam membangun aplikasi dengan kerangka kerja ini. Ini lebih bersih, membutuhkan lebih sedikit baris kode, dan mungkin juga ada keuntungan dalam lingkup karena menggunakan sesuatu yang disebut leksikal this , jadi Anda ingin melihat lebih jauh ke dalamnya .
janji
ES6 memperkenalkan janji sebagai alternatif untuk menggunakan panggilan balik untuk kode asinkron. Jika kami membuat permintaan ke server atau apa pun yang dapat memakan waktu cukup lama, kami ingin melakukannya secara asinkron sehingga kami dapat melanjutkan dengan aplikasi kami dan tidak harus berhenti dan menunggu tanggapan. Ini dicapai melalui penggunaan janji-janji. Sederhananya, mereka membuat janji dan kemudian memenuhinya ketika tugas selesai.
Saat janji selesai, Anda ingin menggunakan .then() untuk menangkap respons dan mendapatkan data kembali dan kemudian .catch() untuk menangkap kemungkinan kesalahan. Anda mungkin juga ingin melihat sintaks Async/Await, tetapi saya rasa tidak perlu menggunakan kerangka kerja. Anda juga perlu mempelajari cara menggunakan fetch API untuk membuat permintaan HTTP. Ada alat lain seperti Axios yang dapat Anda gunakan, tetapi ada baiknya mengetahui cara melakukannya dengan JavaScript vanilla.
Destrukturisasi
Destructuring adalah cara yang ampuh untuk membongkar nilai dan menetapkan variabel dari objek dan array. Itu membuat kode Anda lebih bersih. Sebagian besar pengembang lebih suka menggunakannya dalam aplikasi yang dibangun dengan kerangka kerja tersebut. Perlu diingat bahwa destrukturisasi adalah bagian dari ES6 dan tidak kompatibel dengan semua browser. Saya sarankan menggunakan Babel, TypeScript, atau apa pun yang akan mengkompilasi kode Anda ke dalam ES5 untuk memastikan kompatibilitas penuh untuk setiap pengguna.
Komponen dan Status
Saat pertama kali mempelajari HTML dasar, CSS, JavaScript, Anda diajarkan tentang pemisahan masalah. Anda memiliki markup HTML, gaya CSS, dan JavaScript Anda untuk fungsionalitas tipe dinamis apa pun. Jadi Anda memilih elemen dari DOM dan memanipulasinya dengan cara yang monolitik. Dengan kerangka kerja, ini sedikit berbeda dalam hal cara Anda memikirkan mekanisme aplikasi Anda. Anda ingin menganggap bagian dari antarmuka pengguna Anda sebagai komponen. Lihat bilah menu, bilah pencarian, konten utama, apa pun itu, sebagai entitas yang dienkapsulasi yang menyertakan markup dan fungsionalitas, dan dalam beberapa kasus, gaya.
Setiap komponen memiliki statusnya sendiri, yang biasanya merupakan data yang terkait dengannya bersama dengan status keberadaannya. Jadi misalnya, Anda mungkin memiliki komponen menu yang memiliki status buka dan status tutup sehingga jika Anda mengkliknya, mungkin akan terbuka dan tertutup jika Anda mengkliknya lagi. Anda akan memiliki itu di negara Anda. Begitulah cara Anda harus mulai berpikir tentang UI Anda ketika Anda berurusan dengan kerangka kerja. Dalam banyak kasus, Anda ingin berbagi data atau berbagi status. Saat itulah Anda melihat hal-hal seperti Redux dalam hal React untuk manajemen tingkat negara bagian.
Operator spread
Hal ini penting, terutama ketika berhadapan dengan Negara. Negara biasanya tidak dapat diubah, yang berarti tidak dapat diubah secara langsung. Apa yang biasanya terjadi adalah Anda harus membuat salinannya dan menambahkan apa yang Anda inginkan, dan kemudian mengirimkannya ke aplikasi atau komponen. Operator spread memungkinkan kita untuk melakukan itu. Jadi inilah contoh yang sangat sederhana. Jadi katakanlah kita memiliki status pengguna ini yang hanya memiliki satu properti nama yang sama dengan Samuel, dan kita ingin menambahkan properti usia ke status pengguna ini.
const status pengguna = {
nama: ‘Samuel’
}
Apa yang bisa kita lakukan adalah membuat status pengguna baru, dan kita dapat menggunakan operator spread, yang hanya tiga titik dan dimasukkan ke dalam status pengguna, dan itu akan memberi kita apa pun status pengguna asli. Itu akan membuat salinan aslinya, dan kemudian kita dapat menambahkan properti usia seperti itu,
const newUserState = {
…negara pengguna,
usia: 26
}
Fungsi array tingkat tinggi
Ada banyak fungsi seperti itu di JavaScript. Beberapa yang umum termasuk forEach(), map(), dan filter(). Fungsi tingkat tinggi adalah fungsi yang mengambil fungsi lain sebagai parameter, tetapi ini semua berkaitan dengan array, mengulanginya dan memanipulasi data. forEach()mungkin yang paling dasar. Ini digunakan untuk iterasi seperti pengembalian for-loop. Itu loop melalui array dan Anda dapat melakukan apa yang Anda inginkan dengan item array.
map()banyak digunakan di React, dan digunakan untuk membuat array dari array lain. Anda mungkin memiliki array objek pengguna dan katakanlah ada properti usia, antara lain. Jika Anda ingin membuat larik hanya dengan usia mereka, Anda dapat melakukannya dengan map(). filter()yang akan, seperti namanya, memfilter item berdasarkan suatu kondisi. Ini sebagian besar digunakan dalam reduksi dan manajemen negara.
