Bekal Sebelum Berpetualang ke Dunia React: Apa Aja yang Perlu Disiapin?

Udah semangat mau bikin UI keren pake ReactJS? Mantap! Tapi, sebelum kita bener-bener "terjun bebas" ngoding React, ada baiknya kita pastiin dulu "bekal" kita udah cukup. React itu dibangun di atas JavaScript, jadi pemahaman JavaScript yang lumayan itu penting banget. Selain itu, ada beberapa "alat bantu" di ekosistem JavaScript modern yang perlu kita kenal sedikit.

1. Bekal JavaScript yang Sebaiknya Udah Ada di "Tas"-mu

React banyak banget manfaatin fitur-fitur JavaScript modern (sering disebut ES6 atau ECMAScript 2015 ke atas). Kalau kamu udah ngikutin panduan JavaScript dasar kita, sebagian besar ini udah pernah kita bahas. Tapi, yuk kita review lagi beberapa konsep JS yang bakal sering banget kepake di React:

• let dan const: Cara modern buat deklarasiin variabel. const buat nilai yang gak berubah, let buat yang bisa berubah. (Liat lagi Variabel & Tipe Data JS).
• Arrow Functions (=>): Sintaks fungsi yang lebih ringkes. Kamu bakal sering banget liat dan nulis ini di React, terutama buat komponen dan event handler.

  // Fungsi biasa
  function sapa(nama) { return "Halo " + nama; }
  // Arrow function
  const sapaArrow = (nama) => "Halo " + nama;
  const sapaLagi = nama => `Hai ${nama}`; // Kalau cuma 1 parameter, kurung opsional

  (Kita singgung sedikit di Fungsi Dasar JS, tapi di React ini bakal jadi makanan sehari-hari).
• Destructuring Assignment (Array & Objek): Cara gampang buat "ngebongkar" nilai dari array atau properti dari objek jadi variabel-variabel terpisah. Super berguna pas kerja sama props dan state di React.

  // Destructuring Objek
  const orang = { nama: "Budi", usia: 30 };
  const { nama, usia } = orang; // Sekarang ada variabel nama="Budi" dan usia=30
  console.log(nama); 
   
  // Destructuring Array
  const angka = [10, 20, 30];
  const [satu, dua] = angka; // satu=10, dua=20
  console.log(satu);

• Modules (import / export): Cara JavaScript modern buat ngorganisir kode jadi file-file terpisah (modul) dan make ulang kode dari satu modul di modul lain. Proyek React itu biasanya terdiri dari banyak file komponen yang saling import dan export.

  // file: utilitas.js
  export const PI = 3.14;
  export function sapaDunia() { console.log("Halo!"); }
   
  // file: app.js
  import { PI, sapaDunia } from './utilitas.js';
  console.log(PI);
  sapaDunia();

• Array Methods (terutama .map()): Metode array kayak .map() itu sering banget dipake di React buat ngerender daftar elemen JSX dari array data. Metode lain kayak .filter(), .find(), .reduce() juga berguna. (Review lagi Array & Metodenya di JS).

  const namaBuah = ["Apel", "Jeruk", "Mangga"];
  // Di React, kamu bakal sering liat kayak gini buat nampilin list:
  // <ul>
  //   {namaBuah.map(buah => <li key={buah}>{buah}</li>)}
  // </ul>

• Template Literals (`...${ekspresi}...`): Buat bikin string yang lebih dinamis dan gampang nyisipin variabel. (Udah dibahas di String & Metodenya di JS).
• Konsep this (meskipun agak beda di Functional Components dengan Hooks): Ngertiin dasar-dasar this di JavaScript itu bagus, meskipun di React modern dengan functional components dan hooks, kita lebih jarang berurusan langsung sama this yang "tricky" kayak di class components atau Vanilla JS DOM manipulation.
• Asynchronous JavaScript (Callbacks, Promises, Async/Await - Pengenalan): Kalau kamu mau ngambil data dari API di komponen React-mu (pake useEffect dan fetch), pemahaman dasar soal operasi asinkron ini bakal sangat ngebantu. (Ini mungkin topik yang lebih lanjut, tapi disinggung di penutup JS kita).

Gak perlu jadi master semua ini dulu kok! Tapi, semakin kamu familiar sama konsep-konsep JS modern ini, semakin gampang kamu ngikutin dan ngertiin kode React nantinya. Kalau ada yang masih bingung, gak ada salahnya buat ngulang lagi materi JavaScript dasar kita.

2. Kenalan Singkat Sama "Alat Bantu" React: Node.js dan npm/yarn

Pas kamu mulai ngembangin aplikasi React yang "beneran" (bukan cuma nyoba di CodePen atau sejenisnya), kamu bakal ketemu sama dua "makhluk" ini: Node.js dan npm (atau yarn).

a. Node.js: JavaScript di Luar Browser!

• Apa itu Node.js? Secara singkat, Node.js adalah sebuah runtime environment (lingkungan buat ngejalanin kode) yang ngebolehin kamu ngejalanin kode JavaScript di LUAR browser web. Jadi, JavaScript gak cuma "terkurung" di browser aja, tapi bisa dipake buat bikin aplikasi server (backend), alat bantu command line, skrip otomatisasi, dll.

