5 Contoh Penggunaan useState Pada Projek Website Booking Flight Ticket

useState adalah salah satu hooks yang sangat bermanfaat dalam framework React. Dengan menggunakan useState, developer dapat mengelola state atau keadaan di dalam komponen React dengan lebih efisien. Hal ini sangat membantu dalam membangun website modern yang dinamis, serta meningkatkan user experience (UX).

Ketika developer ingin membuat komponen yang dapat merespon input pengguna atau perubahan data secara real-time, useState menjadi alat yang sangat tepat untuk digunakan.

Menerapkan useState dalam Projek Booking Flight Ticket

Dalam artikel ini, kita akan belajar cara menerapkan useState pada sebuah projek website booking flight ticket. Dengan menerapkan useState, kita dapat mengelola berbagai data dan interaksi pengguna, seperti memilih kota asal dan tujuan penerbangan, tanggal keberangkatan, jumlah penumpang, serta proses konfirmasi tiket.

Penggunaan useState pada website booking semacam ini tidak hanya membuat website lebih interaktif, tetapi juga memudahkan pengguna untuk melakukan reservasi secara lebih intuitif.

Tujuan dari artikel ini adalah memberikan gambaran umum tentang bagaimana useState dapat diterapkan pada projek nyata. Contoh-contoh yang dibahas akan menunjukkan penerapan praktis useState, sehingga Anda bisa lebih memahami cara penggunaannya dalam pengembangan aplikasi booking flight ticket.

Cara Membuat Project React Booking Flight Ticket dengan Vite dan Menggunakan TypeScript

Pada bagian ini, kita akan membahas cara membuat project React dengan Vite dan TypeScript yang berfungsi sebagai sistem booking flight ticket. Setiap langkah diberikan dengan contoh koding yang jelas untuk memudahkan Anda mengikuti prosesnya.

1. Instalasi Vite dengan TypeScript

Langkah pertama dalam membuat project React adalah menginstal Vite dengan template TypeScript. Buka terminal dan jalankan perintah berikut:

npm create vite@latest

Saat diminta, berikan nama project, misalnya flight-booking-app, dan pilih React sebagai framework, lalu pilih TypeScript sebagai varian.

Masuk ke direktori project dengan:

cd flight-booking-app
npm install

Setelah itu, jalankan project dengan perintah:

npm run dev

Project Anda sekarang sudah berjalan dengan React dan TypeScript menggunakan Vite.

2. Struktur Folder Project

Struktur folder yang dihasilkan oleh Vite sudah sangat ringkas. Folder src akan menjadi tempat Anda menyimpan komponen dan file lainnya. Berikut struktur dasarnya:

flight-booking-app
│
├── src
│   ├── components
│   │   └── BookingForm.tsx
│   └── App.tsx
├── public
└── index.html

Folder components akan digunakan untuk menyimpan komponen yang kita buat, seperti formulir booking penerbangan.

3. Membuat Komponen BookingForm

Langkah berikutnya adalah membuat komponen BookingForm yang akan mengelola form booking penerbangan. Buat file baru di dalam folder components dengan nama BookingForm.tsx dan tambahkan kode berikut:

import React, { useState } from 'react';

interface BookingFormProps {}

