JSX Dan Komponen

Sintaksis ini di kenal dengan sebutan JSX, dan sintaksis ini adalah sebuah sintaksis ekstensi untuk JavaScript. Kami sarankan menggunakannya dengan React untuk mendeskripsikan bagimana antarmuka pengguna seharusnya terlihat. JSX mungkin akan mengingatkan Anda dengan sebuah bahasa templat, bedanya adalah JSX telah dilengkapi dengan kekuatan penuh dari JavaScript.

JSX akan menghasilkan “elemen” React. Kita akan mulai mengeksplor bagaimana me-render mereka ke dalam DOM di bagian berikutnya. Di bawah ini, Anda akan menemukan dasar-dasar JSX yang Anda butuhkan untuk memulai.

Mengapa JSX?

React mengakui bahwa logika rendering akan secara inheren digabungkan dengan logika antarmuka pengguna lainnya. bagaimana events akan ditangani, bagaimana state berubah seiring dengan waktu, dan bagaimana data disiapkan untuk di tampilkan.

Alih-alih memisahkan technologies secara artifisial dengan meletakkan markup dan logika di file terpisah, React memisahkan kepentingan (separates concerns) dengan unit kopling rendah bernama “komponen” yang mengandung keduanya. Kita akan kembali ke komponen dalam bagian selanjutnya, tetapi jika Anda merasa belum nyaman menempatkan markup di JavaScript, video ini mungkin akan meyakinkan Anda.

React tidak mengharuskan Anda untuk menggunakan JSX, namun kebanyakan orang merasa terbantu dengan adanya JSX sebagai bantuan visual saat mengerjakan antarmuka pengguna di dalam kode JavaScript. Menggunakan JSX juga memungkinkan React untuk menampilkan pesan kesalahan (error) dan peringatan (warning) yang lebih bermanfaat.

Mengenal JSX

Sintaksis dibawah bukanlah sebuah String maupun elemen HTML. Sintaksis ini disebut dengan JSX. JSX digunakan dengan ReactJS untuk mendeskripsikan bagaimana antarmuka pengguna seharusnya terlihat.

Mengenal JSX

1. JSX > Java Script XML
2. JSX merupakan sebuah sintaksis ekstensi untuk JavaScript
3. JSX memungkinkan kita untuk menulis elemen HTML pada JavaScript dan meletakkannya pada DOM

Mengapa JSX?

JSX tidak wajib digunakan, namun dengan JSX dapat mempermudah dalam pengembangan aplikasi ReactJS.

1. Menggabungkan markup dengan logika dalam satu bagian yang disebut Component
2. Memungkinkan React untuk menampilkan pesan error dan warning pada saat kompilasi
3. Performanya lebih cepat karena terdapat optimasi saat mengkompilasi ke JavaScript

Mengenal JSX

1. Sintaksis dibawah bukanlah sebuah String maupun elemen HTML.
2. Kedua sintaksis ini akan menghasilkan hal yang sama.
3. Babel akan meng-compile JSX menjadi pemanggilan fungsi React.createElement()

Ekspresi di JSX

Dalam contoh berikut, kita mendeklarasikan variable bernama “name” dan menggunakannya di dalam JSX dengan cara membungkusnya dengan tanda kurung kurawal (curly braces). Semua ekspresi JavaScript yang valid dapat disematkan di dalam tanda kurung kurawal di JSX

Atribut di JSX

Atribut pada JSX menggunakan format camelCase. Penentuan nilai dari atribut dapat menggunakan String dengan tanda kutip

Ataupun menggunakan ekspresi dengan tanda kurung kurawal

Elemen Child di JSX

Bila elemen JSX memiliki anak (child), dapat didefinisikan sebagai berikut.

Bila elemen tidak memiliki child, maka elemen tersebut dapat ditutup langsung dengan tanda “/>”.

Mencegah Serangan Injeksi

1. Secara default, React DOM meng-escape nilai apapun yang ditaruh di dalam JSX sebelum me-render mereka.
2. Oleh karena itu dapat dipastikan Anda tidak akan pernah menginjeksi apapun yang tidak ditulis di aplikasi Anda secara eksplisit.
3. Semuanya akan diubah menjadi string sebelum di-render.
4. Ini membantu mencegah ada nya serangan XSS (skrip-lintas-situs).

Components di React

1. Secara konsep, components mirip dengan fungsi pada JavaScript
2. Components dapat menerima sebuah masukan (disebut “props”) dan mengembalikan elemen React yang mendeskripsikan apa yang akan tampil di layar
3. Components are independent and reusable

Components di React

Components terdiri dari 2 tipe yaitu:

1. Class components
2. Function components

Function Components

Cara paling sederhana untuk membuat komponen adalah dengan fungsi JavaScript. Fungsi ini merupakan komponen React karena menerima sebuah masukan argument berupa “props” dan mengembalikan sebuah elemen React sehingga disebut Function Component.

Class Components

Cara lain untuk membuat komponen adalah dengan menggunakan Class ES6. Class ini juga merupakan komponen React yang valid karena menerima sebuah masukan argumen berupa “props” dan mengembalikan sebuah elemen React.

Class Components

1. Untuk mendefinisikan sebuah class component React, perlu meng-extend React.Component
2. Komponen yang didefinisikan dengan kelas, menyediakan lebih banyak fitur
3. Sebuah sub-kelas React.Component harus memilki metode render()
4. Metode lainnya bersifat opsional

Components di React

PENTING!!!

1. Elemen yang merupakan tag dari DOM (HTML) harus menggunakan awalan huruf kecil (lowercase)
2. Sedangkan komponen, baik class maupun function, harus menggunakan awalan huruf besar (uppercase)

Properti

1. Props atau properti merupakan masukan/argumen untuk sebuah komponen (baik function component maupun class component.
2. Props dapat digunakan untuk memberikan data yang dinamis untuk digunakan oleh komponen

Contoh penggunaan properti

Kesimpulan

JSX digunakan untuk mempermudah pengembangan React karena menggabungkan logika rendering dengan logika lainnya. Components yang digunakan untuk membangun tampilan bersifat independent dan reusable

Sumber Referensi : reactjs.org | create-react-app.dev | tutorialspoint | w3schools