Sign in Subscribe
ReactJs

Cara Cepat Install Create React App untuk Proyek Reactmu

Cara Cepat Install Create React App untuk Proyek Reactmu
Photo by Fili Santillán / Unsplash

React JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna yang dinamis dan cepat. Untuk memulai proyek React dengan cepat dan tanpa konfigurasi manual yang ribet, kita bisa menggunakan Create React App (CRA), sebuah tool resmi dari tim React yang memudahkan pengaturan proyek React dari nol.

Artikel ini akan membahas cara cepat menginstall Create React App, langkah-langkah yang diperlukan, serta bagaimana menjalankan proyek React pertamamu dengan mudah!

1. Apa Itu Create React App?

Create React App (CRA) adalah tool yang dikembangkan oleh tim React untuk membantu developer membuat proyek React dengan struktur yang sudah siap pakai. Dengan CRA, kamu tidak perlu mengatur Webpack, Babel, atau konfigurasi build lainnya secara manual, karena semuanya sudah diatur secara otomatis.

Kelebihan Menggunakan Create React App

✅ Mudah digunakan → Hanya dengan satu perintah, proyek React langsung siap!
✅ Tanpa konfigurasi ribet → Semua pengaturan Webpack dan Babel sudah otomatis tersedia.
✅ Struktur proyek yang rapi dan terorganisir → File dan folder sudah dibuat dengan standar yang baik.
✅ Mendukung pengembangan modern → Sudah mendukung Fast Refresh, TypeScript, dan ESLint.
✅ Kompatibel dengan pustaka lain → Bisa langsung ditambahkan Redux, React Router, atau library lainnya.

2. Persyaratan Sebelum Menginstall Create React App

Sebelum menginstall Create React App, pastikan kamu sudah memiliki Node.js dan npm atau yarn di komputer. Ikuti langkah-langkah berikut:

📌 Cek Versi Node.js dan npm

Buka terminal atau command prompt, lalu jalankan perintah berikut untuk mengecek apakah Node.js sudah terinstal:

node -v

Jika Node.js sudah terinstal, akan muncul versi seperti ini:

v18.16.0

Selanjutnya, cek apakah npm sudah terinstal:

npm -v

Jika npm sudah terinstal, akan muncul versi seperti ini:

9.5.1

Jika Node.js belum terinstal, unduh dan install dari nodejs.org.

3. Cara Install Create React App

Setelah memastikan bahwa Node.js dan npm sudah terinstal, kita bisa mulai menginstall Create React App dengan beberapa cara berikut:

📌 A. Install Menggunakan npx (Disarankan)

Cara paling mudah dan direkomendasikan adalah menggunakan npx. Jalankan perintah berikut di terminal:

npx create-react-app my-app

Keterangan:

  • npx adalah tool bawaan dari npm yang bisa menjalankan paket tanpa perlu menginstallnya secara global.
  • my-app adalah nama folder proyek React yang akan dibuat.

📌 B. Install Menggunakan npm

Alternatif lain, kita bisa menginstall Create React App secara global dengan npm:

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

Namun, metode ini kurang direkomendasikan karena npx memastikan kita selalu menggunakan versi terbaru dari Create React App.

📌 C. Install Menggunakan yarn

Jika kamu lebih suka menggunakan yarn, jalankan perintah berikut:

yarn create react-app my-app

Setelah perintah dijalankan, Create React App akan mengunduh dan mengatur semua file yang dibutuhkan untuk proyek React baru.

4. Struktur Proyek React Setelah Instalasi

Setelah instalasi selesai, buka folder proyek dengan perintah berikut:

cd my-app

Struktur proyek React yang dihasilkan akan terlihat seperti ini:

my-app/
├── node_modules/      # Folder dependensi npm
├── public/            # File publik (index.html, favicon, dll.)
├── src/               # Kode sumber React
│   ├── App.css        # File CSS untuk App.js
│   ├── App.js         # Komponen utama aplikasi
│   ├── index.js       # Entry point aplikasi React
│   ├── index.css      # File CSS utama
│   └── logo.svg       # Logo React
├── .gitignore         # File untuk mengabaikan file saat push ke Git
├── package.json       # File konfigurasi proyek (dependensi, script, dll.)
├── README.md          # Dokumentasi proyek
└── yarn.lock / package-lock.json # File lock untuk dependensi

5. Menjalankan Proyek React Pertama

Setelah Create React App berhasil diinstal, kita bisa menjalankan proyek dengan perintah berikut:

npm start

Atau jika menggunakan yarn:

yarn start

Setelah itu, browser akan otomatis terbuka dan menampilkan halaman default React dengan URL:

http://localhost:3000/

Jika halaman React default berhasil muncul, berarti instalasi sukses!

6. Kapan Harus Menggunakan Create React App?

✅ Gunakan Create React App jika:

  • Baru mulai belajar React dan butuh setup yang mudah.
  • Ingin memulai proyek React dengan cepat tanpa konfigurasi manual.
  • Ingin fokus pada pengembangan fitur, bukan konfigurasi build.

❌ Jangan gunakan Create React App jika:

  • Proyek React perlu rendering di server (gunakan Next.js).
  • Aplikasi React hanya bagian kecil dari proyek besar (gunakan Vite atau Parcel untuk setup yang lebih ringan).
  • Membutuhkan kontrol penuh atas Webpack dan Babel.

7. Kesimpulan

  • Create React App adalah tool yang memudahkan pengembang dalam membuat proyek React tanpa konfigurasi manual.
  • Bisa diinstal menggunakan npx, npm, atau yarn, tetapi npx adalah metode yang paling disarankan.
  • Setelah instalasi, proyek React sudah memiliki struktur yang jelas dan siap digunakan.
  • Dengan hanya satu perintah npm start, aplikasi React sudah bisa dijalankan di browser.

Jika kamu ingin mulai belajar React dengan cara paling cepat dan praktis, Create React App adalah pilihan terbaik!

Read next