Glossary of React Terms

Aplikasi Single-page

Aplikasi Single-page adalah jenis aplikasi web yang memuat sebuah halaman HTML dan seluruh aset yang diperlukannya (seperti Javascript dan CSS) untuk dapat berjalan. Seluruh interaksi yang terjadi pada halaman yang telah dimuat maupun halaman lainnya yang berhubungan, tidak memerlukan tambahan pengambilan data ke server, yang berarti halaman tidak perlu dimuat ulang.

Aplikasi Single-page tidak harus dibangun menggunakan React. React dapat digunakan untuk meningkatkan bagian-bagian tertentu dari halaman yang telah ada untuk meningkatkan interaktivitas halaman tersebut. Kode yang ditulis dalam React dapat berjalan dengan aman dengan jenis lainnnya yang di render pada server, seperti PHP, atau library lain yang ada di sisi client. Faktanya, dengan cara inilah Facebook menggunakan React.

ES6, ES2015, ES2016, dsb

Semua akronim diatas merujuk pada versi terbaru dari standar Spesifikasi bahasa ECMAScript, yang merupakan implementasi dari bahasa JavaScript Versi ES6 (dikenal juga sebagai ES2015), yang mencakup tambahan dari versi sebelumnya seperti : Arrow Function, kelas, template literals, deklarasi variabel dengan let dan const. Anda dapat mempelajarinya lebih dalam tiap versinya melalui tautan ini

Kompiler

Sebuah kompiler JavaScript menerima kode JavaScript, mengubahnya, dan mengembalikannya kedalam format yang berbeda. Kasus paling umum penggunaan compiler adalah saat sintaksis ES6 diubah untuk dapat dimengerti oleh peramban tipe lama. Babel adalah salah satu jenis kompiler yang sering digunakan dengan React.

Bundler

Bundler menggunakan kode JavaScript dan CSS yang ditulis di modul terpisah, dan menggabungkannya menjadi beberapa file yang lebih optimal untuk dijalankan oleh browser. Bundler yang sering digunakan React meliputi Webpack dan Browserify

Package Manager

Package manager adalah alat yang digunakan untuk mengatur dan mengelola dependensi pada proyek Anda. npm dan Yarn adalah package manager yang paling sering digunakan pada aplikasi React dimana keduanya adalah klien yang memiliki registri paket npm yang sama.

CDN

CDN adalah singkatan dari Content Delivery Network. CDN menyediakan konten yang statis dan di-cache dari jaringan server di seluruh dunia.

JSX

JSX adalah sintaksis ekstensi untuk JavaScript. JSX mirip dengan bahasa template, namun memiliki kekuatan penuh atas bahasa JavaScript. JSX akan dikompilasi ke pemanggilan React.createElement() yang mengembalikan objek JavaScript biasa bernama “React elements”. Untuk mendapatkan penjelasan dasar mengenai mengenai JSX dapat melihat dokumentasi JSX, atau mengenai JSX dengan lebih mendalam di sini

Alih-alih menggunakan nama atribut HTML, React DOM menggunakan konvensi penamaan camelCase untuk penamaan atributnya. Sebagai contoh, tabindex menjadi tabIndex di JSX. Atribut class juga ditulis sebagai className karena class adalah nama yang telah dipesan dalam JavaScript.

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">Nama saya {name}!</h1>,
  document.getElementById('root')
);

Elemen

Elemen React adalah bagian pembangun aplikasi React. Beberapa orang bisa jadi salah mengartikan elemen sebagai istilah ‘komponen’ yang lebih dikenal luas. Sebuah elemen menjelaskan apa yang ingin Anda tampilkan di layar. Elemen React tidak dapat diubah (immutable).

const element = <h1>Hai, dunia</h1>;

Secara khusus, elemen tidak digunakan secara langsung, melainkan dikembalikan melalui komponen.

Komponen

Komponen React adalah bagian atau potongan kecil dari kode yang dapat digunakan kembali, yang mengembalikan elemen React untuk di-render ke halaman. Versi paling sederhana dari komponen React adalah fungsi JavaScript yang mengembalikan elemen React :

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Komponen juga dapat menggunakan kelas dengan format penulisan ES6:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Komponen dapat dipecah menjadi beberapa bagian fungsi berbeda yang dapat digunakan dengan komponen lainnya. Komponen dapat mengembalikan senarai, string, angka, maupun mengembalikan komponen lainnya. Aturan dasar yang praktis yaitu, jika ada bagian dari antarmuka Anda yang digunakan beberapa kali (Tombol, Panel, Avatar), atau cukup kompleks untuk berdiri dengan sendirinya (App, FeedStory, Komentar), komponen-komponen tersebut adalah kandidat yang cocok untuk dijadikan komponen yang dapat digunakan kembali (reusable component). Nama komponen juga harus selalu diawali dengan huruf kapital (<Wrapper/> bukan <wrapper/>). Lihat dokumentasi untuk penjelasan mengenai cara melakukan render komponen.

`props`

props adalah masukan dari komponen React. props adalah data yang dioper dari parent component ke child component-nya.

Perlu diingat bahwa props bersifat readonly, sehingga nilainya tidak dapat diubah melalui cara apapun:

// Wrong!
props.number = 42;

