Membina Borang React dengan Mudah Menggunakan React Hook Form, Zod dan Shadcn

Borang ialah sesuatu yang dihadapi oleh setiap pembangun, sama ada sebagai pengguna atau di pihak pembangun. Ia penting pada kebanyakan tapak web, tetapi kerumitannya boleh berbeza-beza—daripada borang hubungan 3 medan mudah kepada giga-monster-t-rex, borang berbilang halaman dengan 150 medan, pengesahan dinamik dan semakan tak segerak.

Dalam siaran ini, kami akan meneroka cara React Hook Form, Zod dan Shadcn boleh digunakan untuk mencipta penyelesaian yang boleh disesuaikan dan mesra pembangun yang mengendalikan pelbagai keperluan borang dengan mudah.

Borang yang akan kami bina

Ini borang yang akan kami bangunkan dalam siaran ini. Saya bercadang untuk menulis siaran lain tentang penggunaan borang lanjutan yang akan mempunyai lebih kerumitan sebagai susulan, jadi nantikan ?

Temui alatan

Mari kita lihat susunan yang akan kami gunakan untuk membina dan mengurus borang kami.

Bertindak balas dan Wasp

• Kerangka: Tebuan (rangka kerja tindanan penuh untuk React, Node.js dan Prisma).
• Mendayakan pembangunan dan penggunaan web timbunan penuh yang pantas dan cekap dengan React.

Borang Cangkuk Reaksi

• Pustaka ringan untuk membuat borang dalam React, terutamanya melalui cangkuk useFormnya.
• Mengendalikan pengesahan borang, pengurusan ralat dan menawarkan kaedah pengesahan yang fleksibel serta penyepaduan dengan pelbagai perpustakaan komponen UI.

Zod

• Pustaka pengesahan pertama TypeScript untuk mencipta skema pengesahan yang terperinci dan boleh digunakan semula.
• Bersepadu dengan jenis TypeScript untuk memastikan pengesahan bersatu dan mengelakkan pertindihan.

Shadcn/UI

• Koleksi komponen UI boleh guna semula yang dibenamkan terus dalam projek, yang membolehkan pembangun mengambil hanya perkara yang mereka perlukan dan menyesuaikan komponen tersebut juga.
• Menawarkan sokongan terbina dalam untuk React Hook Form dan Zod.

Berikut ialah contoh coretan yang mempamerkan medan borang dalam pustaka Shadcn:

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Walaupun anda lebih suka menggunakan perisa tindanan yang berbeza, selagi anda kekal dengan React dan RHF, ini masih merupakan contoh yang sah yang akan membantu anda.

Mari bina papan pemuka pengguna yang ringkas

Aplikasi yang akan kami gunakan untuk menunjukkan borang asas ialah panel pentadbir dengan operasi CRUD yang penting. Ia akan termasuk pengesahan e-mel dan kata laluan dan terdiri daripada dua halaman: skrin utama yang memaparkan jadual semua pengguna dan halaman ciptaan pengguna, yang akan menjadi bintang artikel ini.

Borang kami akan menyertakan pengesahan untuk memastikan pengguna tidak boleh menyerahkannya (iaitu, mencipta pengguna baharu) tanpa memenuhi keperluan yang ditentukan. Objek Pengguna ialah calon yang sangat baik untuk contoh pengesahan, kerana ia mengandungi pelbagai jenis data yang sesuai untuk pengesahan yang berbeza: rentetan, tarikh (cth., tarikh lahir), rentetan e-mel dan boolean (cth., status pengguna premium). Fail skema Prisma yang lengkap ditunjukkan di bawah.

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Untuk memulakan projek kami, kami akan menggunakan templat Wasp yang dipratentukan dengan TypeScript, dipanggil todo-ts. Templat ini disertakan dengan komponen siap sedia dan penghalaan untuk pengesahan, termasuk skrin log masuk dan pendaftaran. Ia juga menawarkan contoh kukuh tentang cara operasi CRUD berfungsi dalam Wasp, sesuai jika anda baharu dalam rangka kerja tersebut. Selain itu, kami akan memanfaatkan Wasp TypeScript SDK baharu untuk mengurus konfigurasi kami, kerana ia memberikan fleksibiliti lanjutan untuk penyesuaian.

Mencari artikel ini berguna?

Pasukan Wasp sedang berusaha keras untuk mencipta kandungan seperti ini, apatah lagi membina rangka kerja React/NodeJS moden sumber terbuka.

