Catatan Kuliah React JS

Pembukaan

• Nama pengajar: Eko Kurniawan
• Pekerjaan: Technical Architect di e-commerce
• Pengalaman: 14 tahun di bidang programming

Persiapan Kelas

• Pastikan sebelum mengikuti kelas ini:
  • Sudah mengikuti kelas dasar JavaScript, Node.js, dan framework terkait.

Kenapa Menggunakan Framework atau Library?

• Standarisasi:
  • Membantu dalam pembuatan proyek, terutama saat bekerja dalam tim.
  • Menghindari kode dengan gaya yang berbeda dari anggota tim lain.

Sejarah React JS

• Awalnya bernama Fax JS, dikembangkan oleh Facebook sekitar 2010.
• Diintegrasikan dengan XHP (pengembangan dari PHP) pada 2011.
• Berganti nama menjadi React JS pada 2011 dan dirilis sebagai open source pada 2013.
• Sekarang sangat populer di kalangan developer front-end.

Komponen dalam React

• Komponen:
  • Kumpulan kode yang dapat digunakan kembali, terdiri dari satu atau lebih elemen HTML.
  • Struktur komponen mirip dengan DOM.

JSX (JavaScript XML)

• JSX memungkinkan kita untuk menulis HTML di dalam JavaScript.
• Kode HTML ditulis dalam format XML dan harus memenuhi aturan-aturan XML.

Membuat Proyek React

• Cara membuat proyek menggunakan Vite dan npm.
  • Perintah: npm create vite@latest <nama_proyek> --template react
• Menjalankan proyek dengan npm run dev.

Komponen Pertama: Hello World

1. Buat file HelloWorld.jsx.
2. Buat komponen yang hanya menampilkan "Hello World".
3. Menjalankan komponen melalui index.js.

Penggunaan Props

• Props digunakan untuk mengirimkan data ke komponen anak.
• Props berfungsi mirip dengan atribut di HTML.

State Management

• State adalah data yang dapat berubah dan digunakan untuk mengontrol komponen.
• Menggunakan useState untuk mengelola state dalam komponen.

Penggunaan Effect

• Effect digunakan untuk operasi samping seperti data fetching.
• Menggunakan useEffect untuk menangani efek samping dalam komponen.

Custom Hooks

• Hooks Kustom memungkinkan kita untuk membuat fungsionalitas yang dapat digunakan kembali.

Kesimpulan

• React JS adalah library yang kuat untuk membangun UI dengan komponen.
• Pahami konsep state, props, dan efek untuk mengoptimalkan aplikasi.
• Gunakan dokumentasi resmi React untuk eksplorasi lebih lanjut.