Topik apa yang ada di javascript?

Repositori ini dibuat dengan tujuan membantu pengembang menguasai konsep mereka dalam JavaScript. Ini bukan persyaratan, tetapi panduan untuk studi di masa depan. Ini didasarkan pada artikel yang ditulis oleh Stephen Curtis dan Anda dapat membacanya di sini

🚀Dianggap oleh GitHub sebagai salah satu proyek open source teratas tahun 2018

Masyarakat

Jangan ragu untuk mengirimkan PR dengan menambahkan tautan ke rekap atau ulasan Anda sendiri. Jika Anda ingin menerjemahkan repo ke dalam bahasa ibu Anda, jangan ragu untuk melakukannya

React adalah salah satu framework JavaScript paling populer untuk membangun aplikasi satu halaman. Tak perlu dikatakan, sebagai kerangka kerja JavaScript, Anda harus memiliki pengetahuan yang baik tentang konsep JavaScript

Pada artikel ini, kita akan melihat beberapa konsep JavaScript yang harus Anda ketahui sebelum mempelajari React. Pemahaman yang baik tentang topik ini sangat penting dalam membangun aplikasi React skala besar. Jadi tanpa basa-basi lagi, mari kita mulai

1. Dasar JavaScript

React adalah framework JS dan Anda akan menggunakan JavaScript secara ekstensif dalam kode React Anda. Jadi, tidak perlu khawatir bahwa Anda harus mengetahui konsep dasar JavaScript

Pada dasarnya, maksud saya hal-hal seperti variabel, tipe data, operator, kondisional, array, fungsi, objek, peristiwa, dan sebagainya.

Memiliki pemahaman yang tepat tentang konsep-konsep ini penting bagi Anda untuk menavigasi dengan benar di React, karena Anda akan menggunakannya di setiap langkah saat membuat aplikasi React

Jadi, jika Anda tidak yakin tentang hal-hal ini atau ingin segera merevisi semuanya lagi, lihat beberapa kursus gratis ini atau kurikulum JavaScript CodeCamp gratis. Dokumen MDN dan JavaScript. info juga membantu referensi pencarian cepat

2. Operator Terner

Ternary Operator adalah operator bersyarat satu baris pendek untuk menggantikan if/else. Ini sangat berguna untuk memeriksa kondisi dengan cepat untuk merender komponen, memperbarui status, atau menampilkan beberapa teks

Mari kita bandingkan cara kerja Ternary Operator dengan pernyataan If/Else

// Example of Ternary Operator condition ? 'True' : 'False' // Example of If/Else statement if(condition) { 'True' } else { 'False' }:

Anda dapat melihat sendiri betapa bersih dan pendeknya menggunakan Ternary Operator daripada menggunakan If/Else

Cara kerjanya adalah Anda menulis kondisi, dan jika kondisinya benar, program Anda akan mengeksekusi pernyataan setelah // Example of If/Else statement if(condition) { 'True' } else { 'False' }: 3. Jika kondisi salah, program akan menjalankan pernyataan setelah // Example of If/Else statement if(condition) { 'True' } else { 'False' }: 4

Sederhana, bukan?

3. Merusak

Destrukturisasi membantu kita membongkar nilai dari array dan objek dan menugaskannya ke variabel terpisah dengan cara yang sederhana dan mulus. Mari kita pahami dengan beberapa kode

// With Destructuring const objects = ['table', 'iPhone', 'apple'] const [furniture, mobile, fruit] = objects // Without Destructuring const furniture = objects[0] const mobile = objects[1] const fruit = objects[2] _

Dalam contoh di atas, Destrukturisasi menghemat 3 baris kode dan membuat kode menjadi lebih bersih. Sekarang mari kita lihat contoh lain dari passing props di React with destructuring

// With Destructuring Ex-1 function Fruit({apple}) { return ( <div> This is an {apple} </div> ) } // With Destructuring Ex-2 function Fruit(props) { const {apple, iphone, car} = props return ( <div> This is an {apple} </div> ) } // Without Destructuring function Fruit(props) { return ( <div> This is an {props.apple} </div> ) }

Perhatikan bagaimana Anda harus menggunakan // Example of If/Else statement if(condition) { 'True' } else { 'False' }: _5 lagi dan lagi ketika Anda tidak menggunakan destrukturisasi di alat peraga Anda

Destrukturisasi membuat kode kita lebih bersih dan menyelamatkan kita dari penggunaan kata kunci props setiap kali Anda menggunakan variabel prop. Masih ada lagi yang harus dirusak dan Anda akan mempelajari hal-hal itu ketika Anda mulai membangun aplikasi di JavaScript dan Bereaksi

4. Operator Penyebaran

Spread Operator diperkenalkan ke JavaScript di ES6. Dibutuhkan iterable dan mengembangkannya menjadi elemen individual

Kasus penggunaan umum dari operator spread di React adalah menyalin nilai dari sebuah objek ke objek lain selama pembaruan status untuk menggabungkan properti dari kedua objek. Lihatlah sintaks di bawah ini