Cara paling mudah untuk menunjukkan sokongan anda ialah dengan membintangi repo Wasp! ? Tetapi adalah amat dihargai jika anda boleh melihat pada repositori (untuk sumbangan, atau sekadar menguji produk). Klik pada butang di bawah untuk memberi Wasp bintang dan tunjukkan sokongan anda!

⭐️ Terima Kasih Atas Sokongan Anda ?

Menyatukan semuanya - skema Zod React Hook Form reka letak contoh

Untuk bekerja dengan borang, kami akan mulakan dengan mentakrifkan skema pengesahan Zod. Borang kami mempunyai tiga jenis data: rentetan, tarikh dan boolean. Kami akan menggunakan pengesahan pada kebanyakan medan: nama dan nama keluarga diperlukan, manakala e-mel menggunakan pengesahan e-mel terbina dalam. Zod memudahkan pengesahan jenis rentetan biasa dengan pengesahan terbina dalam untuk jenis yang berbeza, seperti e-mel, URL dan UUID, yang berguna untuk medan e-mel kami.

Untuk pengesahan tambahan, tarikh tidak boleh ditetapkan pada tarikh akan datang dan medan Pengguna premium hanya perlu menjadi boolean. Zod juga menyediakan mesej ralat pengesahan lalai, tetapi ini boleh disesuaikan. Sebagai contoh, bukannya nama: z.string().min(1), kita boleh menentukan nama: z.string().min(1, 'Nama diperlukan').

<FormField
  control={form.control}
  name="name"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Name</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Borang kami diuruskan oleh useForm hook daripada React Hook Form, yang menyediakan pilihan yang luas untuk mengendalikan dan mengesahkan nilai borang, menyemak ralat dan mengurus keadaan borang. Untuk menyepadukan skema pengesahan Zod kami, kami akan menggunakan penyelesai Zod, membenarkan Borang React Hook menggunakan pengesahan yang kami takrifkan sebelum ini.

Nilai lalai borang diperoleh daripada objek pelanggan. Memandangkan komponen ini digunakan untuk menambah pelanggan baharu dan mengedit pelanggan sedia ada, kami akan menghantar data yang diperlukan sebagai input. Untuk pelanggan baharu, beberapa nilai lalai yang wajar digunakan; untuk pelanggan sedia ada, data diambil daripada pangkalan data. Selain daripada menetapkan nilai lalai dan menentukan sama ada untuk memanggil createCustomer atau updateCustomer, semua aspek pengendalian borang yang lain kekal sama.

model Customer {
  id    Int    @id @default(autoincrement())
  name  String
  surname String
  email String
  dateOfBirth DateTime
  premiumUser Boolean
}

Langkah terakhir ialah mencipta borang itu sendiri dan memasangnya dalam fail TSX. Seperti yang ditunjukkan sebelum ini, proses ini adalah mudah. Sama ada kami menggunakan input teks, pemilih tarikh atau kotak pilihan dengan kawalan Shadcn, kami mengikuti struktur yang serupa:

• Mulakan dengan mencipta elemen FormField dan menetapkan sifat kawalan, nama dan pemaparannya.
• Sifat render adalah kunci, kerana ia mengandungi elemen bentuk itu sendiri.
• Biasanya, kami membungkus segala-galanya dalam FormItem, menambah FormLabel untuk label dan meletakkan elemen borang terkawal di dalam FormControl dengan kaedah nilai dan penetap yang sesuai.
• Akhir sekali, kami menyertakan FormMessage di bawah, yang memaparkan mesej pengesahan Zod jika pengesahan gagal.

  const formSchema = z.object({
    name: z.string().min(1, { message: 'Name is required' }),
    surname: z.string().min(1, { message: 'Surname is required' }),
    email: z.string().email({ message: 'Invalid email address' }),
    dateOfBirth: z
      .date()
      .max(new Date(), { message: 'Date cannot be in the future' }),
    premiumUser: z.boolean(),
  });

Jika anda ingin melihat aplikasi yang lengkap, lihat repositori GitHub di sini: GitHub Repo. Saya harap artikel ini telah memudahkan kerja dengan borang, dan jika anda berminat dengan lebih banyak kandungan berkaitan borang, nantikan bahagian kedua! Dalam bahagian seterusnya, kami akan menyelami corak lanjutan dan teknik pengesahan untuk meningkatkan aplikasi anda.

Sila pertimbangkan untuk membintangi Tebuan di GitHub jika anda menyukai siaran ini! Sokongan anda membantu kami terus menjadikan pembangunan web lebih mudah dan lancar untuk semua orang. ?

Atas ialah kandungan terperinci Membina Borang React dengan Mudah Menggunakan React Hook Form, Zod dan Shadcn. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!