1. Cerita 1 ?
Mari kita mulai dengan potongan kode yang sangat mendasar:
function App() { kembali ‹h1›Halo!‹/h1›
Di sini ‹h1›Halo!‹/h1› dianggap sebagai JSX dan telah dikembalikan dari fungsi Aplikasi.
Oleh karena itu, secara sederhana JSX adalah apa yang kita tulis di komponen untuk memberi tahu React apa yang ingin kita tampilkan di layar.
Menurut React Docs, JSX hanya menyediakan gula sintaksis ke fungsi `React.createElement()`.
*Catatan: JSX sebenarnya tidak dieksekusi di dalam browser karena ini bukan Javascript yang valid dan browser tidak tahu apa sebenarnya 217 itu.
2. Cerita 2 ?
`‹h1›Halo!‹/h1›`
Menulis ini di dalam fungsi `Aplikasi` tidak masuk akal bagi browser dan oleh karena itu tidak ada yang muncul di browser secara otomatis. Ini malah membuat instruksi untuk React, mengujinya untuk membuat sebuah elemen. Kita harus mengembalikannya dari komponen agar React dapat benar-benar menggunakannya.
Untuk menampilkan konten menggunakan 519, kami menggunakan `{}`
3. Cerita 3 ?
Mari kita ambil contoh cuplikan kode sebelumnya.
`fungsi Aplikasi() { kembali ‹h1›Halo‹/h1› }`
Di sini, kami telah mengkodekan nilai pengembalian menjadi `Halo`, tetapi dapatkah BEJ berbuat lebih banyak? Bagaimana jika saya ingin melakukan perhitungan matematis, menyimpannya dalam variabel Javascript dan kemudian mengembalikannya ke layar?
Hal ini dapat dilakukan dengan menggunakan JSX. Mari kita lihat bagaimana kita mengembalikan variabel di BEJ.
Mari pertimbangkan cuplikan kode lainnya
`const pesan = 'Bagaimana kabarmu 506'? ‘`
Sekarang karena ini disimpan dalam variabel `message`, kita bisa melakukan komputasi dan mengubah nilainya, oleh karena itu untuk mengembalikannya sebagai JSX, kita cukup menampilkannya menggunakan `{}`.
`fungsi Aplikasi() { kembalikan ‹h1›{pesan}‹/h1› }`
Ini akan mengembalikan nilai pesan variabel di layar.
*Catatan: Kita dapat mencetak variabel javascript jenis apa pun, baik itu string, angka, array, boolean, tetapi kita tidak dapat mencetak objek di dalam JSX
JSX sebagian besar digunakan untuk menampilkan string dan angka di layar karena perilakunya agak berbeda untuk array dan boolean*
4. Mengonversi HTML ke JSX
Ada beberapa aturan untuk mengkonversi HTML ke JSX. Memahami hal ini akan banyak membantu kita dalam menulis JSX dengan lebih mudah dan cepat.
Semua nama properti mengikuti camelCase.
HTML : `‹masukan panjang maksimal=’4'/›`
JSX : `‹masukan maxLength=’4' /›`
2. Atribut angka menggunakan kurung kurawal.
`‹masukkan panjang maks={4} /›`
3. Boolean true dapat ditulis hanya dengan nama properti. false harus ditulis dengan kurung kurawal.
- `‹input dinonaktifkan readOnly={false}/›`
4. Atribut `class` ditulis sebagai `className`
HTML : `‹kelas masukan=’teks’/›`
JSX: `‹masukan className=’teks’ /›`
5. Gaya sebaris disediakan sebagai objek.
`‹gaya masukan={{warna latar:merah}} /›`
Jika Anda menyukai kontennya, Anda dapat membuka repo github tempat saya terus memperbarui pembelajaran, teori & kode saya. Berikan bintang jika Anda menyukainya: https://github.com/uankit/Modern-React-With-Redux-Course
Hubungi saya di LinkedIn untuk berkolaborasi