• Kenapa Kita Butuh Node.js buat React?

  • React sendiri itu library JavaScript yang intinya jalan di browser buat ngurusin UI.
  • TAPII, buat proses development React modern, kita butuh banyak "alat bantu" (kayak build tools, development server, package manager) yang seringkali dibangun pake Node.js dan dijalanin lewat command line di komputermu.
  • Jadi, Node.js di sini lebih berperan sebagai fondasi buat ekosistem development React, bukan berarti kamu harus langsung jadi developer backend Node.js ya!

• Cara Instal Node.js (yang biasanya udah termasuk npm):

  1. Kunjungi website resmi Node.js: nodejs.org
  2. Biasanya ada dua versi yang ditawarin:
     • LTS (Long Term Support): Ini versi yang paling stabil dan direkomendasiin buat sebagian besar pengguna.
     • Current: Ini versi terbaru dengan fitur-fitur palinggress, tapi mungkin belum se-stabil LTS. Pilih yang LTS aja biar aman.
  3. Download installer yang sesuai sama sistem operasimu (Windows, macOS, Linux).
  4. Jalanin installer-nya dan ikutin petunjuknya (biasanya tinggal klik "Next" aja).
  5. Buat ngecek apakah Node.js dan npm udah keinstal, buka terminalmu dan ketik:

     node -v 
     # Harusnya nampilin versi Node.js, misal: v20.19.1

     npm -v
     # Harusnya nampilin versi npm, misal: 10.8.2

  Kalau dua perintah itu ngeluarin nomor versi, berarti udah beres!

b. npm (Node Package Manager) atau yarn: Si Manajer "Paket"

• Apa itu Package Manager? Di dunia JavaScript, banyak banget kode atau library berguna yang dibikin sama orang lain dan bisa kita pake ulang di proyek kita (ini disebut package atau module). Nah, Package Manager (kayak npm atau yarn) adalah alat bantu yang tugasnya:

  • Nginstal package/library yang kita butuhin dari "gudang" online (npm registry).
  • Ngatur dependensi proyek kita (nyatet package apa aja yang dipake dan versi berapa).
  • Ngejalanin skrip-skrip yang berhubungan sama proyek (misal, ngejalanin development server, nge-build proyek buat produksi).

• npm (Node Package Manager npmjs.com):

  • Ini package manager default yang otomatis keinstal bareng Node.js. Jadi, kalau kamu udah instal Node.js, kamu udah punya npm.
  • Perintah-perintahnya biasanya diawali npm (misal, npm install nama-package, npm run dev).

• yarn (yarnpkg.com):

  • Ini package manager alternatif yang dibikin sama Facebook. Dulu yarn sering dianggap lebih cepet dan punya beberapa fitur lebih dari npm versi lama.
  • Sekarang, npm udah banyak ngejar ketertinggalannya, jadi pilihan antara npm atau yarn seringkali lebih ke preferensi pribadi atau tim.
  • Kalau mau pake yarn, kamu perlu nginstalnya dulu (biasanya bisa pake npm: npm install --global yarn).
  • Perintahnya diawali yarn (misal, yarn add nama-package, yarn dev).

• File package.json:

  • Setiap proyek JavaScript (termasuk proyek React) yang pake npm atau yarn biasanya punya file namanya package.json di folder root-nya.
  • File ini isinya metadata soal proyekmu: nama proyek, versi, skrip-skrip yang bisa dijalanin ("scripts"), dan yang paling penting, daftar dependensi ("dependencies" dan "devDependencies") yang dipake sama proyekmu beserta versinya.
  • Kamu biasanya gak ngedit file ini manual buat nambah dependensi, tapi pake perintah npm install nama-package (dia bakal otomatis nambahin ke package.json).

Jadi, buat React, kita bakal pake npm (atau yarn) buat:

• Nginstal alat kayak Vite (buat bikin proyek React).
• Nginstal React itu sendiri (react dan react-dom).
• Nginstal library lain kalau perlu (misal, React Router buat navigasi).
• Ngejalanin development server (npm run dev).
• Nge-build proyek buat produksi (npm run build).

Gak perlu khawatir kalau istilah-istilah ini masih kedengeran asing. Nanti pas kita praktik bikin proyek React pertama, kamu bakal liat langsung gimana Node.js dan npm ini dipake. Untuk sekarang, yang penting kamu tau kalau mereka itu "mesin" di balik layar yang ngebantu proses development React jadi lebih modern dan terstruktur.

Dengan bekal pemahaman JavaScript ES6+ yang cukup dan sedikit pengenalan soal Node.js/npm, kamu udah lebih siap buat nyemplung ke dunia ReactJS! Jangan takut kalau ada konsep JS yang belum 100% dikuasai, belajar React juga bisa jadi cara buat memperdalam pemahaman JS-mu secara praktis.

Di materi berikutnya, kita bakal langsung praktik bikin proyek React pertama kita pake Vite. Siap buat liat "Hello World" versi React?