3 Library Wajib untuk React Developer, Kamu Udah Pake Belum?

Guys, tau gak sih, di dunia pengembangan web yang serba cepat ini, React itu kayak seleb, loh. Kenapa? Karena dia bukan cuma enak banget dipakai buat bikin tampilan website yang kece, tapi juga punya ekosistem yang gede dan beragam.

Ekosistem ini kebanjiran sama berbagai library yang nggak cuma bikin React makin powerful, tapi juga mempermudah hidup para developer dengan nyediain solusi buat hampir semua masalah pengembangan.

Tapiiiiii (i nya banyak), dengan banyaknya pilihan yang ada, kadang kita bisa bingung harus milih yang mana yang paling penting dan efektif buat digunakan. Nah, di sini nih, tulisan ini bakal fokus bahas tiga library yang udah terbukti jadi bagian penting dari peralatan tempur setiap developer React.

Kita bakal ngulik Axios, yang jago banget dalam urusan permintaan HTTP; React Query (Tanstack React Query) buat manajemen data yang pintar; plus kombinasi Formik dan Yup yang jadi solusi mantap buat bikin dan validasi formulir. Yuk, kita cek lebih dalam kenapa ketiga library ini dianggap sebagai elemen kunci dalam pengembangan web pake React.

Siapa sih yang ga kenal Axios, Axios itu kayak alat ajaib buat ngambil data dari server. Misal nih, kita mau fetch data produk dari https://dummyjson.com/products. Pake Axios, hal ini jadi super gampang!

Contoh Pakai Axios:

import axios from 'axios';

axios.get('https://dummyjson.com/products')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Ups, ada yang salah nih:', error);
  });

Gimana? Simple kan? Kita cuma butuh beberapa baris kode, dan voila, data langsung kita dapet!

Bandingin sama Fetch Biasa Kalo pake fetch bawaan JavaScript, kita bisa juga sih, tapi lihat nih perbandingannya:

fetch('https://dummyjson.com/products')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Ada error nih:', error);
  });

Keliatannya mirip, tapi Axios punya beberapa kelebihan yang bikin dia spesial:

1. Automatis Konversi JSON: Dengan Axios, respons dari server langsung diubah ke JSON, ga perlu .json() lagi seperti di fetch biasa.
2. Handling Error yang Lebih Baik: Axios mempermudah handling error, khususnya saat handle HTTP error codes.
3. Cancel Request: Bisa cancel request yang udah nggak diperlukan lagi, jadi bisa hemat resource.
4. Interceptors: Bisa nambahin interceptors buat request dan response, jadi bisa lebih fleksibel dalam handle data atau error.
5. Support Browser Lama: Axios jalan di browser-browser lama, termasuk yang nggak support ES6.

Jadi, meskipun fetch bawaan JavaScript itu oke, Axios memberi kita fitur yang lebih lengkap dan fleksibel, terutama buat proyek yang lebih kompleks. Plus, kode kita jadi lebih rapi dan gampang dibaca. Mantap, kan?

Pembahasan mendalam tentang Axios bisa kalian baca di artikel ini: Aplikasi Axios dalam React Development

Nah, setelah kita ngomongin Axios, ada satu lagi nih yang jadi kelebihan besar: integrasinya yang sempurna dengan React Query.

Kalian pasti penasaran, 'Emangnya kenapa harus pake React Query?' Coba bayangin, kalian punya aplikasi yang butuh update data secara real-time atau butuh cache data biar performanya makin kenceng. Di sinilah React Query beraksi.

React Query itu ibarat manajer pinter yang mengelola semua data yang kita fetch, termasuk data yang kita dapet dari Axios. Jadi, gini nih keuntungannya:

1. Manajemen State Data yang Otomatis: React Query otomatis mengatur state data yang kita fetch. Jadi, kita nggak perlu pusing lagi dengan state management buat data dari server.

