📚

Pengantar Dasar React JS

Mar 10, 2025

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.