Skip to main content

Konsep Dasar

Materi yang Akan Dipelajari​

Sebelum memasuki pembahasan React, kita akan mengulas kembali konsep-konsep penting JavaScript modern (ES6+) yang menjadi dasar dalam pengembangan aplikasi React.

1. Dasar Proyek dan Alur Kerja​

Pengenalan Proyek​

Kita akan menggunakan proyek sederhana sebagai media untuk mencoba berbagai contoh kode JavaScript sebelum beralih ke React.

Integrasi JavaScript dan React​

Mempelajari perbedaan penggunaan JavaScript pada halaman HTML biasa dengan proyek React yang menggunakan build process.

Materi yang dibahas meliputi:

  • Menambahkan JavaScript ke HTML.
  • Peran Build Tool seperti Vite.
  • Proses kompilasi JSX menjadi JavaScript.

JavaScript Module (Import & Export)​

Belajar memisahkan kode ke dalam beberapa file menggunakan JavaScript Module.

Topik yang akan dipelajari:

  • export
  • export default
  • import
  • Mengelola struktur file JavaScript.

2. Sintaks Dasar JavaScript​

Variabel, Nilai, dan Operator​

Mengulas kembali dasar-dasar JavaScript, seperti:

  • let
  • const
  • Tipe data
  • Operator aritmatika
  • Operator perbandingan
  • Operator logika

Materi ini menjadi fondasi sebelum menggunakan React.

Function dan Arrow Function​

Mempelajari cara membuat fungsi menggunakan sintaks tradisional maupun Arrow Function.

Materi meliputi:

  • Function Declaration
  • Function Expression
  • Arrow Function
  • Parameter
  • Return Value

Karena React banyak menggunakan Arrow Function, materi ini sangat penting untuk dipahami.

3. Object dan Class​

Pada bagian ini kita akan mempelajari cara JavaScript menyimpan data dalam bentuk objek serta konsep Class.

Materi yang dibahas meliputi:

  • Object
  • Property
  • Method
  • Constructor
  • Class
  • Inheritance (pengantar)

4. Array dan Array Methods​

Array merupakan struktur data yang paling sering digunakan di React.

Kita akan mempelajari berbagai metode penting seperti:

  • map()
  • filter()
  • find()
  • forEach()
  • push()
  • pop()
  • slice()
  • splice()

Pemahaman terhadap metode-metode ini akan sangat membantu saat melakukan rendering daftar data pada React.

5. Destructuring​

Destructuring merupakan fitur JavaScript modern untuk mengambil nilai dari objek maupun array dengan sintaks yang lebih ringkas.

Materi yang dipelajari:

  • Object Destructuring
  • Array Destructuring
  • Destructuring pada Parameter Function

Fitur ini hampir selalu digunakan dalam penulisan komponen React.

6. Spread Operator​

Mempelajari penggunaan operator ... (Spread Operator) untuk:

  • Menyalin array
  • Menggabungkan array
  • Menyalin object
  • Menggabungkan object
  • Memperbarui data tanpa mengubah data asli (immutable update)

Konsep ini merupakan salah satu teknik yang paling sering digunakan dalam React.

7. Struktur Kontrol​

Pada bagian ini kita akan mengulas kembali bagaimana JavaScript mengatur alur program.

Materi meliputi:

  • if
  • else
  • else if
  • switch
  • for
  • while
  • for...of

Konsep ini akan digunakan saat membuat logika pada komponen React.

8. Manipulasi DOM​

Sebelum mempelajari React, penting untuk memahami bagaimana JavaScript bekerja dengan DOM (Document Object Model).

Kita akan membahas:

  • Cara JavaScript memanipulasi elemen HTML secara langsung.
  • Kekurangan manipulasi DOM secara manual.
  • Mengapa React menggunakan pendekatan Declarative UI dibanding manipulasi DOM langsung.

Materi ini akan membantu Anda memahami alasan React dibuat.

9. First-Class Function dan Nested Function​

JavaScript memperlakukan fungsi sebagai sebuah nilai (First-Class Function).

Materi yang dipelajari:

  • Menyimpan fungsi ke dalam variabel.
  • Mengirim fungsi sebagai parameter.
  • Mengembalikan fungsi dari fungsi lain.
  • Membuat fungsi di dalam fungsi (Nested Function).

Konsep ini menjadi dasar berbagai fitur modern React, termasuk penggunaan Hooks.

10. Primitive dan Reference Values​

Pada materi terakhir, kita akan memahami bagaimana JavaScript menyimpan data di dalam memori.

Topik yang dibahas:

  • Primitive Values
  • Reference Values
  • Perbedaan proses penyalinan data
  • Dampaknya terhadap Object dan Array

Pemahaman konsep ini sangat penting karena React menggunakan pendekatan immutable state, sehingga Anda perlu mengetahui bagaimana JavaScript menangani perubahan data.

Kesimpulan​

Materi JavaScript pada bagian ini difokuskan pada konsep-konsep yang paling sering digunakan dalam React. Setelah memahami seluruh materi tersebut, Anda akan lebih siap mempelajari komponen, state, props, hooks, serta berbagai fitur React lainnya.