Persiapan sebelum terjun ke ReactJS! Pahami konsep-konsep JavaScript (ES6+) yang penting dan kenalan singkat dengan Node.js serta package manager (npm/yarn) yang jadi tulang punggung development React modern.
17m bacaanKuis WajibMicro Badge Lesson
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.
(Kita singgung sedikit di , 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.
javascript
// Destructuring Objekconst orang = { nama: "Budi", usia: 30 };const { nama, usia } = orang; // Sekarang ada variabel nama="Budi" dan usia=30console.log(nama); // Destructuring Arrayconst angka = [10, 20, 30];const [satu, dua] = angka; // satu=10, dua=20console.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.
javascript
// file: utilitas.jsexport const PI = 3.14;export function sapaDunia() { console.log("Halo!"); }// file: app.jsimport { 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).
javascript
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):
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.
Download installer yang sesuai sama sistem operasimu (Windows, macOS, Linux).
Jalanin installer-nya dan ikutin petunjuknya (biasanya tinggal klik "Next" aja).
Buat ngecek apakah Node.js dan npm udah keinstal, buka terminalmu dan ketik:
bash
node -v# Harusnya nampilin versi Node.js, misal: v20.19.1
bash
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).
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?
Checkpoint KuisTarget: 70%
Kuis Prasyarat & Ekosistem ReactJS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
