NEXT JS STARTER PACK – انجمن DEV
سلام به توسعه دهندگان frontend من، امروز چند کتابخانه و بسته را نشان خواهم داد که می توانید آنها را در پروژه بعدی js خود اضافه کنید تا کارآمدتر، سریع تر، مستعد خطا، قابل تنظیم و تایپ ایمن شود.
بیا شروع کنیم…
فهرست مطالب
معرفی
خوب، بسیاری از شما قبلاً میدانید که هنگام ساخت یک پروژه، ما باید با موارد زیادی مانند ایجاد سبکها و طرحبندیها، مدیریت فرم و اعتبارسنجی، واکشی دادهها، ایجاد قابلیتها، مدیریت حالت، و غیره سر و کار داشته باشیم. در عوض، ما از کتابخانهها استفاده میکنیم تا این موارد را برای ما مدیریت کنند.
Tailwind CSS
بیایید با css شروع کنیم، نوشتن css میتواند با پروژههای بزرگتر با فایلهای زیاد، سبکهای مختلف، کلاسهای نادیده گرفته، بازنشانی css، ابزارهای کمکی و همه چیز آشفته باشد. صرفاً تنظیم شیوه نامه های css برای پروژه ممکن است زمان زیادی را صرف کند. Tailwind نجات دهنده شما برای این مشکل است، فریم ورک CSS اولین ابزار کاربردی است که با کلاس هایی مانند flex، grid، text-center، mt-10 و غیره پر شده است که می توانند برای ساخت هر طرحی، مستقیماً در نشانه گذاری شما ساخته شوند. این سریع، انعطاف پذیر و قابل اعتماد است – با زمان اجرای صفر.
مستندات
مثال
class="mx-auto max-w-sm bg-gray-100 mt-20">
class="rounded-lg bg-slate-900 py-3 text-slate-100">
class="text-center font-sans text-2xl md:text-3xl lg:text-4xl">Tailwind Card
class="bg-slate-00 text-balance p-5 font-sans text-base text-slate-900 md:text-lg">Tailwind is your savior for this problem, It utility-first CSS framework packed with classes like flex, grid, text-center, mt-10, etc that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable — with zero-runtime.
خروجی
رابط کاربری بعدی
این یک کتابخانه مؤلفه رابط کاربری است که به شما کمک می کند تا اجزای زیبا، بسیار سفارشی شده و در دسترس مانند دکمه ها، آکاردئون ها، کارت ها، فهرست های بازشو، نوار ناوبری، پاورقی، فرم ها و غیره ایجاد کنید.
مستندات
مثال
<Card className="py-4 w-fit bg-gray-200 text-slate-900">
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardHeader>
<CardBody className="overflow-visible py-2">
<Image
alt="Card background"
className="object-cover rounded-xl"
src="https://nextui.org/images/hero-card-complete.jpeg"
width={270}
/>
</CardBody>
</Card>
خروجی
واکنش فرم قلاب و زود
- فرم قلاب React یک کتابخانه مدیریت فرم است که عملکردی، انعطاف پذیر و قابل توسعه با اعتبارسنجی آسان برای استفاده است.
- Zod یک کتابخانه اعتبار سنجی است که روش های داخلی زیادی برای اعتبارسنجی داده های ورودی شما بدون نگرانی در مورد نوشتن منطق به صورت دستی دارد.
- @hookform/resolvers یک کتابخانه حلکننده برای فرم قلاب واکنش است، اساساً به اعتبار سنجی zod برای واکنش دادن به ورودیهای فرم قلاب کمک میکند.
اسناد و مدارک
شکل قلاب واکنش
زود
@hookform/resolvers
مثال
"use client";
import React from "react";
import { FieldValues, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
// NEXT UI Components
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/modal";
import { Button } from "@nextui-org/button";
const schema = z.object({
name: z.string().min(1, { message: "Name is required" }),
age: z
.number({
invalid_type_error: "Age must be a number",
})
.positive({ message: "Age must be positive" })
.gt(18, { message: "Age should be greater than 18" }),
});
const Form = () => {
const {
register,
handleSubmit,
reset,
watch,
formState: { errors, isSubmitSuccessful },
} = useForm({
mode: "all",
resolver: zodResolver(schema),
});
const onSubmit = (data: FieldValues) => {
console.log(data);
if (isSubmitSuccessful) {
onOpen();
}
};
const name = watch("name");
// NEXT UI MODAL STATES
const { isOpen, onOpen, onOpenChange } = useDisclosure();
return (
<div className="grid justify-center">
<form
className="grid gap-y-4 p-10 rounded-xl border border-white"
onSubmit={handleSubmit(onSubmit)}
>
<div>
<h2 className="text-xl md:text-3xl font-sans font-bold text-center">USER</h2>
</div>
<div className="min-h-10 min-w-72">
<input
className="w-full px-4 py-2 border border-slate-700 rounded-lg"
{...register("name")}
placeholder="Name"
/>
{errors.name?.message && <p className="text-red-500">{errors?.name?.message as string}</p>}
</div>
<div className="mb-6">
<input
className="w-full px-4 py-2 border border-slate-700 rounded-lg"
type="number"
placeholder="Age"
{...register("age", { valueAsNumber: true })}
/>
{errors.age?.message && <p className="text-red-500">{errors?.age?.message as string}</p>}
</div>
<input
className="px-4 py-2 bg-blue-500 text-white w-fit rounded-lg cursor-pointer"
type="submit"
/>
</form>
{/* NEXT UI MODAL */}
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
hideCloseButton
>
<ModalContent className="font-sans">
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">Hey {name}</ModalHeader>
<ModalBody>
<h2 className="text-2xl font-bold">Thank you for filling out the form</h2>
</ModalBody>
<ModalFooter>
<Button
color="danger"
variant="solid"
onPress={() => {
onClose();
reset(); // Form reset
}}
>
Close
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
</div>
);
};
export default Form;
خروجی
وضعیت
این اساساً یک کتابخانه مدیریت دولتی است درست مانند redux اما وزن سبک تر، انعطاف پذیرتر، ساده و ساده تر.
مستندات
مثال
// store.ts
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
// Define the state and action types
interface State {
loggedIn: boolean;
setLoggedIn: (loggedIn: boolean) => void;
}
// Create the Zustand store with type definitions and persistence
export const useStore = create<State>()(
persist(
(set) => ({
loggedIn: false, // use false for boolean
setLoggedIn: (loggedIn: boolean) => set({ loggedIn }),
}),
{
name: "food-storage", // name of the item in the storage (must be unique)
storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
},
),
);
// App.tsx
"use client";
import { useStore } from "@/store/useStore";
import React from "react";
const Zustand = () => {
const loggedIn = useStore((state) => state.loggedIn);
const setLoggedIn = useStore((state) => state.setLoggedIn);
return (
<div className="bg-gray-900 text-white min-h-[calc(100vh-64px)] p-8">
<section className="flex flex-col items-center gap-10">
<div className="flex items-center gap-6">
<h3>User - {loggedIn ? "Logged In" : "Logged Out"}</h3>
<button
className={`px-4 py-2 inline-block rounded-lg text-white ${loggedIn ? "bg-red-500" : "bg-green-500"}`}
onClick={() => setLoggedIn(!loggedIn)}
>
{loggedIn ? "Logout" : "Login"}
</button>
</div>
<p className="text-lg font-sans mb-4">Login and refresh the page, the state will persist</p>
</section>
</div>
);
};
export default Zustand;
خروجی
اسلینت زیباتر
Prettier یک ابزار قالببندی کد است که به شناسایی مسائل مربوط به قالببندی کمک میکند و همچنین به حل خودکار قالببندی کمک میکند در حالی که از eslint برای یافتن خطاهای پردهبندی استفاده میشود، مانند اجازه دادن به نقلقولهای تک یا دوتایی، 100 کاراکتر در هر خط، متغیر تعریف شده اما استفاده نشده و غیره. ، با استفاده از اسکریپت های رفع اشکال، می توانیم به طور خودکار این نوع خطاها را برطرف کنیم.
مستندات
زیباتر
اسلینت
مثال
همین است و از اینکه این پست را بررسی کردید متشکرم
می توانید با من تماس بگیرید –
اینستاگرام – https://www.instagram.com/supremacism__shubh/
لینکدین – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
ایمیل – shubhmtiwri00@gmail.com
می توانید در لینک زیر به من کمک کنید با تشکر👇👇
☕ –> https://www.buymeacoffee.com/waaduheck <--
این پست ها را نیز بررسی کنید