Patobulinkite savo „React“ programas naudodami „ShadCn“ paslaugų programas ir komponentus – „SitePoint“.

Šiame straipsnyje apžvelgsime, kaip integruoti ShadCn į „React“ programas. Sužinokite, kaip nustatyti naują „React“ projektą, įdiegti ir konfigūruoti „ShadCn“ ir išnaudoti visas jo funkcijas. Nesvarbu, ar esate pradedantysis, ar patyręs kūrėjas, atraskite įžvalgų, kaip supaprastinti savo kūrimą naudodami „ShadCn“ programoje „React“.

Visą šaltinio kodą galite peržiūrėti svetainėje GitHub.

Kas yra ShadCn?

ShadCn yra universali biblioteka, teikianti platų paslaugų ir komponentų asortimentą, skirtą jūsų „React“ programoms patobulinti. Jis sukurtas siekiant supaprastinti kūrimo procesą, pagerinti programų efektyvumą ir sukurti patogesnę patirtį. ShadCn yra pastatytas ant Tailwind CSS ir Radix vartotojo sąsajaleidžianti lengvai tinkinti ir sklandžiai integruoti su „Tailwind“ metodu, kuris pirmiausia yra naudingas.

Būtinos „ShadCn“ diegimo sąlygos

Prieš pradėdami diegti „ShadCn“, pasirūpinkite gerai paruošta aplinka. Turėkite pagrindinį supratimą apie JavaScript ir React.jssu Node.js įdiegta jūsų kompiuteryje. CSS ir HTML pažinimas yra naudingas efektyviam ShadCn naudojimui. Kadangi ShadCn integruojamas su Tailwind CSS, pagrindinis supratimas apie Galinis vėjas taip pat bus naudinga.

Naujos „React“ programos nustatymas

Norėdami pradėti savo projektą, pirmiausia nustatykite naują „React“ programą. Norėdami tai padaryti, savo terminale paleiskite šią komandą:

npm create vite@latest

Tada pavadinkite projektą ir pasirinkite kalbą (geriausia TypeScript, nes ShadCn veikia iš karto su TypeScript).

Tada eikite į projekto aplanką ir paleiskite diegimo komandą:

npm install

Galiausiai paleiskite dev serverį vykdydami komandą:

npm run dev

Tailwind CSS nustatymas

Norėdami tinkinti ShadCn komponentus, turėsite įdiegti ir sukonfigūruoti Tailwind CSS. „Tailwind“ yra pirmiausia CSS sistema, kuri sklandžiai veikia su „ShadCn“, leidžianti lengvai modifikuoti ir pritaikyti komponentus, kad jie atitiktų jūsų projekto reikalavimus. Norėdami įdiegti Tailwind, paleiskite komandą:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tada įklijuokite toliau pateiktą informaciją į savo index.css failas:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Po to eikite į savo tsconfig.json failą ir pakeiskite kelius:

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

Pridėjus baseUrl ir paths skirsniai žemiau compilerOptionsmodifikuotas tsconfig.json failas įgalina kelio skyrą importuojant, pradedant nuo @/kuris susietas su ./src/ katalogą savo projekte.

Galiausiai įdiekite mazgus savo projekte, kad išvengtumėte kelio klaidų:

npm i -D @types/node

Tada pakeiskite savo vite.config.ts:

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Atnaujinant vite.config.ts failas su kelio skyros konfigūracija užtikrina, kad jūsų programa gali teisingai išspręsti kelius, todėl galite importuoti modulius naudojant apibrėžtus slapyvardžius. Šis veiksmas yra svarbus sklandžiam kūrimui ir norint išvengti bet kokių importavimo klaidų, susijusių su kelio skyra.

„ShadCn“ diegimas ir konfigūravimas

Nustačius „React“ programą, laikas įdiegti „ShadCn“. Tai galite padaryti naudodami npm su šia komanda:

npx shadcn-ui@latest init

Raginimas pateikia keletą parinkčių, iš kurių galite pasirinkti.

„ShadCn“ naudojimas „React“ programoje

Sėkmingai įdiegę ir sukonfigūruodami „ShadCn“, dabar galite pradėti jį naudoti „React“ programoje. Kaip pavyzdį, naudokime užvedimo kortelės komponentą. Eikite į Shadcn dokumentai ir paimkite užvedimo kortelės raginimą:

npx shadcn-ui@latest add hover-card

Tada importuokite jį į savo programą ir naudokite:

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

export default function App() {
  return (
    <div className="flex justify-center  items-center h-screen">
      <HoverCard>
        <HoverCardTrigger>First Shadcn Component</HoverCardTrigger>
        <HoverCardContent>My first of many components</HoverCardContent>
      </HoverCard>
    </div>
  );
}

Tai duoda toliau pateiktą rezultatą.

„ShadCn“ komponento redagavimas

Norėdami redaguoti ShadCn komponentą, galite panaudoti Tailwind CSS galią, kad pritaikytumėte jo išvaizdą ir elgesį. Pavyzdžiui, galite naudoti Tailwind norėdami redaguoti užvedimo kortelės komponento išvaizdą, perduodant stilius per klasės pavadinimo rekvizitus:

<HoverCard>
  <HoverCardTrigger className=" rounded-xl text-white py-2 px-4 bg-slate-500 ">
    First Shadcn Component
  </HoverCardTrigger>
  <HoverCardContent className=" font-bold text-slate-500 w-max">
    My first of many components
  </HoverCardContent>
</HoverCard>

Dėl to komponentas atrodo taip, kaip parodyta toliau.

Išvada

„ShadCn“ įtraukimas į „React“ programas neturi būti sudėtingas procesas. Aiškiai supratę būtinas sąlygas, veikiančią „React“ programą ir tinkamą konfigūraciją, jums sekasi. Dėl daugybės „ShadCn“ paslaugų ir komponentų jis yra puikus įrankis, skirtas tobulinti „React“ programas, supaprastinti kūrimo procesą ir padaryti programas veiksmingesnes bei patogesnes.

Taip pat galite tyrinėti nemokamai Reaguoti katilinės kurie naudoja ShadCn kaip paruoštą naudoti pradinį tašką.