Daftar Isi Utama

1. Pengenalan JavaScript, TypeScript, dan React
2. Instalasi dan Setup Environment
3. Fondasi TypeScript
4. Dasar JavaScript dan TypeScript
5. Array, Object, dan Pengolahan Data Inti
6. Sintaks JavaScript Modern dan Modules
7. Fondasi Browser sebelum React
8. JavaScript Asinkron
9. Dasar-Dasar React
10. React Hooks dan Side Effects
11. Form dan Validasi di React
12. Routing dan Struktur Aplikasi
13. Pola State Management
14. Pola Integrasi API di Aplikasi Nyata
15. Testing di JavaScript/TypeScript/React
16. Kualitas Kode dan Developer Tooling
17. Dasar Backend dengan Node.js
18. Deployment dan Dasar Production
19. Sumber Belajar dan Langkah Berikutnya

Panduan ini untuk siapa

• Pembelajar pemula hingga awal menengah yang ingin kemampuan JavaScript praktis
• Siswa, career switcher, dan developer yang berpindah dari bahasa lain
• Pembelajar yang ingin membangun aplikasi web modern dengan TypeScript dan React

Apa yang akan Anda pelajari

• Mengapa JavaScript tetap menjadi bahasa inti web
• Bagaimana TypeScript meningkatkan kepercayaan diri developer dan kualitas kode
• Mengapa React sering dipilih untuk project frontend modern
• Bagaimana JavaScript, TypeScript, dan React saling terhubung dalam satu jalur belajar
• Pendekatan project-per-section yang bisa diikuti dari awal sampai akhir

Mengapa topik ini penting

Banyak pemula mempelajari JavaScript, TypeScript, dan React sebagai topik yang terpisah lalu merasa bingung. Dalam project nyata, ketiganya biasanya dipakai bersama. JavaScript memberi perilaku runtime, TypeScript menambah type safety, dan React membantu menyusun UI.

Bab ini memberi peta besar sebelum masuk ke detail teknis. Dengan memahami “mengapa” sejak awal, setiap bab berikutnya akan terasa lebih terhubung dan tidak terlalu berat.

Konsep inti

Mengapa belajar JavaScript?

JavaScript adalah bahasa default di browser dan salah satu bahasa paling banyak digunakan dalam pengembangan software.

Alasan utama untuk mempelajarinya:

• Berjalan langsung di browser
• Dapat digunakan di server dengan Node.js
• Ekosistem dan peluang kerja sangat luas
• Komunitas serta sumber belajar sangat banyak

Contoh mini (logika browser sederhana):

const learnerName = "Ari";
const goal = "Build web apps";

console.log(`Hi ${learnerName}, your goal is to ${goal}.`);

Expected output:

Hi Ari, your goal is to Build web apps.

Mengapa TypeScript dikenalkan sejak awal?

TypeScript membantu Anda menemukan kesalahan sebelum runtime. Untuk pemula, ini berarti feedback editor lebih jelas dan bug diam-diam bisa berkurang.

Tanpa tipe data, lebih mudah mengirim data yang salah tanpa sadar. Dengan tipe data, tools bisa memperingatkan lebih awal.

Contoh mini (fungsi type-safe):

function formatScore(name: string, score: number): string {
	return `${name}: ${score}`;
}

console.log(formatScore("Nadia", 95));

Expected output:

Nadia: 95

Mengapa React di panduan ini?

React memakai konsep komponen sehingga UI lebih mudah dipahami dan dikembangkan. React juga memiliki ekosistem matang untuk routing, state management, testing, dan deployment.

React bukan satu-satunya pilihan, tetapi menjadi default yang praktis untuk pemula karena:

• Konsepnya relevan untuk banyak posisi frontend
• Tooling dan dokumentasi kuat
• Contoh komunitas mudah ditemukan

Contoh mini (komponen React):

type WelcomeProps = {
	name: string;
};

export function Welcome({ name }: WelcomeProps) {
	return <h1>Welcome, {name}!</h1>;
}

