Sign in Subscribe
ReactJs

Mulai Project React JS dari Nol dengan Panduan Lengkap

Mulai Project React JS dari Nol dengan Panduan Lengkap
Photo by Joshua Aragon / Unsplash

Pengenalan

React JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna (UI) yang cepat, dinamis, dan efisien. Jika kamu baru ingin mulai belajar React atau ingin membuat proyek dari nol, artikel ini akan membimbing kamu langkah demi langkah untuk memulai proyek React dengan benar!

Dalam panduan ini, kita akan membahas:
✅ Instalasi dan persiapan sebelum memulai proyek React.
✅ Cara membuat proyek React pertama dari nol.
✅ Struktur folder dan file dalam proyek React.
✅ Menjalankan proyek dan memahami file utama dalam React.

1. Persiapan Sebelum Memulai Proyek React

Sebelum mulai membuat proyek React, ada beberapa persyaratan yang harus dipenuhi:

📌 A. Instal Node.js dan npm

React membutuhkan Node.js untuk berjalan, karena React menggunakan npm (Node Package Manager) untuk mengelola dependensi.

1️⃣ Cek apakah Node.js sudah terinstal:
Buka terminal atau command prompt dan ketik perintah berikut:

node -v

Jika sudah terinstal, akan muncul versi Node.js, misalnya:

v18.16.0

2️⃣ Cek versi npm:

npm -v

Jika npm sudah terinstal, akan muncul versi seperti ini:

9.5.1

3️⃣ Jika belum ada, install Node.js dari nodejs.org Pilih versi LTS (Long Term Support) agar lebih stabil.

2. Membuat Proyek React Baru

Setelah Node.js terinstal, kita bisa langsung membuat proyek React menggunakan Create React App (CRA), tool resmi dari React yang membuat proyek React siap digunakan tanpa perlu konfigurasi tambahan.

📌 A. Membuat Proyek React dengan npx

Cara paling cepat dan disarankan adalah menggunakan npx, karena kita bisa langsung membuat proyek tanpa menginstall paket tambahan:

npx create-react-app my-app

Keterangan:

  • npx adalah perintah untuk menjalankan Create React App tanpa menginstalnya terlebih dahulu.
  • my-app adalah nama folder proyek React yang akan dibuat.

Setelah menjalankan perintah di atas, React akan mengunduh semua dependensi dan menyiapkan proyek baru.

📌 B. Alternatif dengan npm atau yarn

Jika ingin menggunakan npm atau yarn, bisa dengan cara berikut:

npm install -g create-react-app
create-react-app my-app

Atau jika menggunakan yarn:

yarn create react-app my-app

Tunggu beberapa saat hingga proses instalasi selesai. Setelah itu, masuk ke folder proyek dengan perintah:

cd my-app

3. Struktur Folder dalam Proyek React

Setelah proyek React dibuat, akan ada beberapa folder dan file di dalamnya. Berikut struktur dasarnya:

my-app/
├── 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
│   ├── App.css        # File CSS untuk styling
│   ├── index.css      # File CSS utama
├── .gitignore         # File untuk mengabaikan file tertentu di Git
├── package.json       # File konfigurasi proyek
├── README.md          # Dokumentasi proyek
└── yarn.lock/package-lock.json # File lock untuk dependensi

📌 Penjelasan:

  • public/ → Folder yang berisi file publik seperti index.html.
  • src/ → Tempat semua kode utama React, termasuk komponen dan styling.
  • node_modules/ → Folder yang berisi semua dependensi proyek React.
  • package.json → File konfigurasi proyek yang mencatat semua dependensi yang digunakan.

4. Menjalankan Proyek React

Setelah semua terinstal, saatnya menjalankan proyek React pertama kamu!

📌 Jalankan Perintah Berikut:

npm start

Atau jika menggunakan yarn:

yarn start

Setelah perintah dijalankan, browser akan otomatis terbuka dengan URL:

http://localhost:3000/

Dan akan muncul tampilan React default seperti ini:

React Default

Jika kamu melihat halaman ini, selamat! Kamu berhasil menjalankan proyek React pertama. 🎉

5. Memahami File Utama dalam Proyek React

Saat pertama kali membuka kode di src/, ada beberapa file utama yang perlu kamu pahami:

📌 App.js → File utama untuk UI aplikasi React

import React from 'react';

function App() {
  return (
    <div>
      <h1>Halo, Selamat Datang di React!</h1>
    </div>
  );
}

export default App;

📌 index.js → File utama yang merender App.js ke browser

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

File ini akan mencari elemen dengan ID root di index.html dan merender aplikasi React di dalamnya.d

6. Kapan Harus Menggunakan React?

✅ Gunakan React jika:

  • Kamu ingin membangun UI yang interaktif dan dinamis.
  • Membutuhkan state management untuk mengelola data dengan lebih baik.
  • Ingin membangun aplikasi web yang bisa di-reuse dengan komponen.
  • Ingin menggunakan teknologi modern dan scalable.

❌ Jangan gunakan React jika:

  • Hanya ingin membuat website statis yang tidak memerlukan banyak interaksi.
  • Tidak ingin menggunakan JavaScript sebagai bahasa utama.

7. Kesimpulan

  • React JS adalah library frontend populer yang digunakan untuk membangun antarmuka pengguna yang dinamis dan cepat.
  • Create React App adalah cara termudah untuk memulai proyek React tanpa perlu konfigurasi manual.
  • Setelah instalasi, proyek sudah memiliki struktur file yang siap digunakan.
  • Menjalankan proyek cukup dengan perintah npm start, dan React akan terbuka di browser secara otomatis.

Sekarang kamu sudah siap untuk mulai membangun proyek React pertamamu!

Read next