Di dunia pengembangan web modern, ada satu teknologi yang hampir selalu muncul dalam percakapan para developer frontend: React. Bagi banyak programmer, React bukan sekadar library JavaScript biasa. Ia sudah menjadi fondasi dari ribuan aplikasi web modern yang kita gunakan setiap hari.

Jika Authemers pernah membuka aplikasi seperti dashboard startup, platform SaaS, atau bahkan aplikasi sosial media di browser, kemungkinan besar teknologi di balik tampilan interaktif tersebut melibatkan React.

React sendiri dikembangkan oleh para engineer di Meta Platforms dan pertama kali dirilis ke publik pada tahun 2013. Sejak saat itu, React berkembang sangat cepat dan menjadi salah satu teknologi paling dominan dalam dunia frontend development.

Library ini bahkan menjadi tulang punggung bagi banyak produk digital besar seperti Instagram, Netflix, hingga berbagai startup teknologi modern.

Namun bagi pemula, React sering terasa sedikit membingungkan. Banyak istilah baru yang muncul: JSX, component, props, state, hooks, dan sebagainya. Tidak sedikit developer yang merasa React tampak kompleks sebelum benar-benar memahami cara kerjanya.

Padahal jika dipelajari dengan pendekatan yang benar, React sebenarnya sangat logis dan menyenangkan.

Di seri tutorial ini, kita akan belajar React JS dari nol, secara bertahap dan dengan gaya santai khas Authemic Labs. Tujuannya bukan sekadar memahami teori, tetapi benar-benar mengerti bagaimana React digunakan untuk membangun aplikasi web modern.

Bab pertama ini akan menjadi fondasi penting sebelum kita mulai menulis kode React yang sebenarnya.

Mengapa React Sangat Populer di Dunia Developer

Sebelum kita mulai menginstal React, ada baiknya memahami terlebih dahulu mengapa teknologi ini begitu populer.

Pada masa awal web development, developer biasanya membuat website menggunakan kombinasi HTML, CSS, dan JavaScript biasa. Metode ini cukup efektif untuk website kecil, tetapi ketika aplikasi mulai membesar, kode sering kali menjadi sulit dipelihara.

Bayangkan sebuah aplikasi dashboard yang memiliki puluhan halaman, ratusan komponen UI, dan berbagai interaksi pengguna. Jika semuanya ditulis dalam JavaScript biasa tanpa struktur yang jelas, kode akan cepat menjadi berantakan.

Di sinilah React menawarkan pendekatan yang berbeda.

React memperkenalkan konsep component-based architecture. Artinya, tampilan sebuah aplikasi tidak lagi ditulis sebagai satu blok kode besar, tetapi dipecah menjadi komponen-komponen kecil yang saling terhubung.

Sebagai contoh, sebuah halaman website mungkin terdiri dari beberapa bagian:

header di bagian atas, menu navigasi, konten utama, sidebar, dan footer. Dalam React, setiap bagian ini bisa dibuat sebagai komponen terpisah.

Dengan cara ini, developer bisa membangun antarmuka aplikasi seperti menyusun potongan lego. Setiap komponen memiliki fungsi yang jelas dan bisa digunakan kembali di bagian lain aplikasi.

Pendekatan ini membuat kode menjadi lebih rapi, mudah dipelihara, dan jauh lebih scalable ketika aplikasi berkembang.

Selain itu React juga menggunakan teknologi yang disebut Virtual DOM. Konsep ini memungkinkan React memperbarui tampilan halaman secara lebih efisien tanpa harus merender ulang seluruh halaman setiap kali ada perubahan.

Hasilnya adalah aplikasi web yang terasa jauh lebih responsif dan cepat.

React Bukan Framework

Salah satu hal yang sering membuat pemula bingung adalah status React itu sendiri. Banyak orang menyebut React sebagai framework, padahal sebenarnya React adalah library JavaScript.

Perbedaan antara library dan framework cukup penting.

Framework biasanya menyediakan sistem lengkap untuk membangun aplikasi, mulai dari routing, state management, hingga struktur proyek.