const [person, setPerson] = useState({ id: '', name: '', age: '' }); setPerson([ ...person, { id:"1", name: "Steve", age:"25" } ]);

Dalam contoh di atas, // Example of If/Else statement if(condition) { 'True' } else { 'False' }: _6 menyalin semua nilai objek person di objek status baru yang selanjutnya digantikan oleh nilai khusus lainnya dengan properti yang sama, yang memperbarui objek status

Ini adalah salah satu dari banyak kasus penggunaan operator spread di React. Saat aplikasi Anda menjadi lebih besar, alat seperti operator spread berguna untuk menangani data dengan cara yang lebih baik dan lebih efisien

5. Metode larik

Metode array sangat umum digunakan saat membangun aplikasi skala menengah hingga besar di React. Anda akan selalu menggunakan semacam metode array di hampir setiap aplikasi React yang Anda buat

Jadi, luangkan waktu untuk mempelajari metode ini. Beberapa metode sangat umum seperti map(). Anda menggunakan map() setiap kali Anda mengambil data dari sumber daya eksternal untuk menampilkannya di UI

Ada metode lain seperti filter, kurangi, urutkan, sertakan, temukan, forEach, splice, concat, push and pop, shift dan unshift dan seterusnya

Beberapa dari mereka umum digunakan, dan beberapa akan jarang digunakan. Kuncinya adalah memahami metode array umum dengan sangat baik, dan waspadai keberadaan metode lain sehingga kapan pun Anda membutuhkannya, Anda dapat mempelajarinya dengan cepat.

Berikut adalah buku pegangan yang bermanfaat tentang metode array dan bekerja dengan array secara umum dalam JavaScript sehingga Anda dapat mempelajari lebih lanjut

6. Fungsi Panah

Fungsi panah memungkinkan kita membuat fungsi secara sederhana dengan sintaks yang lebih pendek

// Regular Functions function hello() { return 'hello' } // Arrow Functions let hello = () => 'hello' _

Kedua fungsi dalam cuplikan kode di atas berfungsi sama, tetapi Anda dapat melihat bahwa fungsi panah jauh lebih bersih dan lebih pendek. Kosong () dalam sintaks di atas adalah untuk argumen. Bahkan jika tidak ada argumen, tanda kurung ini harus ada

Namun, Anda dapat melewati tanda kurung ini jika hanya ada satu argumen dalam fungsi, seperti ini

let square = num => num * num

Dalam fungsi panah satu baris, Anda dapat melewati pernyataan pengembalian. Anda juga bisa mendeklarasikan fungsi panah multiline dengan menggunakan kurung kurawal {} mirip dengan fungsi biasa

let square = num => { return num * num }

7. Janji

Anda menggunakan janji untuk menangani operasi asinkron dalam JavaScript modern. Setelah Anda membuat janji dalam JavaScript, itu bisa berhasil atau gagal – dikenal sebagai diselesaikan atau ditolak dalam terminologi JavaScript

Janji dalam JavaScript, dalam beberapa hal, juga bisa dibandingkan dengan janji yang kita buat sebagai manusia. Sama seperti janji manusia yang didorong oleh implementasi tindakan tertentu di masa depan, janji dalam JavaScript adalah tentang implementasi kode di masa mendatang, yang mengakibatkan diselesaikan atau ditolak

Ada 3 status janji

1. Tertunda – Ketika hasil akhir dari janji belum ditentukan
2. Terselesaikan – Ketika janji berhasil diselesaikan
3. Ditolak – Saat janji ditolak

Setelah janji berhasil diselesaikan atau ditolak, Anda dapat menggunakan a. lalu() atau. catch() metode di atasnya

• Itu. metode then() dipanggil ketika janji diselesaikan atau ditolak. Dibutuhkan 2 fungsi panggilan balik sebagai argumen. Yang pertama dieksekusi saat janji diselesaikan dan hasilnya diterima, dan yang kedua adalah argumen opsional jika janji ditolak
• Itu. metode catch() digunakan sebagai penangan kesalahan dan dipanggil saat janji ditolak atau memiliki kesalahan dalam eksekusi

Cukup teori, mari akhiri bagian ini dengan contoh janji, termasuk penggunaan metode // Example of If/Else statement if(condition) { 'True' } else { 'False' }: 7 dan // Example of If/Else statement if(condition) { 'True' } else { 'False' }: 8

