Pengantar React, bagian 1

Kami telah berbicara di blog ini tentang tumpukan pengembangan baru WordPress dan revolusi yang menyertainya, baik untuk platform itu sendiri maupun untuk pengembang yang sekarang dipaksa untuk mempelajari hal-hal baru. Belum lama ini, misalnya, saya menerbitkan posting yang menjelaskan cara menggunakan paket @wordpress/scripts untuk memperluas Gutenberg dan menambahkan tombol ke UI-nya. Sebagai seorang penulis, saya suka menulis tutorial karena saya dapat membagikan sesuatu yang saya ketahui dengan baik dan saya merasa seperti kita dapat belajar bersama.

Sayangnya, saya pikir tutorial menyembunyikan masalah besar: banyak dari Anda mengikutinya secara membabi buta tanpa benar-benar memahami apa yang terjadi, bahkan jika Anda mendapatkan hasil yang benar pada akhirnya. Tetapi sebagian besar tutorial tidak memiliki "momen aha", momen wawasan dan pemahaman di mana segala sesuatunya klik di kepala Anda dan Anda mengerti mengapa segala sesuatunya seperti itu.

Jadi hari ini saya ingin memulai serangkaian posting dengan pengenalan React untuk menjelaskan sedikit. Saya ingin mengungkap React dan membantu Anda menjadi lebih baik dengan cepat. Saya ingin Anda memahami mengapa React seperti itu dan mengapa segala sesuatunya seperti itu. Saya ingin Anda memahami prinsip-prinsip di balik React. Saya ingin Anda menulis kode yang lebih baik.

Pemrograman Fungsional

Sebelum berbicara tentang React, saya pikir ada baiknya menghabiskan beberapa menit berbicara tentang pemrograman fungsional , karena banyak kerangka kerja yang kita gunakan saat ini bergantung pada prinsip-prinsipnya. Dan React (bersama dengan Redux) tidak terkecuali.

Pemrograman fungsional adalah paradigma pemrograman di mana program dibangun dengan menerapkan dan menyusun fungsi. Anda mungkin berpikir bahwa, "pemrograman" selalu tentang membangun dan menjalankan fungsi, bukan? Tidak tepat. Bersabarlah dengan saya.

Pertimbangkan, misalnya, pemrograman berorientasi objek. Dalam OOP, program dibangun dengan membuat dan menyusun objek, yang dapat berisi data, dalam bentuk atribut atau bidang, dan kode, dalam bentuk metode atau prosedur. Melihat? Bukan fungsi, tapi objek.

Jadi apa yang membuat pemrograman fungsional istimewa? Nah, ada beberapa aspek yang menjadi ciri pemrograman fungsional: fungsi murni, transparansi referensial, kekekalan, fungsi sebagai warga negara tingkat pertama, fungsi tingkat tinggi, dll, dan saya sarankan Anda mempelajarinya sendiri (atau, jika Anda ingin saya untuk, kita dapat membicarakannya di posting mendatang). Namun, untuk mempersingkat postingan ini, hari ini kami hanya akan fokus pada satu fitur…

Fungsi Murni

Salah satu hal yang membuat pemrograman fungsional berbeda dari paradigma pemrograman lainnya adalah bagaimana ia mendefinisikan dan bekerja dengan fungsi. Dalam FP, fungsi adalah murni, yang berarti memenuhi dua kondisi berikut:

1. Itu selalu menghasilkan hasil yang sama ketika diberikan argumen yang sama
2. Tidak memiliki efek samping

Misalnya, ini bukan fungsi murni:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

karena memiliki beberapa efek samping. Yaitu, memodifikasi variabel global (efek samping 1) dan mengeluarkan beberapa teks ke konsol (efek samping 2).

Fungsi tidak murni lainnya adalah sebagai berikut:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

karena, seperti yang Anda lihat, tidak selalu menghasilkan hasil yang sama. Setiap kali memanggil createElement dengan nama tertentu, hasil yang didapat berbeda-beda. Lagi pula, atribut id dihasilkan melalui Math.random …