2. Caching & Background Updates: Dengan React Query, data yang sering diakses bisa di-cache. Plus, kita bisa setel agar data di-update di background, jadi pengguna nggak perlu nunggu loading terus.

3. Lebih Sedikit Boilerplate: Gabungin Axios dan React Query, dan kalian akan lihat betapa rapih dan efisiennya kode kalian. Kode jadi lebih bersih, lebih mudah dibaca, dan yang pasti, lebih mantap performanya.

Misalnya nih, kita mau fetch data produk pake Axios dan kelola pake React Query:

import { useQuery } from 'react-query';
import axios from 'axios';

const fetchProducts = () => {
  return axios.get('https://dummyjson.com/products');
};

function Products() {
  const { data, isLoading, error } = useQuery('products', fetchProducts);

  if (isLoading) return 'Loading...';
  if (error) return 'Oops, ada yang salah...';

  return (
    <div>
      {data.data.products.map(product => (
        <p key={product.id}>{product.title}</p>
      ))}
    </div>
  );
}

Gimana, guys? Keren kan? Kita punya kontrol penuh atas data kita dengan cara yang lebih efisien dan efektif. Jadi, kalo kalian pengen buat aplikasi React yang kencang dan update data tanpa bikin pusing, kombinasi Axios dan React Query ini wajib banget buat dicoba.

Pembahasan mendalam tentang React Query bisa kalian baca di artikel ini: React Query: Library untuk Fetching Data di React

Sebelumnya, saat belajar saya bikin formulir di react seperti ini:

import { useState } from 'react';

export const SignupForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
    alert(`Halo ${name}! Email kamu ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nama:
        <input
          type="text"
          value={name}
          onChange={event => setName(event.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={event => setEmail(event.target.value)}
        />
      </label>
      <button type="submit">Daftar</button>
    </form>
  );
};

itu belum urusan validasi data, belum urusan error handling, belum urusan state management, belum urusan banyak hal.

Guys, pernah ngalamin pusingnya bikin formulir di React kayak saya diatas? Ribet banget kan, apalagi pas urusan validasi data. Tapi, tenang! Ada duo superhero yang bakal nolongin kita: Formik dan Yup. Mereka ini kayak Batman dan Robin-nya dunia formulir React.

Kenapa Formik?

Formik itu spesialis bikin formulir di React. Kenapa sih harus pake Formik?

1. Mengelola State Formulir: Dari data, error, sampe ke visited fields, semuanya diatur Formik. Jadi, kalian bisa fokus ke UI dan logika bisnis.
2. Validasi dan Error Handling: Gampang banget nambahin validasi dan tampilin pesan error.
3. Kurangi Boilerplate: Bayangin bikin form tanpa harus nulis kode berulang-ulang. Itulah yang Formik tawarkan.

Nah, kalo udah kenal Formik, mesti kenalan juga sama Yup. Yup itu library buat validasi skema.

Dia gampang dipake, tapi powerful banget.

Kita bisa definisiin skema validasi buat form kita, dan Formik bakal pake itu buat ngecek data yang dimasukin user.

Contoh Kombinasi Formik & Yup

Bayangin kita mau bikin form sederhana buat registrasi:

import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string()
    .required('Nama wajib diisi')
    .min(2, 'Nama terlalu pendek'),
  email: Yup.string()
    .email('Email tidak valid')
    .required('Email wajib diisi'),
});

function SignupForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="name" />
          {touched.name && errors.name && <div>{errors.name}</div>}

          <Field name="email" />
          {touched.email && errors.email && <div>{errors.email}</div>}

          <button type="submit">Daftar</button>
        </Form>
      )}
    </Formik>
  );
}

Gimana, guys? Keren kan? Kita nggak perlu pusing lagi mikirin state formulir atau validasi.

Formik dan Yup udah siap nolongin kita. Jadi, buat kalian yang sering kerja pake form di React, duo ini bakal jadi teman terbaik kalian.