Interaksi JSX dengan Komponen

# cara mapping array ke komponen JSX untuk Pemula React

Mengetahui **cara mapping array ke komponen JSX** adalah keahlian dasar. Pengembang React wajib menguasai teknik ini dengan benar. Aplikasi web modern selalu berurusan dengan data dinamis. Data tersebut biasanya datang dalam bentuk array. Kita harus menampilkannya secara efisien ke layar. 

React menawarkan cara elegan untuk menangani hal ini. Kita tidak menggunakan perulangan `for` tradisional yang membosankan. Kita menggunakan fungsi tingkat tinggi dari JavaScript. Artikel ini akan membahasnya secara mendalam dan tuntas. Anda akan belajar cara mengubah data menjadi antarmuka. Mari kita mulai perjalanan belajar kita sekarang.

## 1. Memahami Dasar Render List di React JS

Menampilkan daftar item adalah tugas umum setiap aplikasi. React mempermudah proses ini dengan pendekatan deklaratif. Anda cukup mendefinisikan bagaimana satu item terlihat. React akan mengurus sisanya untuk seluruh data.

### Mengenal JavaScript XML (JSX) dalam Proses Rendering

React menggunakan sintaks yang sangat unik dan kuat. Sintaks ini disebut dengan **JavaScript XML**. Ia memungkinkan kita menulis tag HTML di JavaScript. Struktur ini membuat kode lebih mudah dibaca manusia. Namun, browser tidak bisa langsung mengerti sintaks ini. 

Di sinilah peran penting dari **Babel Transpiler**. Alat ini bertugas mengubah kode JSX menjadi JavaScript. Hasilnya adalah rentetan fungsi `React.createElement`. Fungsi ini nantinya akan dijalankan oleh mesin JavaScript. Memahami alur ini membantu kita menulis kode bersih. Kode Anda menjadi lebih terstruktur dan juga profesional.

### Konsep Declarative UI dalam Mengelola Array

React mengusung konsep antarmuka pengguna yang deklaratif. Kita hanya perlu mendeskripsikan kondisi akhir antarmuka. Anda tidak perlu memanipulasi elemen DOM secara manual. Jika data array berubah, React akan bereaksi otomatis. 

Sistem ini sangat berbeda dengan manipulasi DOM tradisional. Cara ini jauh lebih aman dan minim bug. Pengembang bisa lebih fokus pada logika bisnis inti. Anda tidak perlu pusing memikirkan cara update elemen. [Panduan JavaScript Modern](/javascript-modern) menjelaskan dasar-dasar logika yang diperlukan di sini.

## 2. Langkah Praktis Cara Mapping Array ke Komponen JSX

Langkah utama dalam proses ini adalah fungsi `.map()`. Fungsi ini merupakan metode bawaan dari array JavaScript. Ia akan mengiterasi setiap elemen dalam sebuah daftar. Kemudian, ia mengembalikan elemen baru untuk setiap iterasi.

### Transformasi Data Menjadi React Elements

Saat melakukan mapping, kita mengubah data mentah. Data string atau objek berubah menjadi **React Elements**. Objek JavaScript ini merepresentasikan apa yang tampil. Contohnya, Anda punya array berisi nama-nama produk. 

Anda memetakan array tersebut ke dalam tag `<li>`. Setiap nama produk kini dibungkus elemen daftar HTML. Hasil dari fungsi `.map()` adalah array elemen JSX. React sangat cerdas dalam menangani array elemen ini. Ia akan merendernya satu per satu secara otomatis. Hasilnya adalah daftar visual yang rapi dan menarik.

### Integrasi dalam Functional Components

Hampir semua aplikasi modern kini menggunakan **Functional Components**. Komponen ini jauh lebih sederhana daripada komponen kelas. Anda bisa menempatkan logika mapping tepat sebelum return. Hal ini menjaga fungsi utama tetap bersih dan rapi. 

Buatlah variabel baru untuk menampung hasil pemetaan tersebut. Kemudian, panggil variabel itu di dalam blok return. Cara ini memudahkan proses debugging di masa depan. Anda juga bisa langsung melakukan mapping di dalam JSX. Gunakan kurung kurawal untuk menulis ekspresi JavaScript tersebut. Jangan lupa untuk selalu menjaga keterbacaan kode Anda.

## 3. Mengapa Atribut Key Sangat Penting Saat Iterasi Array?

Kesalahan paling umum pemula adalah melupakan atribut `key`. React akan memberikan peringatan jika Anda melewatkannya. Atribut ini bukan sekadar identitas tambahan bagi elemen. Ia memiliki fungsi vital dalam performa aplikasi React.