React sendiri hanya fokus pada satu hal utama: membangun user interface.

Untuk fitur lain seperti navigasi halaman atau manajemen state global, developer biasanya menggunakan library tambahan seperti React Router atau berbagai solusi state management yang tersedia dalam ekosistem React.

Pendekatan ini membuat React menjadi sangat fleksibel. Developer bisa memilih tools yang paling sesuai dengan kebutuhan proyek mereka.

Apa yang Harus Dikuasai Sebelum Belajar React

Sebelum benar-benar masuk ke React, ada beberapa keterampilan dasar yang sebaiknya sudah dimiliki.

React dibangun di atas JavaScript modern, sehingga pemahaman dasar JavaScript menjadi sangat penting.

Setidaknya Authemers sudah familiar dengan konsep seperti fungsi, array, object, dan arrow function. Pengetahuan dasar HTML dan CSS juga diperlukan karena React pada akhirnya tetap menghasilkan tampilan web di browser.

Jika tiga fondasi ini sudah cukup dipahami, belajar React akan terasa jauh lebih mudah.

Cara Install React JS di Windows dan Linux

Sebelum Authemers mulai menulis baris kode React pertama, ada satu tahap penting yang tidak boleh dilewatkan: menyiapkan lingkungan development di komputer.

React sendiri sebenarnya bukan program yang bisa langsung diinstall seperti aplikasi biasa. React berjalan di atas ekosistem JavaScript modern yang membutuhkan beberapa alat tambahan agar proses development bisa berjalan lancar.

Minimal ada tiga komponen utama yang perlu dipasang terlebih dahulu:

1. runtime JavaScript
2. package manager
3. code editor

Untungnya, semua kebutuhan tersebut bisa dipenuhi dengan satu instalasi utama yaitu Node.js.

Node.js adalah runtime JavaScript yang memungkinkan kode JavaScript dijalankan di luar browser. Node juga membawa npm (Node Package Manager) yang digunakan untuk menginstall berbagai library JavaScript termasuk React.

Setelah Node terpasang, kita bisa membuat proyek React dengan sangat cepat menggunakan tool modern seperti Vite.

Mari kita mulai dari instalasi di dua sistem operasi paling umum yang digunakan developer: Windows dan Linux.

Install React di Windows

Banyak developer frontend memulai perjalanan mereka menggunakan Windows. Kabar baiknya, instalasi React di Windows sangat sederhana.

Langkah pertama adalah menginstall Node.js.

Buka browser dan kunjungi situs resmi Node.js.

Unduh versi LTS (Long Term Support) karena versi ini paling stabil untuk development.

Setelah file installer selesai diunduh, jalankan installer tersebut seperti menginstall aplikasi Windows biasa.

Biasanya proses instalasi hanya membutuhkan beberapa klik:

Next → Next → Install.

Node akan otomatis menginstall dua komponen penting sekaligus:

• Node.js
• npm

Setelah instalasi selesai, buka Command Prompt atau PowerShell lalu jalankan perintah berikut untuk memastikan Node sudah terpasang dengan benar.

node -v

Jika instalasi berhasil, terminal akan menampilkan nomor versi Node, misalnya:

v20.11.0

Selanjutnya cek npm dengan perintah berikut.

npm -v

Jika muncul nomor versi npm, berarti lingkungan Node sudah siap digunakan.

Langkah berikutnya adalah membuat proyek React.

Saat ini metode yang direkomendasikan adalah menggunakan Vite, sebuah build tool modern yang sangat cepat dan ringan.

Untuk membuat proyek React baru, jalankan perintah berikut di terminal:

npm create vite@latest belajar-react

Terminal akan menanyakan beberapa pilihan konfigurasi proyek. Pilih framework:

React

Kemudian pilih bahasa:

JavaScript

Setelah proses pembuatan proyek selesai, masuk ke folder proyek tersebut. Ketik atau Copy perintah berikut untuk masuk ke folder belajar-react

