Shadcn UI: برنامه React React خود را با حداقل تلاش بازسازی کنید

بازگشت به UI مادی یا UI Daisy در سال 2025 پس از ورود به Shadcn دشوار است. این به انتخاب من تبدیل شد و به طور بالقوه یکی از دلایل اصلی من است که می خواهم https://nextjs.org/ را انتخاب کنم وقتی یک پیش بینی سریع یا اثبات مفهوم ایجاد می کنم.

روز دیگر مجبور شدم یک برنامه React بسیار قدیمی را لمس کنم و برای اینکه بمانم که در وضعیت بسیار بدی قرار داشت ، یک تفسیر بود. ما در مورد 4 راه حل یک ظاهر طراحی شده مختلف (SCSS ، CSS ، Tailwind ، MUI) صحبت می کنیم که گاهی اوقات در همان مؤلفه استفاده می شود ، هک های تصادفی در همه جا و تقریباً تمام نشانه هایی که باعث می شود بیشتر ما بگوییم: “بله ، این برنامه باید از ابتدا بازنویسی شود”

اما هنگامی که فهمیدم که این مسائل مربوط به UI است ، تصمیم گرفتم چاقوی ارتش سوئیس خود را انتخاب کنم – AKA Shadcn. با استفاده از مؤلفه های ساخت قبل از ساخت ، ارائه دهندگان IT به همراه Tailwind ، من هر آنچه را که برای اصلاح مجدد برنامه لازم دارم ، دارم.

نصب Shadcn

ابتدا مجبور شدم وابستگی ها را نصب کنم. از آنجا که این یک برنامه React قدیمی است ، من مجبور شدم به صورت دستی همه چیز را طبق دستورالعمل اسناد نصب کنم.

yarn add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

به روزرسانی بعدی tsconfig.json پرونده برای کمک به حل مسیرهای ما:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

در مرحله بعد ، Tailwind را در پرونده CSS ما وارد کنید. در اینجا من از متغیرهای CSS استفاده نکردم ، اما در صورت تمایل می توانید آنها را اضافه کنید.

@import "tailwindcss";
@import "tw-animate-css";

اضافه کردن ما cn عملکرد UTIL برای کمک به ادغام ، مدیریت و استفاده از کلاس ها:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

و بعد ما به components.json پرونده در ریشه برنامه ما.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

اکنون بعد از این همه ، در نهایت می توانم اجزای را از طریق دستور زیر اضافه کنم:

npx shadcn add — all

مسئله بالقوه

همانطور که قبلاً ذکر شد ، این برنامه من بسیار قدیمی است. وابستگی های قدیمی ، پیکربندی وب و غیره. حتی اگر من موفق شدم همه چیز را با موفقیت نصب کنم ، هنگام اجرا خطای زیر را دریافت می کنم:

ERROR in ./node_modules/@radix-ui/react-arrow/dist/index.mjs 4:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/the-opinionated-dev/dev/dt/dt-dashboard/node_modules/@radix-ui/react-arrow/dist' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

رفع این شماره در پیکربندی وب ما نهفته است. به سادگی این را اضافه کنید alias و وابستگی را نصب کنید و این مسئله باید مسئله را برطرف کند:

react/jsx-runtime’:require.resolve(‘react/jsx-runtime’)

و اساساً همین است! امیدوارم در این مرحله اجزای Shadcn را در برنامه React خود ، آماده استفاده داشته باشید!