Sign in Subscribe
ReactJs

Hello React Langkah Pertama dalam Dunia React JS

Hello React Langkah Pertama dalam Dunia React JS
Photo by Joan Gamell / Unsplash

React JS adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif dan dinamis. Dikembangkan oleh Facebook (sekarang Meta), React telah menjadi salah satu teknologi frontend paling populer yang digunakan oleh perusahaan besar seperti Netflix, Airbnb, dan Instagram.

Jika kamu baru mulai belajar React, artikel ini akan membimbing langkah pertama kamu untuk memahami konsep dasar React dan membuat proyek pertama dengan mudah.

1. Kenapa Harus Belajar React?

React memiliki beberapa keunggulan yang membuatnya sangat populer di kalangan developer:

✅ Berbasis Komponen – UI dibangun dengan komponen yang bisa digunakan kembali, membuat pengembangan lebih efisien.
✅ Virtual DOM – React mempercepat rendering dengan menggunakan Virtual DOM untuk mengurangi interaksi langsung dengan DOM asli.
✅ Deklaratif & Mudah Dipahami – Developer hanya fokus pada bagaimana UI harus terlihat, bukan bagaimana membangunnya dari nol.
✅ Ekosistem Besar – Banyak library pendukung yang bisa digunakan untuk mempercepat pengembangan aplikasi.
✅ Digunakan oleh Perusahaan Besar – Menjadi pilihan utama untuk membangun UI aplikasi berskala besar.

2. Persiapan Sebelum Memulai React

Sebelum mulai belajar React, ada beberapa hal yang perlu dipersiapkan:

📌 A. Install Node.js

React membutuhkan Node.js untuk mengelola dependensi dan menjalankan aplikasi. Jika belum menginstal, unduh dari nodejs.org.

📌 B. Cek Versi Node.js dan npm

Buka terminal atau command prompt dan jalankan perintah berikut:

node -v
npm -v

Pastikan kamu memiliki Node.js versi terbaru agar React bisa berjalan dengan baik.

📌 C. Install Create React App

Cara termudah untuk memulai proyek React adalah menggunakan Create React App (CRA). Jalankan perintah berikut:

npx create-react-app hello-react
cd hello-react

Setelah itu, proyek React akan otomatis terinstal dengan struktur yang sudah siap digunakan.

3. Struktur Proyek React

Setelah instalasi, buka folder proyek dengan perintah:

cd hello-react

Struktur proyek akan terlihat seperti ini:

hello-react/
├── node_modules/    # Folder dependensi npm
├── public/          # File statis seperti index.html
├── src/             # Sumber kode utama React
│   ├── App.js       # Komponen utama aplikasi
│   ├── index.js     # Entry point React
├── package.json     # File konfigurasi proyek
└── README.md        # Dokumentasi proyek

📌 File Utama yang Perlu Diketahui

  • App.js → Komponen utama yang akan dirender ke dalam halaman.
  • index.js → Tempat merender App.js ke dalam elemen root di HTML.

4. Menjalankan Proyek React

Setelah proyek berhasil dibuat, jalankan perintah berikut untuk menjalankan server pengembangan:

npm start

Setelah itu, React akan otomatis membuka browser di http://localhost:3000/ dan menampilkan tampilan awal React seperti ini:

React Default

Jika halaman ini muncul, selamat! Kamu telah berhasil menjalankan proyek React pertama! 🎉

5. Membuat Komponen Pertama di React

Sekarang, mari kita buat komponen sederhana di App.js untuk menampilkan pesan "Hello React!".

📌 Edit App.js

Buka src/App.js dan ubah kodenya menjadi seperti ini:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React! 🎉</h1>
      <p>Selamat datang di dunia React. Ayo mulai belajar!</p>
    </div>
  );
}

export default App;

Simpan file, lalu lihat hasilnya di browser. React akan otomatis melakukan hot reload untuk memperbarui tampilan tanpa perlu refresh manual.

6. Konsep Dasar React yang Harus Dipahami

Sebelum melangkah lebih jauh, ada beberapa konsep penting dalam React yang perlu kamu ketahui:

📌 A. JSX (JavaScript XML)

JSX adalah sintaks yang digunakan dalam React untuk menulis struktur UI mirip HTML di dalam JavaScript.

const element = <h1>Halo, React!</h1>;

JSX bukan HTML, tetapi dikompilasi menjadi JavaScript menggunakan Babel.

📌 B. Komponen dalam React

React menggunakan konsep komponen untuk membangun UI yang modular.

  • Function Component → Komponen berbasis fungsi, lebih ringan dan mudah digunakan.
  • Class Component → Komponen berbasis class, lebih kompleks dan mendukung state.

Contoh function component:

function Greeting() {
  return <h1>Selamat Datang di React!</h1>;
}

📌 C. State dan Props

  • State digunakan untuk menyimpan data yang bisa berubah.
  • Props digunakan untuk mengirim data dari satu komponen ke komponen lain.

Contoh penggunaan state:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Jumlah klik: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

7. Kapan Harus Menggunakan React?

✅ Gunakan React jika:

  • Ingin membangun UI yang dinamis dan interaktif.
  • Membutuhkan komponen reusable untuk proyek besar.
  • Ingin bekerja dengan state management yang fleksibel.
  • Membutuhkan performa tinggi dengan Virtual DOM.

❌ Tidak perlu menggunakan React jika:

  • Hanya membuat website statis tanpa interaksi.
  • Tidak ingin menggunakan JavaScript sebagai bahasa utama.

8. Kesimpulan

  • React JS adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna yang cepat dan modular.
  • Instalasi React sangat mudah dengan Create React App, cukup dengan satu perintah.
  • Komponen adalah inti dari React, memungkinkan kita membangun UI yang reusable dan fleksibel.
  • State dan Props adalah konsep utama yang memungkinkan data berubah secara dinamis di dalam aplikasi React.
  • Setelah mengikuti tutorial ini, kamu sudah bisa menjalankan proyek React pertama dan memahami konsep dasarnya.

Sekarang, kamu siap untuk menjelajahi lebih dalam dunia React!

Read next