Koneksi JavaScript, TypeScript, dan React

• JavaScript: bahasa inti dan perilaku runtime
• TypeScript: lapisan static typing di atas JavaScript
• React: library UI yang dibangun dengan JavaScript/TypeScript

Alur praktis dalam panduan ini:

1. Pelajari logika JavaScript dan fondasi browser
2. Tambahkan TypeScript untuk kode yang lebih aman
3. Terapkan keduanya pada project React

Panduan langkah demi langkah

Langkah 1 — Tentukan target belajar Anda

Pilih satu hasil konkret untuk 8–12 minggu ke depan.

Contoh:

• Membangun aplikasi React yang siap masuk portfolio
• Belajar frontend sampai siap melamar posisi junior
• Berpindah dari bahasa lain ke pengembangan web

Target yang jelas membantu Anda memilih prioritas dan menghindari distraksi.

Langkah 2 — Pahami gambaran toolchain

Anda belum perlu menguasai setup detail (dibahas di bab 02), tetapi perlu tahu fungsi tiap tools:

• Node.js menjalankan JavaScript di luar browser
• npm/pnpm/yarn mengelola package dan scripts
• TypeScript memeriksa type safety
• React membangun UI berbasis komponen

Langkah 3 — Buat mini project “Tech Path Map”

Buat halaman sederhana (atau catatan markdown) berisi:

• Tujuan belajar Anda
• Skill yang ingin dikuasai sampai akhir panduan
• Jadwal latihan mingguan

Project kecil ini membangun komitmen dan membuat progres lebih terukur.

Contoh praktis

Contoh 1 — Mapping data di JavaScript

const topics = ["JavaScript", "TypeScript", "React"];
const plans = topics.map((topic, index) => `${index + 1}. Learn ${topic}`);

console.log(plans);

Expected output:

[ '1. Learn JavaScript', '2. Learn TypeScript', '3. Learn React' ]

Contoh 2 — Kontrak object di TypeScript

type LearnerPlan = {
	name: string;
	weeklyHours: number;
	focus: "frontend" | "fullstack";
};

const plan: LearnerPlan = {
	name: "Raka",
	weeklyHours: 8,
	focus: "frontend",
};

console.log(`${plan.name} studies ${plan.weeklyHours} hours/week.`);

Expected output:

Raka studies 8 hours/week.

Kesalahan umum dan cara menghindarinya

• Mencoba mempelajari semua framework sekaligus -> Mulai dari satu jalur (TypeScript + React) sampai fundamental kuat.
• Mengabaikan dasar JavaScript -> React jauh lebih mudah jika fungsi, array, object, dan async sudah dipahami.
• Menunda TypeScript terlalu lama -> Kenalkan sejak awal agar kebiasaan coding rapi terbentuk.
• Hanya mengikuti tutorial -> Tambahkan mini project dan ubah fiturnya dengan ide Anda sendiri.

Mini Project

• Buat halaman sederhana “Tech Path Map” yang berisi target belajar, 3 prioritas utama, dan rutinitas belajar mingguan Anda.

Latihan cepat

• Tulis satu paragraf: “Mengapa saya belajar JavaScript sekarang.” Sertakan use case nyata.
• Buat daftar tiga ide aplikasi yang ingin Anda selesaikan sebelum bab 19.
• Jelaskan JavaScript, TypeScript, dan React masing-masing dalam satu kalimat.

Ringkasan utama

• JavaScript sangat penting untuk web development dan berguna di luar browser.
• TypeScript paling efektif dikenalkan sejak awal untuk membangun kebiasaan aman.
• React adalah fondasi UI yang praktis dan relevan di industri.
• Pendekatan project-per-section membantu pemahaman lebih cepat melekat.

Langkah berikutnya

Lanjut ke [02. Instalasi dan Setup Environment]. Di bab berikutnya, Anda akan memasang toolchain, memverifikasi setup, dan menyiapkan alur kerja development yang rapi.