Catatan Kuliah tentang React

Pembukaan

• Pembicara: Sandika Galih
• Memperkenalkan seri baru tentang React.
• Tujuan: Tutorial paling masuk akal untuk pemula.

Kenapa Dokumentasi Resmi?

• Pentingnya mempelajari dari dokumentasi resmi.
• Dokumentasi React dianggap kurang masuk akal untuk pemula.
• Ada dokumentasi berbahasa Indonesia: id.reactjs.org

Definisi Pemula

• Pemula adalah orang yang:
  • Sudah belajar JavaScript.
  • Familiar dengan manipulasi DOM.
  • Belum pernah menggunakan React.

Masalah dengan Dokumentasi React

• Dokumentasi tidak memberikan definisi yang jelas tentang React.
• Komponen dan cara penggunaannya tidak terstruktur dengan baik.
• Versi lama dokumentasi lebih mudah dipahami.
• Dokumentasi baru lebih kompleks dan membingungkan bagi pemula.

Mengenal React

• React adalah library JavaScript untuk membuat UI.
• Dikenal sebagai "library yang unopinionated" (tidak memaksakan cara penggunaan tertentu).

Sejarah React

• Diciptakan oleh Jordan Walk di Facebook pada tahun 2013.
• Mempermudah pengelolaan UI di aplikasi besar seperti Facebook dan Instagram.
• Versi saat ini: 18.2.0.

Apa Itu React?

• Digunakan untuk membangun user interface yang interaktif.
• Memungkinkan reaktivitas saat ada perubahan data.

Konsep Dasar React

1. Komponen: Potongan kode independen yang dapat digunakan kembali.
2. Props: Properti yang diteruskan ke komponen untuk memodifikasi perilaku.
3. State: Data yang dapat berubah seiring interaksi pengguna.

JSX (JavaScript XML)

• Sintaks yang mirip dengan HTML untuk mendeskripsikan UI.
• Harus selalu mengembalikan satu elemen.
• Semua tag harus ditutup.
• Menggunakan camelCase untuk atribut.

Persiapan untuk Belajar React

Materi yang Harus Dikuasai

• HTML dan CSS
• JavaScript (fundamental dan ES6)
• DOM
• CLI (Command Line Interface)
• Package Manager (NPM, Yarn, dll)

Setup Editor

• Saran untuk menggunakan Visual Studio Code.
• Memasang ekstensi seperti Prettier dan React Developer.

Mulai Menggunakan React

Membuat Aplikasi Sederhana

• Menggunakan CDN untuk memanggil library React.
• Membuat komponen menggunakan fungsi JavaScript.
• Memahami cara menggunakan state dan props.

Contoh Membuat Komponen

• Contoh penggunaan komponen, props, dan cara menampilkan data.
• Menggunakan metode array seperti .map untuk menampilkan data.

Latihan

• Membuat counter sederhana dengan tombol untuk menambah, mengurangi, dan mereset nilai.
• Menerapkan props untuk membuat komponen yang lebih dinamis.

Kesimpulan

• Tutorial ini diambil dari dokumentasi Next.js.
• Harapan untuk melanjutkan pembelajaran tentang React di video selanjutnya.