cd belajar-react

Setelah masuk ke proyek, selanjutnya kita akan Install semua dependency yang diperlukan.

npm install

Proses ini akan mengunduh berbagai library yang diperlukan agar React dapat berjalan dan biasanya membutuhkan beberapa menit tergantung kondisi jaringan.

Setelah instalasi selesai, jalankan server development dengan perintah berikut.

npm run dev

Terminal akan menampilkan alamat lokal seperti ini: http://localhost:5173

Buka alamat tersebut di browser. Jika halaman React muncul, berarti instalasi berhasil dan Authemers sudah siap mulai belajar React.

Install React di Linux (Ubuntu, Debian, dan Turunannya)

Bagi developer yang menggunakan Linux seperti Ubuntu atau Debian, proses instalasi React biasanya bahkan lebih cepat karena banyak tools developer sudah tersedia langsung dari terminal.

Langkah pertama adalah memastikan sistem Linux sudah memiliki Node.js.

Cara paling aman adalah menggunakan repository resmi NodeSource.

Buka terminal (CTRL+Alt+T) lalu jalankan perintah berikut.

sudo apt update

Kemudian install Node.js.

sudo apt install nodejs npm

Setelah proses instalasi selesai, cek apakah Node sudah terpasang dengan benar.

node -v

Jika kedua perintah tersebut menampilkan nomor versi, berarti Node sudah siap digunakan.

Langkah berikutnya sama seperti di Windows: membuat proyek React menggunakan Vite.

Jalankan perintah berikut.

npm create vite@latest belajar-react

Pilih template React dan bahasa JavaScript. Setelah proyek selesai dibuat, masuk ke folder proyek.

cd belajar-react

Kemudian install dependency.

npm install

Setelah semua library terpasang, jalankan server development.

npm run dev

Terminal akan menampilkan alamat localhost tempat aplikasi React berjalan. Buka alamat tersebut di browser dan React siap digunakan.

Editor yang Direkomendasikan untuk React

Setelah lingkungan development siap, langkah berikutnya adalah memilih editor kode.

Sebagian besar developer React menggunakan:

Visual Studio Code

Editor ini sangat populer karena:

• ringan
• banyak extension
• mendukung hampir semua bahasa pemrograman

Untuk development React, ada beberapa extension yang sangat membantu:

ES7 React Snippets untuk mempercepat penulisan komponen React.

Prettier untuk merapikan format kode secara otomatis.

Auto Rename Tag agar perubahan tag HTML lebih mudah.

Dengan kombinasi Node.js, npm, dan Visual Studio Code, Authemers sudah memiliki lingkungan development yang lengkap untuk belajar React.

Struktur Folder Proyek React Pertama

Setelah proyek React berhasil dibuat menggunakan Vite, biasanya kita akan melihat struktur folder seperti berikut:

belajar-react
│
├── node_modules
├── public
├── src
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
│
├── package.json
└── vite.config.js

Folder src adalah tempat sebagian besar kode React ditulis.

File App.jsx biasanya menjadi komponen utama yang akan ditampilkan pertama kali di browser.

Sementara main.jsx berfungsi sebagai titik masuk aplikasi React.

Memahami struktur ini akan memudahkan Authemers ketika mulai membuat komponen React sendiri.

React Siap Digunakan

Pada titik ini, Authemers sebenarnya sudah berhasil menyelesaikan salah satu langkah penting dalam perjalanan belajar React: menyiapkan lingkungan development dan menjalankan aplikasi React pertama.

Sekarang React sudah berjalan di komputer lokal, dan kita bisa mulai bereksperimen dengan berbagai konsep yang membuat React begitu powerful.

Di bab berikutnya kita akan masuk ke salah satu fitur paling khas dalam React yang sering membuat pemula penasaran: JSX.

JSX memungkinkan developer menulis struktur tampilan yang terlihat seperti HTML langsung di dalam JavaScript, sebuah pendekatan yang awalnya terasa aneh tetapi justru menjadi salah satu kekuatan terbesar React.