Gampang Banget! Cara Setup React.js dengan Create React App

Gampang Banget! Cara Setup React.js dengan Create React App
Photo by Joshua Aragon / Unsplash

Mau mulai belajar React.js tapi bingung harus mulai dari mana? Tenang aja, dengan Create React App, kamu bisa bikin aplikasi React dari nol dengan cepat dan mudah tanpa harus pusing mikirin konfigurasi build tools.

Apa Itu Create React App?

Create React App adalah tool yang dikembangkan oleh tim React untuk membantu developer memulai proyek React tanpa harus repot mengatur konfigurasi seperti Babel, Webpack, dan ESLint. Dengan Create React App, kamu bisa langsung fokus nulis kode React tanpa gangguan.

Persiapan Awal

Sebelum mulai, pastikan kamu sudah menginstal:

  • Node.js: Pastikan versi Node.js di komputermu minimal 14.0.0. Kamu bisa cek versi Node.js dengan perintah node -v di terminal. Jika belum terinstal, download dan install dari situs resmi Node.js.
  • npm: npm biasanya sudah terinstal bersamaan dengan Node.js. Untuk cek versinya, jalankan npm -v di terminal.

Langkah-Langkah Membuat Aplikasi React

Buat Proyek BaruBuka terminal atau command prompt, lalu jalankan perintah berikut untuk membuat proyek baru bernama my-app:

npx create-react-app my-app

Perintah di atas akan mengunduh dan menjalankan Create React App untuk membuat struktur proyek React dasar. Proses ini mungkin memakan waktu beberapa menit tergantung kecepatan internetmu.

  1. Masuk ke Direktori Proyek
    Setelah proses pembuatan selesai, masuk ke direktori proyek dengan perintah:
cd my-app
  1. Jalankan Aplikasi
    Untuk menjalankan aplikasi, gunakan perintah:
npm start

Perintah ini akan menjalankan server pengembangan dan membuka aplikasi di browser pada alamat http://localhost:3000/. Setiap kali kamu melakukan perubahan pada kode, halaman akan otomatis ter-refresh.

Struktur Direktori Proyek

Setelah membuat proyek, kamu akan melihat struktur direktori seperti berikut:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

  • node_modules/: Berisi semua dependensi yang diinstal.
  • public/: Berisi file statis seperti index.html yang menjadi titik masuk aplikasi.
  • src/: Tempat kamu menulis kode React, termasuk komponen dan file JavaScript lainnya.
  • package.json: Berisi metadata proyek dan daftar dependensi yang digunakan.

Menambahkan Komponen Baru

Untuk menambahkan komponen baru, buat file JavaScript baru di dalam folder src/. Misalnya, buat file Hello.js dengan isi:

import React from 'react';

function Hello() {
  return <h1>Hello, World!</h1>;
}

export default Hello;

Kemudian, impor dan gunakan komponen ini di App.js:

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

Setelah itu, simpan perubahan dan lihat hasilnya di browser.

Membangun Aplikasi untuk Produksi

Setelah selesai mengembangkan aplikasi, kamu bisa membangunnya untuk produksi dengan perintah:

npm run build

Perintah ini akan membuat folder build/ yang berisi versi aplikasi yang sudah dioptimalkan dan siap untuk dideploy ke server.

Kesimpulan

Dengan menggunakan Create React App, kamu bisa memulai proyek React dengan cepat tanpa harus pusing mikirin konfigurasi build tools. Setelah setup awal, kamu bisa langsung fokus mengembangkan aplikasi sesuai kebutuhan.

Selamat mencoba dan semoga sukses dalam perjalanan belajarmu dengan React.js!