Jika Anda perlu memodifikasi nilai sebagai respon dari masukan penguna, gunakan state.

`props.children`

props.children tersedia di setiap komponen. Ia berisi konten yang terletak diantara tag pembuka dan penutup dari sebuah komponen. Sebagai contoh:

<Welcome>Hai dunia!</Welcome>

Teks Hai dunia! dapat diakses sebagai props.children di komponen Welcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Untuk komponen yang menggunakan kelas, gunakan this.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

`state`

Sebuah komponen membutuhkan state saat sebuah data yang berhubungan dengannya berubah sewaktu-waktu. Sebagai contoh, sebuah komponen Checkbox dapat membutuhkan state isChecked, dan sebuah komponen NewsFeed bisa jadi selalu membutuhkan state fetchedPost terbaru.

Perbedaan paling penting diantara state dan props adalah props dioper melalui parent component, sedangkan state diatur oleh komponen itu sendiri. Sebuah komponen tidak dapat mengubah props, tetapi dapat mengubah state. Untuk melakukannya, komponen tersebut harus memanggil fungsi this.setState(). Hanya komponen yang didefinisikan sebagai kelas yang dapat memiliki state.

Untuk setiap bagian data yang berubah, harus terdapat satu komponen yang ‘memiliki’ data tersebut sebagai state di dalamnya. Jangan mencoba untuk melakukan sinkronisasi state pada dua komponen yang berbeda. Sebaliknya, angkat nilainya ke atas, kemudian oper sebagai props untuk kedua komponen tersebut.

Lifecycle Methods

Lifecycle Methods adalah fungsionalitas khusus yang dijalankan selama fase tertentu dalam sebuah komponen. Terdapat beberapa metode yang tersedia saat komponen dibuat dan dimasukkan kedalam DOM (mounting), saat komponen diperbarui, dan saat komponen dilepas atau dihapus dari DOM.

Controlled vs. Uncontrolled Components

React memiliki dua pendekatan berbeda untuk mengatur inputan form.

Sebuah elemen masukan formulir yang nilainya diatur oleh React disebut sebagai _controlled component. Saat seorang pengguna memasukkan data kedalam controlled component, sebuah event handler terpicu, dan kode Anda yang selanjutnya menentukan apakah masukan valid atau tidak (dengan cara merender ulang dengan nilai yang telah diperbarui). Jika Anda tidak merender ulang, maka nilai formulir tidak akan berubah.

Sebuah uncontrolled component bekerja seperti hal yang dilakukan elemen formulir diluar React. Disaat pengguna memasukkan data kedalam formulir (melalui kotak input, dropdown, dll) nilai yang telah diperbarui akan digunakan tanpa React perlu melakukan apapun. Namun, hal ini berarti Anda tidak dapat memaksa sebuah bidang masukan unntuk memiliki nilai tertentu.

Dalam banyak kasus, Anda harus menggunakan controlled components.

Keys

Sebuah ”key” adalah atribut string spesial yang perlu disertakan saat membuat kumpulan elemen dalam bentuk senarai. Key membantu React untuk mengidentifikasi bagian mana yang telah diubah, ditambah, atau dihilangkan. Keys harus diberikan pada elemen dalam sebuah senarai untuk memberikan identitas yang stabil pada elemen tersebut.

Keys hanya perlu bersifat unik dengan elemen lainnya dalam senarai yag sama. Keys tidak perlu bersifat unik di seluruh aplikasi atau bahkan di dalam komponen yang sama.

Jangan mengoper nilai Math.random() sebagai key. Penting untuk diingat bahwa key harus memiliki “identitas yang stabil” walau melalui di-render ulang, sehingga React dapat menentukan kapan sebuah item ditambah, dihapus, atau diurutkan. Secara ideal, key harus tersusun dari data Anda yang bersifat unik dan stabil, seperti post.id.

Refs

React mendukung atribut spesial yang dapat dilampirkan di komponen apapun. Atribut ref dapat terdiri dari sebuah objek yang dibuat oleh React.createRef() function atau oleh sebuah callback function, atau string (di API legacy). Disaat ref adalah sebuah callback function, fungsi tersebut dapat menerima argumen berupa elemen DOM atau sebuah kelas (bergantung pada tipe elemen). Hal ini dapat memberikan Anda akses langsung pada elemen DOM atau komponen yang berhubungan.

Gunakan refs-and dengan bijak. Jika anda merasa sering menggunakan refs untuk “melakukan suatu hal”, pertimbangkan untuk lebih familier dengan aliran data top-down.

Event

Menangani event dengan Elemen React memiliki perbedaan secara sintaksis:

Event handler pada React ditulis menggunakan camelCase, bukan sebagai huruf kecil.
Dengan JSX, Anda mengoper sebuah fungsi sebagai event handler, bukan sebagai string.

Rekonsiliasi

Disaat sebuah props atau state dari sebuah komponen mengalami perubahan, React dapat memutuskan apakah hal tersebut memerlukan pembaruan DOM, dengan cara membandingkan elemen komponen yang dikembalikan dengan komponen yang telah di-render sebelumnya. Jika keduanya berbeda, React akan memperbarui DOM. Proses ini disebut dengan istilah “rekonsiliasi”.

Is this page useful?Edit halaman ini