ReactJS - Formik: Membangun Form Pengeluaran

Halo sana, para pengembang React masa depan! Hari ini, kita akan mengemban perjalanan menarik ke dunia pengaturan form di React menggunakan pustaka yang fantastik bernama Formik. Pada akhir panduan ini, Anda akan menciptakan form yang ramping dan efisien seperti seorang pro. mari kita masuk ke dalam!

Apa Itu Formik?

Sebelum kita mulai mengoding, mari kita pahami apa itu Formik dan mengapa ini begitu revolusioner dalam pengembangan React.

Formik adalah pustaka yang populer yang menyederhanakan pengaturan form di aplikasi React. Itu mengurus bagian membosankan form seperti mengelola state form, validasi, dan pengiriman, memungkinkan Anda fokus pada yang paling penting - logika aplikasi Anda.

Pertimbangkan Formik sebagai asisten pribadi Anda. Seperti how a good assistant would handle all the paperwork for you, Formik mengelola semua tugas terkait form, meninggalkan Anda bebas untuk fokus pada gambaran besar.

Menyiapkan Proyek Kami

Pertama-tama, mari kita siapkan proyek kita. Kita akan asumsikan Anda sudah memiliki Node.js terinstal di komputer Anda. Jika belum, silakan instalnya dari situs web resmi Node.js.

Buka terminal Anda dan jalankan perintah berikut:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Perintah ini menciptakan aplikasi React baru, menginstal Formik dan Yup (pustaka untuk validasi form), dan memulai server pengembangan.

Membuat Form Pengeluaran Kami

Sekarang kita sudah memiliki proyek kita siap, mari kita buat form pengeluaran kita. Kita akan membuat form sederhana yang memungkinkan pengguna memasukkan deskripsi dan jumlah pengeluaran.

Langkah 1: Struktur Form Dasar

Mari kita mulai dengan membuat struktur form dasar. Buka file src/App.js Anda dan ganti isinya dengan kode berikut:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Form Pengeluaran</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Deskripsi</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Jumlah</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Kirim
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

mari kitauraikan apa yang terjadi disini:

1. Kita mengimpor komponen yang diperlukan dari Formik.
2. Kita membuat komponen Formik yang mengelilingi form kita.
3. Kita mengatur initialValues untuk field form kita.
4. Kita menentukan fungsi onSubmit yang akan mengelola pengiriman form.
5. Kita menggunakan komponen Form, Field, dan ErrorMessage dari Formik untuk membuat struktur form kita.

Langkah 2: Menambahkan Validasi

Sekarang, mari kita tambahkan validasi ke form kita. Kita akan menggunakan Yup untuk ini. Update file App.js Anda seperti berikut:

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

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Terlalu Pendek!')
.max(50, 'Terlalu Panjang!')
.required('Diperlukan'),
amount: Yup.number()
.positive('Harus positif')
.required('Diperlukan'),
});

function App() {
return (
<div className="App">
<h1>Form Pengeluaran</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Deskripsi</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Jumlah</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Kirim
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Ini adalah apa yang kita tambahkan:

1. Kita mengimpor Yup dan menentukan skema validasi (ExpenseSchema).
2. Kita menambahkan prop validationSchema ke komponen Formik.

Sekarang form kita akan memvalidasi input sebelum pengiriman!

Langkah 3: Menyempurnakan Form

Mari kita tambahkan beberapa penyesuaian gaya untuk membuat form kita terlihat lebih bagus. Buat file baru App.css di folder src Anda dan tambahkan CSS berikut:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Sekarang, perbarui App.js Anda untuk mengimpor file CSS ini:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... sisanya kode tetap sama

Kesimpulan

Selamat! Anda telah berhasil membuat form pengeluaran yang berfungsi menggunakan Formik dan React. Ini hanya permulaan dari apa yang Anda dapat lakukan dengan Formik. Sebagai Anda terus menjalani perjalanan React, Anda akan menemukan Formik menjadi alat yang tak ternilai untuk mengelola form berbagai tingkat kompleksitas.

Ingat, latihan membuat sempurna. Cobalah memodifikasi form ini, tambahkan field baru, atau buat form baru menggunakan apa yang Anda pelajari. Dunia pengembangan React luas dan menarik, dan Anda sudah berada di jalur untuk menjadi bagian dari itu!

Selamat mengoding, dan semoga form Anda selalu validasi mulus! ?

Tabel Metode Formik

Berikut adalah tabel dari beberapa metode Formik yang sering digunakan:

Metode	Deskripsi
handleSubmit	Mengelola pengiriman form
handleChange	Mengelola perubahan field form
handleBlur	Mengelola saat field kehilangan fokus
setFieldValue	Secara manual menetapkan nilai field
setFieldTouched	Secara manual menetapkan state sentuh field
validateForm	Secara manual memicu validasi form
resetForm	Reset form ke nilai awal
setErrors	Secara manual menetapkan kesalahan form
setStatus	Menetapkan objek status tingkat atas
setSubmitting	Menetapkan state pengiriman form

Credits: Image by storyset