let promise = new Promise((resolve, reject) => { const i = "Promise"; i === "Promise" ? resolve() : reject(); // Checkout the above Ternary Operator section to better understand the syntax } ); promise. then(() => { console.log('Your promise is resolved'); }). catch(() => { console.log('Your promise is rejected'); });

8. Ambil API

Fetch API memungkinkan kita membuat permintaan asinkron ke server web dari browser. Itu mengembalikan janji setiap kali permintaan dibuat yang selanjutnya digunakan untuk mengambil respons permintaan

Pengambilan dasar () membutuhkan satu argumen, URL sumber daya yang ingin Anda ambil. Itu kemudian mengembalikan janji lain yang diselesaikan dengan objek // Example of If/Else statement if(condition) { 'True' } else { 'False' }: 9. Objek Respons ini adalah representasi dari respons HTTP

Jadi, untuk mendapatkan konten JSON dari promise ini, Anda harus menggunakan. metode json() pada objek Response. Ini akhirnya akan mengembalikan janji yang diselesaikan dengan hasil data JSON yang diurai dari badan respons

Mungkin sedikit membingungkan, jadi perhatikan baik-baik contoh di bawah ini

fetch('//example.com/books.json') // fetching the resource URL .then(response => response.json()); // calling .json() method on the promise .then(data => setState(data)); // updating the state with the JSON data

9. Asinkron/Menunggu

Fungsionalitas Async/Await menyediakan cara yang lebih baik dan lebih bersih untuk menangani Janji. JavaScript bersifat sinkron dan async/menunggu membantu kami menulis fungsi berbasis janji sedemikian rupa seolah-olah mereka sinkron dengan menghentikan eksekusi kode lebih lanjut hingga janji diselesaikan atau ditolak

Untuk membuatnya berfungsi, Anda harus terlebih dahulu menggunakan kata kunci async sebelum mendeklarasikan suatu fungsi. Misalnya, // With Destructuring const objects = ['table', 'iPhone', 'apple'] const [furniture, mobile, fruit] = objects // Without Destructuring const furniture = objects[0] const mobile = objects[1] const fruit = objects[2] _0. Menempatkan async sebelum suatu fungsi berarti bahwa fungsi tersebut akan selalu mengembalikan janji

Di dalam fungsi async, Anda dapat menggunakan kata kunci // With Destructuring const objects = ['table', 'iPhone', 'apple'] const [furniture, mobile, fruit] = objects // Without Destructuring const furniture = objects[0] const mobile = objects[1] const fruit = objects[2] 1 untuk menangguhkan eksekusi kode lebih lanjut hingga janji tersebut diselesaikan atau ditolak. Anda hanya dapat menggunakan await di dalam fungsi async

Sekarang, mari kita selesaikan bagian ini dengan sebuah contoh

// Example of If/Else statement if(condition) { 'True' } else { 'False' }: _0

Anda dapat mempelajari lebih lanjut tentang async dan menunggu dalam panduan mendalam ini

10. modul ES dan Impor/Ekspor

Modul diperkenalkan dalam JavaScript di ES6. Setiap file adalah modulnya sendiri. Anda dapat menjalankan objek, variabel, array, fungsi, dan sebagainya dari satu file dan menggunakannya di file lain. Ini disebut sebagai mengimpor dan mengekspor modul

Di React, kami menggunakan modul ES6 untuk membuat file terpisah untuk komponen. Setiap komponen diekspor keluar dari modulnya dan diimpor ke file yang akan dirender. Mari kita pelajari ini dengan sebuah contoh

// Example of If/Else statement if(condition) { 'True' } else { 'False' }: 1// Example of If/Else statement if(condition) { 'True' } else { 'False' }: 2

Di React, Anda harus merender setiap komponen yang Anda deklarasikan di Aplikasi. komponen js

Dalam contoh di atas, kami membuat komponen bernama Komponen dan mengekspornya dengan kode kami // With Destructuring const objects = ['table', 'iPhone', 'apple'] const [furniture, mobile, fruit] = objects // Without Destructuring const furniture = objects[0] const mobile = objects[1] const fruit = objects[2] 2. Selanjutnya, kita pergi ke Aplikasi. js dan impor Komponen dengan kode berikut. // With Destructuring const objects = ['table', 'iPhone', 'apple'] const [furniture, mobile, fruit] = objects // Without Destructuring const furniture = objects[0] const mobile = objects[1] const fruit = objects[2] _3

Kesimpulan

Anda telah mencapai akhir artikel. Sejauh ini kita telah membahas dasar-dasar JavaScript termasuk Ternary Operator, Destructuring, Spread Operator, Array methods, Arrow functions, Promises, Fetch API, Async/Await, dan ES6 Modules dan Import/Export

Saya harap Anda telah belajar banyak dari artikel ini dan memahami beberapa konsep penting JavaScript dan mengapa Anda perlu mempelajarinya secara menyeluruh sebelum terjun ke React

Artikel ini bukanlah alternatif untuk mempelajari sendiri konsep-konsep ini secara menyeluruh. Saya hanya memberikan pengantar umum kepada mereka dan mengapa itu penting. Sekarang terserah Anda bagaimana Anda mempelajari hal-hal ini dan membangun pengetahuan Anda dari sini. Semoga sukses dengan perjalanannya

Anda dapat menggunakan sumber daya di seluruh artikel untuk mempelajari lebih dalam konsep-konsep penting ini

Lihat blog saya untuk membaca lebih banyak konten berkualitas seperti ini. Hubungi saya di Twitter jika Anda memiliki pertanyaan untuk ditanyakan atau ingin mengatakan 'hai'

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

Ashutosh Mishra

Baca lebih banyak posting

Jika artikel ini bermanfaat, tweetlah

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Berapa banyak topik dalam JavaScript?

Apa topik tersulit dalam JavaScript?

Apa itu silabus JavaScript?

Apa dasar-dasar dalam JavaScript?