Fungsi murni sangat bagus karena berbagai alasan: mudah dimengerti dan tidak mengandung kejutan. Anda memberi mereka beberapa input, mereka akan mengembalikan Anda output tertentu. Dan ini bagus, karena cara mendefinisikan fungsi ini membawa mereka lebih dekat ke pemahaman matematis kita tentang apa itu fungsi: ia memetakan setiap input ke output yang terdefinisi dengan baik.

Komponen dalam React

Apa fungsi murni dan pemrograman fungsional yang harus dilakukan? Nah, mari kita lihat apakah kita dapat memperoleh hubungan mereka…

Seperti yang dapat Anda baca di dokumentasinya, React adalah pustaka JavaScript untuk membuat antarmuka pengguna melalui potongan kecil kode yang disebut "Komponen." Ini adalah komponen pertama yang akan Anda lihat di tutorial mereka:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Cukup sederhana dan bahkan cukup jelas, bukan?

Tapi tunggu sebentar! Ini sama sekali tidak terlihat seperti "fungsi murni". Sebenarnya, ini adalah kelas yang diimplementasikan menggunakan pemrograman berorientasi objek.

Yup, Anda benar sekali. Ini tidak terlihat bagus… apakah kita hanya membuang waktu berbicara tentang pemrograman fungsional?

Lihat kembali komponen sebelumnya. Seperti apa bentuknya? Apa fungsinya? Nah, ini adalah kelas dengan satu metode ( render ) yang menghasilkan beberapa HTML untuk merender daftar belanja. Daftar belanja ini selalu sama (ya, ini adalah contoh sederhana), tetapi memiliki satu bagian variabel: judulnya, di mana kelas tampaknya menggunakan properti internal this.props.name .

Jadi, jika kita belum tahu apa-apa tentang React dan kita hanya melihat kodenya dan mencoba menyimpulkan apa fungsinya, kita akan melihat yang berikut:

1. Komponen dapat menerima "nama". Kami tidak tahu persis bagaimana ia mendapatkan nama ini, tetapi kami tahu itu. Bagaimanapun, this.props.name adalah petunjuk yang cukup bagus.
2. Metode render menghasilkan beberapa HTML untuk merender daftar (statis) "elemen belanja": Instagram , WhatsApp , dan Oculus .
3. HTML yang dihasilkan tidak 100% statis; ia menggunakan "nama" yang dapat bervariasi berdasarkan nilai properti.

Lihat kemana aku pergi?

Fungsi Komponen di React

Kami baru saja menjelaskan fungsi murni! Kami memiliki komponen yang mengambil nilai ( name ) dan menghasilkan output yang terdefinisi dengan baik (HTML). Apakah ini berarti kita dapat menjauh dari OOP dan mengimplementasikan komponen sebelumnya sebagai suatu fungsi?

Tentu! Kelas yang terlalu rumit yang baru saja kita lihat dapat ditulis ulang sebagai fungsi murni yang lebih sederhana dan lebih mudah dipahami yang menerima props dan mengembalikan HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Ini adalah hal yang sama persis yang kami miliki, tetapi jauh lebih sederhana. Saya bahkan berani mengatakan itu adalah hal paling sederhana yang dapat saya terapkan sebagai seorang programmer: komponen React tidak lebih dari sebuah fungsi yang memasukkan beberapa props dan menghasilkan HTML out .

Dan inilah pelajaran pertama yang harus Anda pelajari: komponen React Anda adalah fungsi murni : props in, HTML out. Komponen tidak boleh menjalankan fungsi asinkron untuk mengambil data (karena itu adalah efek samping). Sebuah komponen tidak dapat mengubah properti yang diterimanya (kekekalan).

Jadi, sekali lagi: komponen hanya mengambil beberapa alat peraga dan menghasilkan output HTML. Periode.

Tapi tunggu, jika komponennya sesederhana itu , bagaimana kita bisa melakukan sesuatu yang berguna dengannya? Baiklah, pantau terus, karena kita akan membicarakannya di postingan selanjutnya!

Gambar unggulan oleh Josiah Weiss di Unsplash.