### Peran Virtual DOM dan Proses Reconciliation

React menggunakan teknologi canggih bernama **Virtual DOM**. Ini adalah salinan ringan dari DOM yang asli. Saat data berubah, React membuat Virtual DOM baru. Kemudian, ia membandingkan salinan baru dengan yang lama. Proses perbandingan cerdas ini disebut sebagai **Reconciliation**. 

Atribut `key` membantu React mengenali item yang berubah. Tanpa key, React mungkin merender ulang seluruh daftar. Hal ini tentu akan memboroskan sumber daya perangkat. Dengan key, React hanya mengubah item yang berubah saja. Pelajari lebih lanjut tentang ini di [Dokumentasi Resmi React](https://react.dev). Performa aplikasi Anda akan tetap stabil dan cepat.

## 4. Implementasi Mapping dengan Component Composition

Mapping tidak harus selalu menghasilkan tag HTML dasar. Anda bisa memetakan array ke komponen buatan sendiri. Teknik ini sangat direkomendasikan untuk aplikasi skala besar. Kode Anda akan menjadi sangat modular dan teratur.

### Mengirim Data melalui Props Drilling yang Efisien

Saat memetakan data, kita sering mengirimkan informasi tambahan. Kita mengirim data tersebut dari induk ke anak. Proses pengiriman data ini dikenal sebagai props drilling. Anda harus memastikan pengiriman data tetap efisien dan jelas. 

Pastikan setiap komponen anak menerima data yang relevan saja. Jangan mengirim seluruh objek jika tidak benar-benar butuh. Hal ini membantu mengurangi beban memori pada aplikasi. Komponen yang ramping akan lebih mudah untuk dikelola. [Belajar React Hooks](/react-hooks-dasar) akan membantu Anda mengelola data tersebut. Struktur data yang baik adalah kunci kesuksesan proyek.

### Optimasi dengan React Hooks dan State Management

Terkadang data array didapat dari sebuah server API. Kita perlu menyimpannya di dalam state lokal komponen. Gunakan `useState` untuk menyimpan daftar data tersebut secara aman. Gunakan `useEffect` untuk mengambil data saat komponen muncul. 

Mapping akan berjalan secara otomatis saat state tersebut diperbarui. UI akan langsung mencerminkan data terbaru dari server. Pengguna akan merasakan pengalaman aplikasi yang sangat responsif. Anda juga bisa menggunakan pustaka pihak ketiga lainnya. Redux atau Context API bisa menjadi pilihan yang tepat. Gunakan alat yang sesuai dengan kebutuhan skala proyek.

## 5. Praktik Terbaik dalam Perulangan Komponen React

Ada beberapa aturan tidak tertulis dalam melakukan mapping. Aturan ini akan menjaga kualitas kode produksi Anda tetap baik. Pastikan Anda mengikuti standar industri yang berlaku secara umum.

### Mengelola Unidirectional Data Flow

React sangat bergantung pada aliran data satu arah. Data mengalir dari komponen atas ke komponen bawah. Jangan pernah mencoba mengubah data array di dalam mapping. Lakukan perubahan data hanya melalui fungsi pengubah state resmi. 

Ini akan mencegah perilaku aplikasi yang sulit diprediksi nantinya. Konsistensi data adalah prioritas utama dalam pengembangan aplikasi web. Gunakan event handler untuk menangani interaksi dari setiap item. Kirimkan fungsi handler tersebut sebagai props ke komponen anak. Hal ini menjaga logika tetap berada di satu tempat. [Struktur Folder React](/struktur-folder-react) yang baik mendukung pola desain ini.

### Menghindari Re-rendering yang Tidak Perlu

Performa adalah segalanya dalam dunia web yang kompetitif. Pemetaan ribuan data bisa memperlambat browser jika salah. Jangan gunakan index array sebagai nilai dari atribut `key`. Index bisa berubah jika posisi item dalam list bergeser. 

Gunakan ID unik dari database sebagai nilai key utama. Jika data statis, Anda bisa menggunakan string yang unik. Hal ini menjamin proses reconciliation berjalan dengan sangat optimal. React tidak akan melakukan pekerjaan ekstra yang sia-sia saja. Aplikasi Anda akan terasa sangat halus saat digunakan user. Selalu uji performa daftar Anda dengan alat developer browser.

### Kesimpulan

Menguasai **cara mapping array ke komponen JSX** adalah fondasi penting. Teknik ini memungkinkan pembuatan antarmuka yang sangat dinamis dan interaktif. Kita telah mempelajari peran penting Babel serta fungsi Virtual DOM. Jangan lupakan pentingnya atribut key yang unik untuk setiap item. 

Implementasi yang benar akan meningkatkan efisiensi dan pengalaman pengguna. Teruslah berlatih dengan berbagai jenis struktur data yang berbeda. Semakin sering mencoba, Anda akan semakin mahir dalam React. Buatlah proyek nyata untuk mengasah logika pemetaan data Anda. Selamat berkarya dan teruslah belajar teknologi web terbaru.

Materi ini cocok untuk pemula karna dalam react Komponen adalah blok bangunan utama. JSX digunakan untuk menulis dan menyusun komponen, serta untuk mengirim data dan event antar komponen.

JSX Memenugkinkan kita menyiapkan komponent di dalam komponent lain, mengirim data melalui props, menangani interaksi dan event

Struktur Dasar Komponen dan JSX

function SelamatDatang() {
  return <h1>Halo, Selamat Datang!</h1>;
}
function App() {
  return (
    <div>
      <SelamatDatang />
    </div>
  );
}

Kode di atas merupakan contoh sederhana React Functional Component, di mana:

• SelamatDatang() adalah komponen yang menampilkan teks "Halo, Selamat Datang!".
• App() adalah komponen utama yang memanggil komponen <SelamatDatang />.
• Sintaks <SelamatDatang /> digunakan untuk merender komponen SelamatDatang di dalam App.

Komponen SelamatDatang dipanggil di dalam JSX App seperti memanggil tag HTML.

Mengirim Data Ke Komponen Dengan props

1. Komponen Anak

Berikut Contoh Komponen Anak

function Profil(props) {

  return (

    <div>

      <h2>Nama: {props.nama}</h2>

      <p>Umur: {props.umur} tahun</p>

    </div>

  );

}

Komponen React di atas menerima props sebagai parameter, kemudian menampilkan:

• Nama menggunakan props.nama
• Umur menggunakan props.umur yang diikuti dengan teks "tahun"

Contoh penggunaannya:
function App() {
  return (
    <div>
      <Profil nama="Budi" umur={17} />
    </div>
  );
}

Nama: Budi

Umur: 17 tahun

2. Komponen Induk

Berikut Contoh Untuk Komponen Induk

function App() {

  return (

    <div>

      <Profil nama="Rusdan" umur={20} />

    </div>

  );

}

Kode di atas merupakan komponen App yang merender komponen Profil dengan mengirimkan dua buah props, yaitu:

• nama="Rusdan" → mengirimkan nilai nama Rusdan.
• umur={20} → mengirimkan nilai umur 20 (bertipe number karena menggunakan {}).

Jika dipasangkan dengan komponen Profil sebelumnya, hasil yang ditampilkan adalah:

Nama: Rusdan Umur: 20 tahun

Props adalah object yang berisi data yang dikirim dari komponen induk ke anak

Interaksi : Event Hendler di Komponen

Komponen dengan Button dan Event 

function TombolKlik() {

  const handleClick = () => {

    alert("Tombol ditekan!");

  };

  return <button onClick={handleClick}>Klik Saya</button>;

}

Kode di atas merupakan contoh event handling di React.

• handleClick adalah fungsi yang akan dijalankan saat tombol diklik.
• alert("Tombol ditekan!") akan menampilkan kotak dialog dengan pesan "Tombol ditekan!".
• onClick={handleClick} menghubungkan event klik pada tombol dengan fungsi handleClick.
• Teks "Klik Saya" adalah label yang ditampilkan pada tombol.

Di panggil di App

function App() {

  return (

    <div>

      <TombolKlik />

    </div>

  );

}

Kode di atas merupakan komponen utama (App) pada React yang merender sebuah komponen lain bernama TombolKlik. Komponen <TombolKlik /> nantinya akan ditampilkan di dalam elemen <div> saat aplikasi dijalankan.

JSX bisa menyisipkan funsi javascript seperti onClick ={handleClick} untuk menangani event.

Komponen Bersarang

JSX juga bisa menampilkan banyak komponen secara bersarang :

function Header() {

  return <h1>Ini Header</h1>;

}

function Konten() {

  return <p>Ini konten utama</p>;

}

function App() {

  return (

    <div>

      <Header />

      <Konten />

    </div>

  );

}

Kode di atas menunjukkan contoh penggunaan beberapa komponen (multiple components) pada React.

• Header() adalah komponen yang menampilkan judul "Ini Header".
• Konten() adalah komponen yang menampilkan paragraf "Ini konten utama".
• App() merupakan komponen utama yang merender kedua komponen tersebut secara berurutan menggunakan <Header /> dan <Konten />.
• Dengan pendekatan ini, antarmuka aplikasi menjadi lebih terstruktur, modular, dan mudah digunakan kembali (reusable).

Praktik Gabungan

Berikut Contoh Sederhana

function KartuProfil(props) {

  return (

    <div className="card">

      <h2>{props.nama}</h2>

      <p>Umur: {props.umur}</p>

    </div>

  );

}

function App() {

  return (

    <div>

      <KartuProfil nama="Ali" umur={18} />

      <KartuProfil nama="Budi" umur={21} />

    </div>

  );

}

Kode di atas merupakan contoh penggunaan props pada React untuk membuat komponen yang dapat digunakan berulang kali. Komponen KartuProfil menerima dua properti, yaitu nama dan umur, kemudian App merender dua kartu profil dengan data yang berbeda tanpa perlu menulis ulang struktur HTML/JSX.

Kesimpulan

Interaksi                                                Penjelasan

Menisipkan Komponen                        Menggunakan  <NamaKomponen />

Props                                                    Mengirim data dari induk ke anak

Event Hendler   (onClick dll)              Mengirim data dari induk ke anak

JSX Bersarang                                     Menyusun UI dari banyak komponen kecil

Poin-Point 

• Membuat Komponen Sederhana
• Props dan Penggunaannya dalam JSX
• State dan Perubahannya di JSX

Struktur dan Aturan Penulisan JSX yang Benar

# Aturan Dasar Penulisan JSX: Panduan Lengkap untuk Pemula

Aturan dasar penulisan JSX merupakan pondasi penting bagi setiap pengembang React. Tanpa memahami aturan ini, Anda akan sering menemui error saat koding. JSX sendiri adalah ekstensi sintaksis yang sangat populer di ekosistem modern. Artikel ini akan membedah secara mendalam semua ketentuan teknisnya.

## Mengenal Apa Itu JSX dan Cara Kerjanya di React

JSX adalah singkatan dari **JavaScript XML**. Sintaks ini memungkinkan Anda menulis kode mirip HTML di JavaScript. Namun, perlu diingat bahwa browser tidak bisa membaca JSX secara langsung. Di sinilah peran penting dari **Babel Transpiler**.

Babel bertugas mengubah kode JSX menjadi fungsi JavaScript biasa. Fungsi tersebut biasanya berupa `React.createElement()`. Hasil dari proses ini adalah objek JavaScript yang mendeskripsikan UI. Kumpulan objek tersebut membentuk apa yang kita kenal sebagai **Virtual DOM**.

Virtual DOM memungkinkan React memperbarui tampilan secara efisien. React hanya akan mengubah bagian yang memang perlu diperbarui. Hal ini membuat performa aplikasi menjadi sangat cepat dan responsif. Penggunaan JSX membuat proses deklarasi UI menjadi jauh lebih intuitif.

## Aturan Dasar Penulisan JSX untuk Struktur Komponen

Dalam membangun **React Components**, ada aturan struktur yang sangat ketat. Anda tidak bisa sembarangan menumpuk elemen di dalam fungsi return. Aturan pertama adalah setiap komponen wajib mengembalikan satu elemen root saja. Jika Anda memiliki dua elemen `<div>`, Anda harus membungkusnya.

Kegagalan membungkus elemen akan menyebabkan error pada proses kompilasi. Ini terjadi karena fungsi JavaScript hanya bisa mengembalikan satu nilai. Sebagai solusi, Anda bisa menggunakan elemen pembungkus seperti `<div>` atau `<section>`. Namun, terkadang penambahan div ekstra bisa merusak struktur tata letak CSS Anda.

Untuk mengatasi masalah tersebut, React menyediakan fitur bernama Fragments. Anda bisa menggunakan sintaks kosong `<>...</>` atau `<React.Fragment>`. Fragments memungkinkan Anda mengelompokkan elemen tanpa menambah node tambahan di DOM. Ini adalah praktik terbaik untuk menjaga kebersihan struktur HTML Anda.

Selain elemen tunggal, Anda harus memperhatikan penutupan tag. Dalam HTML biasa, beberapa tag seperti `<img>` atau `<input>` tidak perlu ditutup. Namun, dalam aturan dasar penulisan JSX, semua tag wajib ditutup. Untuk tag tanpa isi, Anda harus menggunakan self-closing tags seperti `<img />` atau `<br />`.

## Ketentuan Atribut dan Properti pada Sintaksis JSX

Saat bekerja dengan **React.js Syntax**, Anda akan menyadari perbedaan penamaan atribut. JSX menggunakan standar penamaan camelCase untuk hampir semua atributnya. Misalnya, Anda tidak menggunakan `onclick`, melainkan `onClick`. Hal yang sama berlaku untuk `tabindex` yang menjadi `tabIndex`.

Perbedaan paling mencolok ada pada penggunaan kelas CSS. Di HTML, kita menggunakan atribut `class`. Namun, di dalam JSX, Anda harus menggunakan `className`. Hal ini dikarenakan kata `class` adalah kata kunci yang sudah dipesan di JavaScript. Menggunakan `class` di dalam JSX akan memicu peringatan error di konsol browser.

Selain itu, ada juga atribut `for` pada elemen label yang berubah. Anda harus menggantinya dengan `htmlFor`. Perubahan-perubahan kecil ini sangat penting untuk diingat agar kode tetap valid. Pengembang pemula sering kali terjebak pada kesalahan penulisan atribut yang sederhana seperti ini.

Penting juga untuk memahami konsep [Props Passing](/dasar-react) dalam komponen. Atribut yang Anda tulis di JSX akan dikirim sebagai objek props. Ini adalah cara utama untuk mengalirkan data dari induk ke anak. Pastikan nama properti yang Anda kirim konsisten dengan yang diterima di komponen tujuan.

## Implementasi Logika dan Gaya dalam Penulisan JSX

Salah satu kekuatan utama JSX adalah kemampuannya menyisipkan logika JavaScript. Anda bisa menggunakan kurung kurawal `{}` untuk menulis ekspresi JavaScript di tengah markup. Di dalam kurung kurawal ini, Anda bisa memanggil variabel atau menjalankan fungsi. Anda juga bisa melakukan perhitungan matematika sederhana secara langsung.

Namun, Anda tidak bisa menulis pernyataan seperti `if-else` atau `for loop` di sana. Sebagai gantinya, gunakan operator ternary atau operator logika `&&`. Teknik ini disebut dengan conditional rendering. Misalnya, Anda bisa menampilkan tombol login hanya jika status user adalah false. Ini membuat UI Anda menjadi sangat dinamis dan cerdas.

Untuk urusan gaya atau styling, JSX mendukung penggunaan inline CSS. Namun, sintaksnya berbeda dengan HTML standar yang menggunakan string. Di React, inline style ditulis sebagai objek JavaScript. Properti CSS juga harus menggunakan format camelCase, misalnya `backgroundColor` bukan `background-color`.

Contoh penulisan style yang benar adalah `style={{ color: 'red', fontSize: '16px' }}`. Perhatikan penggunaan kurung kurawal ganda di sana. Kurung luar adalah penanda ekspresi JSX, sedangkan kurung dalam adalah objek JavaScript. Anda bisa mempelajari lebih lanjut tentang [styling di React](/panduan-css-react) untuk teknik yang lebih rapi.

## Menangani Interaksi Pengguna dalam Format JSX

Interaksi pengguna adalah bagian inti dari aplikasi web modern. Dalam JSX, menangani event seperti klik sangatlah mudah. Anda cukup memberikan referensi fungsi ke atribut event yang sesuai. Pastikan Anda tidak memanggil fungsi tersebut secara langsung dengan tanda kurung. Cukup tuliskan nama fungsinya saja agar dieksekusi saat event terjadi.

Misalnya, penulisan yang benar adalah `onClick={handleClick}`. Jika Anda menulis `onClick={handleClick()}`, fungsi akan berjalan saat render pertama kali. Ini adalah kesalahan umum yang sering menyebabkan bug "infinite loop". Terutama jika fungsi tersebut mengubah state di dalam komponen Anda.

Pengelolaan data atau state juga sangat berkaitan erat dengan tampilan JSX. Setiap kali state berubah, React akan memicu proses re-render secara otomatis. JSX Anda akan dievaluasi ulang untuk mencerminkan data terbaru. Integrasi antara logika state dan deklarasi UI inilah yang membuat React sangat powerful.

Pastikan Anda selalu menjaga kebersihan kode di dalam bagian return. Jika logika conditional rendering terlalu kompleks, sebaiknya pindahkan ke variabel di luar return. Hal ini akan meningkatkan keterbacaan kode Anda secara signifikan. Kode yang bersih akan jauh lebih mudah untuk didebug di masa depan.

## Kesimpulan: Pentingnya Memahami Aturan Standar JSX

Memahami aturan dasar penulisan JSX adalah langkah awal menjadi ahli React. Aturan ini bukan sekadar formalitas, melainkan kebutuhan teknis sistem. Dengan mengikuti standar, Anda memastikan kode dapat ditranspilasi dengan sempurna oleh Babel. Aplikasi Anda pun akan berjalan lancar tanpa error sintaksis yang tidak perlu.

Selalu ingat untuk menutup setiap tag dengan benar. Gunakan satu elemen root atau Fragments sebagai pembungkus utama. Jangan lupa gunakan camelCase untuk atribut dan `className` untuk kelas CSS. Manfaatkan kurung kurawal untuk menyisipkan dinamika logika ke dalam tampilan antarmuka Anda.

Untuk referensi lebih lanjut yang lebih teknis, Anda bisa mengunjungi [Dokumentasi Resmi React](https://react.dev). Teruslah berlatih dengan membuat proyek-proyek kecil. Semakin sering Anda menulis JSX, semakin terbiasa Anda dengan pola uniknya. Jangan ragu untuk mengeksplorasi [tutorial hooks](/hooks-tutorial) setelah Anda menguasai dasar-dasar sintaksis ini.

•  Pengertian JSX

JSX (JavaScript XML) adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis kode yang mirip HTML di dalam file JavaScript, terutama digunakan dalam React. JSX memudahkan kita membangun antarmuka pengguna (UI) dengan sintaks yang lebih deklaratif dan intuitif.

• Struktur Dasar JSX

berikut contoh sederhana dari struktur JSX

const element = (

  <div>

    <h1>Halo Sahabatku!</h1>

    <p>Berikut Ini adalah Contoh Sederhana paragraf di dalam JSX.</p>

  </div>

);

bagian bagian pada JSX Tag Pembuka dan Penutup Seperti <div>....</div> sedangkan Isi atau anak element bisa berupa text, element JSX lainnya atau ekpresi javascript dalam {}

• Aturan JSX yang perlu kita ketahui

1. Harus Punya Satu Root Element

JSX hanya bisa mengembalikan satu elemen utama. Gunakan <div> atau React.Fragment (<> ... </>) jika ingin menulis lebih dari satu elemen:

// ❌ Salah:

return (

  <h1>Halo</h1>

  <p>Selamat datang sahabatku</p>

);

// ✅ Benar:

return (

  <div>

    <h1>Halo</h1>

    <p>Selamat datang sahabatku</p>

  </div>

);

    

       2. Gunakan ClassName Untuk CSS

Karena class adalah keyword di dalam javascript, maka kita gunakan ClassName di JSX 

// HTML

<div class="kotakForm"></div>

// JSX

<div className="kotakForm"></div>

         3. Atribut Menggunakan camleCase

JSX menggunakan penulisan atribut seperti onClick, htmlFor, tabIndex, bukan lowercase seperti HTML biasa.

<button onClick={handleClick}>Klik Saya</button>

<label htmlFor="email">Email</label>

         4. Gunakan {} untuk ekpresi JavaScript

Kita bisa menyisipkan JavaScript (bukan statement) dengan {}

const nama = "Andi";

<p>Halo, Saya {nama}</p>

         5. Komentar JSX

Untuk memberikan komentar pada JavaScript kita bisa mengisi seperti berikut :

{/* Ini Komentar dalam JavaScript */}

         6. Tag harus di tutup

Semua element di JSX harus di tutup, termasuk element kosong harus di tutup juga berikut contoh

// Benar

<img src="logo.png" alt="Logo" />

<br />

Contoh Lengkap:

function App() {

  const nama = "Ali";

  const umur = 17;

  return (

    <div className="container">

      <h1>Selamat Datang, {nama}</h1>

      <p>Umur kamu adalah {umur} tahun</p>

    </div>

  );

}

         7. Tabel Ringkasan Aturan JSX

Aturan	Penjelasan Singkat
Satu elemen root	Bungkus semua elemen dalam satu tag
Gunakan className	Gantikan class untuk CSS
Gunakan camelCase	Atribut seperti onClick, htmlFor
Sisipkan ekspresi dengan {}	Bukan statement (jangan pakai if)
Semua tag harus ditutup	Tag seperti <img />, <br />

Berikut contoh sederhana yang menampilkan dua variabel nama dan umur

function App() {

  const nama = "Andi";

  const umur = 22;

  return (

    <div>

      <h1>Halo, nama saya {nama}</h1>

      <p>Umur saya {umur} tahun</p>

    </div>

  );

}

export default App;

Tambahkan Materi Berikut : 

• Penanganan Atribut dan Event
• Fragment dan Elemen Pembungkus

Menyisipkan JavaScript dalam JSX

Berikut sedikit penjelasan tentang pembelajaran "Menyisipkan JavaScript dalam JSX" yang cocok untuk pemula yang sedang mempelajari React:

JSX adalah ekstensi JavaScript yang digunakan dalam React. Salah satu keunggulan JSX adalah kemampuannya untuk menyisipkan ekspresi JavaScript langsung di dalam markup (tampilan) menggunakan tanda kurung kurawal {}

Apa Itu Ekspresi JavaScript?

Ekpresi adalah bagian dari code JavaScript yang menghasilkan sebuah nilai misalnya

• Nilai langsung "Haloo" atau 123
• Variabel : nama
• Fungsi : getName
• Operasi : 2+2 atau angka * 10

Hanya ekpresi bukan statemen for if atau while

Cara Menyisipkan JavaScript di JSX

Gunakan kurung kurawel {} untuk menyisipkan JavaScript dalam JSX

const nama = "jono";

const elemen = <h1>Heloo , {nama}!</h1>

Contoh Penggunaan JavaScript di JSX

1. Variabel

const nama = "Jono";

return <p>Selamat datang, {nama}</p>;

2. Operasi Matematika

const a = 5, b = 10;
return <p>Hasil: {a + b}</p>; // Output: Hasil: 15
3. Ternary Operator (if sederhana)
const isLoggedIn = true;
return <p>{isLoggedIn ? "Selamat Datang" : "Silakan Login"}</p>;
4. Fungsi
function getWaktu() {
  return new Date().toLocaleTimeString();
}
return <p>Waktu sekarang: {getWaktu()}</p>;
4. Array dan .Map
const buah = ["Apel", "Jeruk", "Mangga"];
return (
  <ul>
    {buah.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Hal yang Tidak Boleh Dilakukan

Tidak bisa menggunakan pernyataan (statement) seperti :

// x ini tidak boleh

{ if (true) { return "Halo" } }

Gunakan ternary atau ekpresi pendek

// ✅ Gunakan ini:
{true && <p>Halo</p>}

Kesimpulan

JSX hanya menerima ekspresi di dalam {} karena JSX pada akhirnya dikompilasi ke dalam fungsi JavaScript biasa.

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

Link 7

Sintaks Dasar JSX dan HTML

 Pengertian JSX

JSX (JavaScript XML) merupakan eksistensi sintaks JavaScript yang di pergunakan di react untuk menulis element UI. JSX terlihat seperti HTML, tetapi di tulis didalam file JavaScript dan dikompilasi menjadi JavaScript murni oleh Babel.

HTML adalah bahasa markup standard yang digunakan di browser untuk menyusun halaman web

Contoh :

Mengapa Kita Menggunakan JSX?

> Membuat kode lebih mudah dibaca dan di tulis

> Mendeklarasikan element UI seperti menulis HTML

> Mendukung ekspresi JavaScript di dalam tanda kurung {}

Sintaks Dasar JSX

1. Element JSX

2. JSX Harus Satu Element Root

3. Menyisipkan JavaScript dalam JSX

Gunakan {} untuk memasukan ekpresi JavaScript

Atribut JSX

1. Gunakan className bukan class

2. Gunakan camelCase untuk nama atribut

Perbedaan Penting JSX dan HTML

> HTML : class, for, Atribut lowercase

> JSX     : className, htmlFor, camelCase(onClick, OnChange) 

For VS htmlForm

Contoh Lengkap

Contoh JSX

Contoh HTML 

Instalasi Dan Setup Awal Proyek React

Persiapkan Alat

Sebelum membuat proyek React pastikan alat-alat berikut sudah terpasang

a. Node.js dan NPM

Ract membutuhkan Node.js karna react menggunakan NPM (Node Package Manager) untuk mengelola depedensi 

bisa di download di https://nodejs.org 

Langkah - Langkah Install Bisa di cek di sini

Setelah instalasi, buka terminal dan ketik : 

jika muncul version maka node.js dan npm sudah terinstall

b. Code Editor 

Gunakan Visual Code atau editor yang sesuai dengan ke inginan kita

Visual Code Bisa di download di sini https://code

Membuat Proyek React Dengan Create React App

Cara paling mudah untuk membuat proyek React adalah dengan menggunakan Create React App

Buka terminal CMD, GIT Bash, lalu jalankan perintah :

- npx create-react-app nama-proyek-anda

- npx create-react-app belajar-react

tunggu beberapa menit sampai semua depedensi selesai di unduh

Struktur Folder Proyek

Instalasi Awal Proyek React (Recommended)

Sekarang yang paling direkomendasikan adalah Vite karena cepat dan ringan.

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

Pilih:

• Framework: React
• Variant: JavaScript atau TypeScript

Struktur Folder Standar Proyek React

my-react-app/
├─ node_modules/
├─ public/
│ ├─ favicon.svg
│ └─ index.html
├─ src/
│ ├─ assets/
│ │ ├─ images/
│ │ ├─ icons/
│ │ └─ styles/
│ ├─ components/
│ │ ├─ Button.jsx
│ │ ├─ Navbar.jsx
│ │ └─ Footer.jsx
│ ├─ pages/
│ │ ├─ Home.jsx
│ │ ├─ About.jsx
│ │ └─ Contact.jsx
│ ├─ layouts/
│ │ └─ MainLayout.jsx
│ ├─ routes/
│ │ └─ AppRoutes.jsx
│ ├─ services/
│ │ └─ api.js
│ ├─ hooks/
│ │ └─ useAuth.js
│ ├─ utils/
│ │ └─ formatter.js
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ index.css
├─ .gitignore
├─ package.json
├─ vite.config.js
└─ README.md

Penjelasan Fungsi Folder (Penting!)

public/
Berisi file statis:

• index.html → root HTML

• favicon, gambar publik

src/assets/

Aset pendukung:

• images/ → gambar
• icons/ → icon SVG
• styles/ → CSS / Tailwind config

src/components/

Komponen kecil & reusable:

• Button
• Navbar
• Modal
• Card

Tidak berisi logic halaman

src/pages/

Halaman utama aplikasi:

• Home
• Login
• Dashboard

Biasanya terhubung ke routing

src/layouts/

Template layout:

• Header
• Sidebar
• Footer

Digunakan ulang oleh banyak halaman

src/routes/

Konfigurasi routing:

• React Router
• Protected routes

src/services/

Komunikasi ke backend:

• API
• Axios
• Auth service

src/hooks/

Custom React Hooks:

• useAuth
• useFetch

src/utils/

Helper & fungsi umum:

• Formatter tanggal
• Validator
• Helper string

 

main.jsx

Entry point React

App.jsx

Root component utama

Contoh Setup Routing Sederhana

src/routes/AppRoutes.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

export default function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Struktur untuk Proyek Besar (Best Practice)

Jika aplikasi makin besar:

 src/

├─ features/
│ ├─ auth/
│ │ ├─ Login.jsx
│ │ ├─ authService.js
│ │ └─ authSlice.js
│ └─ product/
│ ├─ ProductList.jsx
│ └─ productService.js

Buat Project React (Vite)

npm create vite@latest react-tailwind-app
cd react-tailwind-app
npm install

Pilih:

• Framework: React
• Variant: JavaScript (atau TypeScript kalau mau)

 

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

Konfigurasi Tailwind

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Setup CSS Utama

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* custom style */
body {
  @apply bg-gray-50 text-gray-800;
}

 

Struktur Folder Template

src/
├─ assets/
│  └─ images/
├─ components/
│  ├─ Navbar.jsx
│  └─ Button.jsx
├─ layouts/
│  └─ MainLayout.jsx
├─ pages/
│  └─ Home.jsx
├─ App.jsx
├─ main.jsx
└─ index.css

 

Contoh Komponen

src/components/Navbar.jsx
export default function Navbar() {
  return (
    <nav className="bg-white shadow">
      <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between">
        <h1 className="text-xl font-bold text-blue-600">
          React + Tailwind
        </h1>
        <ul className="flex gap-4">
          <li className="hover:text-blue-500 cursor-pointer">Home</li>
          <li className="hover:text-blue-500 cursor-pointer">About</li>
        </ul>
      </div>
    </nav>
  );
}

 

src/components/Button.jsx
export default function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
      {children}
    </button>
  );
}

Layout Utama

src/layouts/MainLayout.jsx
import Navbar from "../components/Navbar";
export default function MainLayout({ children }) {
  return (
    <>
      <Navbar />
      <main className="max-w-7xl mx-auto p-6">
        {children}
      </main>
    </>
  );
}

 

Halaman Home

src/pages/Home.jsx
import Button from "../components/Button";
import MainLayout from "../layouts/MainLayout";
export default function Home() {
  return (
    <MainLayout>
      <section className="text-center py-20">
        <h2 className="text-4xl font-bold mb-4">
          React + Tailwind Template
        </h2>
        <p className="text-gray-600 mb-6">
          Template siap pakai untuk project modern
        </p>
        <Button>Mulai Sekarang</Button>
      </section>
    </MainLayout>
  );
}

App Entry

src/App.jsx
import Home from "./pages/Home";
export default function App() {
  return <Home />;
}

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Jalankan Project

npm run dev
Buka browser: http://localhost:5173