const BookingForm: React.FC<BookingFormProps> = () => {
  const [departure, setDeparture] = useState('');
  const [destination, setDestination] = useState('');
  const [date, setDate] = useState('');
  const [passengers, setPassengers] = useState(1);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log({
      departure,
      destination,
      date,
      passengers,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Departure City:</label>
        <input
          type="text"
          value={departure}
          onChange={(e) => setDeparture(e.target.value)}
        />
      </div>
      <div>
        <label>Destination City:</label>
        <input
          type="text"
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
        />
      </div>
      <div>
        <label>Date of Flight:</label>
        <input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
      <div>
        <label>Number of Passengers:</label>
        <input
          type="number"
          value={passengers}
          onChange={(e) => setPassengers(parseInt(e.target.value))}
          min="1"
        />
      </div>
      <button type="submit">Book Flight</button>
    </form>
  );
};

export default BookingForm;

Komponen ini membuat form sederhana untuk booking penerbangan yang melibatkan input untuk kota keberangkatan, kota tujuan, tanggal, dan jumlah penumpang. Setiap input diatur menggunakan useState untuk menyimpan nilai yang dimasukkan pengguna.

4. Menghubungkan BookingForm ke App.tsx

Buka file App.tsx di dalam folder src dan impor komponen BookingForm. Berikut adalah contoh kodingnya:

import React from 'react';
import BookingForm from './components/BookingForm';

const App: React.FC = () => {
  return (
    <div>
      <h1>Flight Ticket Booking</h1>
      <BookingForm />
    </div>
  );
};

export default App;

Pada file ini, kita mengimpor komponen BookingForm dan menampilkannya di dalam komponen App. Komponen BookingForm kini dapat digunakan untuk mengelola input pengguna.

5. Menjalankan Project

Setelah semua kode diimplementasikan, Anda dapat menjalankan project dan melihat bagaimana form booking penerbangan bekerja. Pastikan terminal Anda tetap terbuka, dan jalankan kembali perintah berikut:

npm run dev

Buka browser Anda dan kunjungi URL yang diberikan oleh Vite, biasanya di http://localhost:5173. Di sana, Anda akan melihat halaman form booking penerbangan, dan data yang Anda masukkan akan tercatat di console browser ketika Anda mengklik tombol Book Flight.

Cara Membuat types.ts dan Data Dummy untuk Projek Website Booking Flight Ticket

Dalam pembuatan projek React dengan TypeScript, penting untuk mendefinisikan tipe data yang digunakan agar mempermudah dalam mengelola state dan memastikan konsistensi data di seluruh aplikasi. Di sini kita akan membuat file types.ts yang berisi tipe data untuk form booking penerbangan, dan juga file data dummy untuk simulasi data penerbangan.

1. Membuat File types.ts

Pertama, buat sebuah file bernama types.ts di dalam folder src. File ini akan berfungsi untuk mendefinisikan tipe data yang digunakan dalam projek. Berikut adalah contoh kode yang bisa dimasukkan ke dalam types.ts:

export interface FlightTicket {
  id: number;
  departure: string;
  destination: string;
  date: string;
  passengers: number;
}

export interface City {
  id: number;
  name: string;
}

Pada contoh di atas, kita membuat dua interface, yaitu FlightTicket yang digunakan untuk mendefinisikan data dari tiket penerbangan, dan City untuk daftar kota yang tersedia.

2. Membuat Data Dummy

Setelah mendefinisikan tipe data di types.ts, langkah berikutnya adalah membuat file data dummy yang berisi contoh data penerbangan dan daftar kota. Buat file baru bernama dummyData.ts di dalam folder src dan tambahkan data dummy berikut:

import { FlightTicket, City } from './types';

export const flightTickets: FlightTicket[] = [
  {
    id: 1,
    departure: 'Jakarta',
    destination: 'Bali',
    date: '2024-11-01',
    passengers: 2,
  },
  {
    id: 2,
    departure: 'Surabaya',
    destination: 'Lombok',
    date: '2024-11-05',
    passengers: 1,
  },
  {
    id: 3,
    departure: 'Medan',
    destination: 'Jakarta',
    date: '2024-11-10',
    passengers: 4,
  },
];

export const cities: City[] = [
  {
    id: 1,
    name: 'Jakarta',
  },
  {
    id: 2,
    name: 'Bali',
  },
  {
    id: 3,
    name: 'Surabaya',
  },
  {
    id: 4,
    name: 'Lombok',
  },
  {
    id: 5,
    name: 'Medan',
  },
];

File dummyData.ts ini berisi array flightTickets yang berisi data penerbangan, dan array cities yang berisi daftar kota asal dan tujuan penerbangan. Dengan data dummy ini, Anda dapat menggunakannya untuk mensimulasikan input atau pilihan kota dalam form booking di aplikasi.

3. Menggunakan Data Dummy di Komponen

Sekarang, kita bisa menggunakan data dummy ini di komponen React kita, khususnya pada komponen BookingForm yang sudah dibuat sebelumnya. Berikut adalah contoh cara mengimpor dan menggunakan data tersebut di dalam komponen:

import React, { useState } from 'react';
import { cities } from '../dummyData';

const BookingForm: React.FC = () => {
  const [departure, setDeparture] = useState('');
  const [destination, setDestination] = useState('');
  const [date, setDate] = useState('');
  const [passengers, setPassengers] = useState(1);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log({
      departure,
      destination,
      date,
      passengers,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Departure City:</label>
        <select value={departure} onChange={(e) => setDeparture(e.target.value)}>
          <option value="">Select City</option>
          {cities.map((city) => (
            <option key={city.id} value={city.name}>
              {city.name}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Destination City:</label>
        <select
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
        >
          <option value="">Select City</option>
          {cities.map((city) => (
            <option key={city.id} value={city.name}>
              {city.name}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Date of Flight:</label>
        <input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
      <div>
        <label>Number of Passengers:</label>
        <input
          type="number"
          value={passengers}
          onChange={(e) => setPassengers(parseInt(e.target.value))}
          min="1"
        />
      </div>
      <button type="submit">Book Flight</button>
    </form>
  );
};

export default BookingForm;

Pada contoh di atas, data dummy cities diimpor dari dummyData.ts dan digunakan untuk mengisi pilihan kota pada input select di form booking. Ini membuat form lebih dinamis dengan daftar kota yang tersedia untuk dipilih pengguna.

5 Contoh Penerapan useState Pada Projek Website Booking Flight Ticket

Pada bagian ini, kita akan membahas beberapa contoh penerapan useState dari yang paling sederhana hingga yang lebih kompleks pada sebuah projek booking flight ticket. Setiap contoh dilengkapi dengan penjelasan dan contoh kode.

1. Mengelola Input Teks Sederhana dengan useState

Pada kasus sederhana, kita dapat menggunakan useState untuk mengelola input teks dari pengguna. Misalnya, input untuk kota keberangkatan dan tujuan penerbangan.

import React, { useState } from 'react';

const BookingForm: React.FC = () => {
  const [departure, setDeparture] = useState('');
  const [destination, setDestination] = useState('');

  return (
    <form>
      <div>
        <label>Departure City:</label>
        <input
          type="text"
          value={departure}
          onChange={(e) => setDeparture(e.target.value)}
        />
      </div>
      <div>
        <label>Destination City:</label>
        <input
          type="text"
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
        />
      </div>
    </form>
  );
};

export default BookingForm;

Pada contoh ini, useState digunakan untuk menyimpan nilai dari input teks yang diambil dari pengguna. Ketika pengguna mengetik, nilai state diperbarui secara real-time.

2. Mengelola Input dengan Tipe Data Angka

Selain mengelola input teks, useState juga dapat digunakan untuk mengelola input dengan tipe data angka, seperti jumlah penumpang.

import React, { useState } from 'react';

const BookingForm: React.FC = () => {
  const [passengers, setPassengers] = useState(1);

  return (
    <form>
      <div>
        <label>Number of Passengers:</label>
        <input
          type="number"
          value={passengers}
          onChange={(e) => setPassengers(parseInt(e.target.value))}
          min="1"
        />
      </div>
    </form>
  );
};

export default BookingForm;

Pada contoh ini, useState digunakan untuk menyimpan jumlah penumpang, yang dimasukkan melalui input bertipe angka (number). Nilai yang diinput akan diubah menjadi integer menggunakan parseInt.

3. Mengelola Pilihan Kota dengan Dropdown

Berikut adalah contoh yang lebih kompleks, di mana kita menggunakan useState untuk mengelola pilihan kota menggunakan dropdown (select).

import React, { useState } from 'react';

const cities = ['Jakarta', 'Bali', 'Surabaya', 'Lombok'];

const BookingForm: React.FC = () => {
  const [departure, setDeparture] = useState('');
  const [destination, setDestination] = useState('');

  return (
    <form>
      <div>
        <label>Departure City:</label>
        <select value={departure} onChange={(e) => setDeparture(e.target.value)}>
          <option value="">Select City</option>
          {cities.map((city) => (
            <option key={city} value={city}>
              {city}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label>Destination City:</label>
        <select
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
        >
          <option value="">Select City</option>
          {cities.map((city) => (
            <option key={city} value={city}>
              {city}
            </option>
          ))}
        </select>
      </div>
    </form>
  );
};

export default BookingForm;

Pada contoh ini, useState digunakan untuk mengelola pilihan kota dari dropdown. Setiap kali pengguna memilih kota, nilai state akan diperbarui sesuai pilihan mereka.

4. Mengelola Tanggal Penerbangan dengan useState

Penggunaan useState juga sangat membantu untuk mengelola input dengan tipe date, seperti tanggal penerbangan.

import React, { useState } from 'react';

const BookingForm: React.FC = () => {
  const [date, setDate] = useState('');

  return (
    <form>
      <div>
        <label>Date of Flight:</label>
        <input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
    </form>
  );
};

export default BookingForm;

Pada contoh ini, useState mengelola input dengan tipe date. Ketika pengguna memilih tanggal, nilai state diperbarui dengan format string tanggal.

5. Mengelola Beberapa State Secara Bersamaan dan Mengirim Data

Contoh berikut menggabungkan beberapa state sekaligus untuk mengelola seluruh data form dan menampilkan hasil input pengguna ketika form dikirim (submit).

import React, { useState } from 'react';

const BookingForm: React.FC = () => {
  const [departure, setDeparture] = useState('');
  const [destination, setDestination] = useState('');
  const [date, setDate] = useState('');
  const [passengers, setPassengers] = useState(1);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log({
      departure,
      destination,
      date,
      passengers,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Departure City:</label>
        <input
          type="text"
          value={departure}
          onChange={(e) => setDeparture(e.target.value)}
        />
      </div>
      <div>
        <label>Destination City:</label>
        <input
          type="text"
          value={destination}
          onChange={(e) => setDestination(e.target.value)}
        />
      </div>
      <div>
        <label>Date of Flight:</label>
        <input
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
      <div>
        <label>Number of Passengers:</label>
        <input
          type="number"
          value={passengers}
          onChange={(e) => setPassengers(parseInt(e.target.value))}
          min="1"
        />
      </div>
      <button type="submit">Book Flight</button>
    </form>
  );
};

export default BookingForm;

Pada contoh ini, kita menggabungkan beberapa state (departure, destination, date, dan passengers) dan mengirimkan seluruh data ketika form disubmit. Setelah pengguna mengisi semua input, data akan dikirim dan ditampilkan di console sebagai objek.

Poin Penting Lanjutan dalam Memperdalam Framework React JS

Setelah memahami dasar-dasar React seperti useState, ada beberapa konsep lanjutan yang penting untuk dipelajari guna memperdalam pemahaman dan keterampilan dalam menggunakan framework React JS.

1. useEffect

useEffect adalah hooks yang digunakan untuk mengelola efek samping (side effects) dalam komponen React, seperti fetching data dari API, berinteraksi dengan browser API (misalnya localStorage), atau mengatur timer. Dengan mempelajari useEffect, Anda dapat memahami cara kerja lifecycle komponen React dan kapan harus menjalankan kode tertentu.

2. Context API

Context API membantu dalam mengelola state global yang dapat diakses oleh banyak komponen tanpa perlu menggunakan props drilling (mengoper props dari komponen induk ke komponen anak). Ini sangat berguna ketika Anda bekerja dengan data yang perlu diakses di banyak bagian aplikasi, seperti data pengguna yang sedang login atau tema aplikasi.

3. React Router

React Router adalah library yang digunakan untuk mengatur navigasi atau routing dalam aplikasi React. Dengan React Router, Anda bisa membuat navigasi yang lebih kompleks, seperti routing dinamis, nested routes, dan juga pengelolaan URL parameters untuk navigasi yang lebih user-friendly.

4. Custom Hooks

Custom hooks memungkinkan Anda untuk membuat logika reusable dalam aplikasi React. Setelah memahami hooks bawaan seperti useState dan useEffect, belajar membuat custom hooks akan membantu Anda mengelola logika yang kompleks dan menggunakannya di beberapa komponen tanpa mengulang kode.

5. Optimisasi Kinerja (Performance Optimization)

Memahami cara kerja virtual DOM dan bagaimana React melakukan rendering ulang sangat penting dalam optimisasi kinerja. Anda perlu mempelajari teknik-teknik seperti memoization dengan React.memo, useMemo, dan useCallback untuk mencegah rendering ulang yang tidak perlu dan menjaga aplikasi tetap responsif.

6. State Management dengan Redux atau Zustand

Untuk aplikasi yang lebih besar, pengelolaan state yang lebih kompleks dapat menjadi tantangan. Library seperti Redux atau Zustand membantu dalam mengelola state global dengan cara yang lebih terstruktur dan scalable. Dengan mempelajari state management, Anda bisa mengelola data aplikasi secara efisien, terutama ketika data tersebut dibagikan di banyak komponen.

7. Error Boundaries

Error Boundaries digunakan untuk menangkap error yang terjadi dalam komponen-komponen React. Ini sangat penting untuk mencegah aplikasi crash secara keseluruhan ketika terjadi error di satu bagian aplikasi. Mempelajari Error Boundaries akan membantu Anda mengelola error dengan lebih baik dan memberikan pengalaman pengguna yang lebih stabil.

8. TypeScript dengan React

TypeScript memberikan tipe statis pada JavaScript, yang membantu dalam mencegah error dan membuat kode lebih mudah dipelihara. Memahami penggunaan TypeScript dengan React adalah langkah penting jika Anda ingin meningkatkan kualitas dan skalabilitas aplikasi, terutama pada proyek yang lebih besar.

9. Server-Side Rendering (SSR) dan Static Site Generation (SSG)

Memahami konsep SSR dan SSG penting untuk meningkatkan kinerja dan SEO aplikasi React. Framework seperti Next.js memudahkan penerapan SSR dan SSG dalam aplikasi React, dan membantu membuat aplikasi lebih cepat diakses oleh pengguna dengan loading yang lebih cepat.

10. Testing dengan Jest dan React Testing Library

Testing merupakan aspek penting dalam pengembangan aplikasi yang berkualitas. Dengan mempelajari testing di React, Anda dapat memastikan bahwa komponen dan fungsionalitas berjalan dengan benar. Library seperti Jest dan React Testing Library sangat populer dalam dunia React untuk melakukan unit testing dan integration testing.

Dengan mempelajari poin-poin ini, Anda akan memiliki pemahaman yang lebih mendalam tentang bagaimana membangun aplikasi React yang lebih besar, lebih kompleks, dan lebih optimal.

Kesimpulan dan Saran

Memperdalam pemahaman tentang React JS membutuhkan waktu dan latihan yang konsisten. Dengan memahami konsep dasar seperti useState dan useEffect, serta mempelajari topik-topik lanjutan seperti Context API, React Router, dan optimisasi kinerja, Anda akan dapat membangun aplikasi web yang lebih efisien dan interaktif. Teruslah berlatih dan eksplorasi teknologi-teknologi baru dalam ekosistem React.

Untuk mempercepat pembelajaran Anda, sangat disarankan untuk belajar langsung bersama mentor expert di BuildWithAngga. Dengan akses belajar selamanya, Anda bisa berkonsultasi langsung dengan mentor profesional, serta membangun portofolio modern yang siap digunakan untuk melamar pekerjaan atau proyek freelance. Mendapatkan dukungan dari komunitas yang tepat akan membantu Anda lebih percaya diri dalam menghadapi tantangan dalam dunia pengembangan web.