# WEEK4 OF MY SOFTWARE ENGINERING BOOTCAMP AT BLOCKFUSE

### Introduction.
These week we learnt about the react form hook and also how to use shadcn-ui how to make validation of forms easier and stressfree without using the usestate in our react and the Shadcn-UI gives a collection of reusable UI components (like buttons, modals, forms, cards, etc)

#### REACT FORM HOOK.
Rect form hook is a library for handling forms in React and it helps you manage form state, validation, and submission with minimal re-renders. it helps you to vaidate your form as i said earlier more easier and it is also fast here is an example of react form hook using a signup page. Before using the react form hook we have to install them and take some required step to set it up.
Firstly we install it with these command

npm install react-hook-form

Secoundly we import it at the top of our code as shown below

import { useForm } from 'react-hook-form';

import React from 'react';
import { useForm } from 'react-hook-form';

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log('Form Data:', data);
    alert('Signup Successful');
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-6 bg-white shadow-lg rounded-xl">
      <h2 className="text-2xl font-bold mb-4 text-center">Sign Up</h2>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        
        <div>
          <label className="block mb-1 font-medium">Full Name</label>
          <input
            type="text"
            {...register("fullName", { required: "Full name is required" })}
            className="w-full px-3 py-2 border rounded-md"
            placeholder="John Doe"
          />
          {errors.fullName && (
            <p className="text-red-500 text-sm">{errors.fullName.message}</p>
          )}
        </div>

        <div>
          <label className="block mb-1 font-medium">Email</label>
          <input
            type="email"
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^\S+@\S+$/i,
                message: "Invalid email format",
              },
            })}
            className="w-full px-3 py-2 border rounded-md"
            placeholder="[e-mail]"
          />
          {errors.email && (
            <p className="text-red-500 text-sm">{errors.email.message}</p>
          )}
        </div>

        <div>
          <label className="block mb-1 font-medium">Password</label>
          <input
            type="password"
            {...register("password", {
              required: "Password is required",
              minLength: {
                value: 6,
                message: "Password must be at least 6 characters",
              },
            })}
            className="w-full px-3 py-2 border rounded-md"
            placeholder="••••••••"
          />
          {errors.password && (
            <p className="text-red-500 text-sm">{errors.password.message}</p>
          )}
        </div>

        <button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md"
        >
          Sign Up
        </button>
      </form>
    </div>
  );
}

and here is the output of the code preview


And also if you notice there is something in our code immediately after our function signupForm so these react form hook returns what we call methods and state that we use to manage our form.
* The register it Connects your form input fields to React Hook Form and it tracks the input's value and handles validation.
* The handleSubmit these handles the submit in our form onsubmit action in the form element in our html.
* The formState: { errors } it holds any validation errors that exist in your form and it works it checks if the object is empty then throws error to the user's.
* The Submit Function it checks whether all the fields are not empty then it store the value or text written in the form to the console. It also gets called only if the form passes validation.

### Conclusion for the React Form Hook
it makes our validation of forms and input easier and faster.

### Shadcn-UI
ShadCN UI is a modern, accessible, and beautifully designed component library, it is also a set of beautifully-designed, accessible components and a code distribution platform. And also it makes work easier because they have some customized design like the buttons, alerts, card etc it helps make work faster. To use it firstly we have to install it

npx shadcn@latest init

then we use it like these in our code

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App

##### Some benefits of using shadcn-UI
* Accesible
* fully customized
* tailwind based
* own your components
* it is used on javascript and typescript.