پیکربندی نظر اجزای ReactJS Vite Tailwind Styled

ek3nk4r 2023-04-06

0 38 6 دقیقه قبل خوانده شده

پیکربندی نظر اجزای ReactJS Vite Tailwind Styled

پیشنهاد ویژه

قیمت لیر ترکیه اعزام دانشجو تحصیل در ترکیه خرید فالوور اینستاگرام

در این مقاله به شما نحوه نصب و پیکربندی کامپوننت های tailwind و styled را به صورت مرحله به مرحله بر روی یک برنامه ReactJS با استفاده از Vite نشان خواهم داد.

این هم لینک github پروژه، در صورت بروز مشکل در مراجعه به آن تردید نکنید:

🔗 https://github.com/Delmotte-Vincent/template-react-vite-tailwind-styled-component

فهرست مطالب

ایجاد یک ReactJS Typescript Application با Vite

برای شروع، بیایید یک پروژه React با Vite ایجاد کنیم. برای تولید پروژه دستور زیر را اجرا کنید.

npm create vite@latest

در ترمینال چندین سوال از شما پرسیده می شود، با توجه به نیاز خود پاسخ دهید. در این آموزش من به صورت زیر پاسخ دادم:

√ Select a framework: » React
√ Select a variant: » TypeScript

پس از ایجاد پروژه، به ریشه دومی بروید، سپس وابستگی های مختلف را نصب کنید و برنامه را اجرا کنید.

cd project-name
npm install
npm run dev

هنگامی که برنامه راه اندازی شد (حدود 5 ثانیه، سریع با نام مناسب)، به آدرس اینترنتی زیر بروید: http://localhost:5173/. شما باید صفحه ای مانند این داشته باشید:

نصب د tailwind

بیایید به نصب tailwind برویم. شما باید سه وابستگی زیر را نصب کنید:

دم بادcss
postcss
پیشوند خودکار

برای دانلود وابستگی ها دستور زیر را اجرا کنید.

npm install -D tailwindcss postcss autoprefixer

پس از اتمام نصب، باید یک package.json که شبیه این است:

// package.json
"devDependencies": {
    ...
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1",
    ...
}

سپس باید فایل های پیکربندی اختصاصی tailwind را ایجاد کنید. برای انجام این کار، ساده است، دستور زیر را اجرا کنید:

npx tailwindcss init -p

این دستور یک فایل ایجاد می کند tailwind.config.js و یک فایل **postcss.config.js** در ریشه پروژه. این فایل‌ها به شما امکان می‌دهند تا tailwind را در برنامه خود و به آن هدایت کنید گزینه های مختلف را پیکربندی کنید مانند جاهایی که tailwind اعمال می‌شود، تنظیم موضوع یا افزودن افزونه‌ها.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

ما تقریباً با نصب tailwind تمام شده ایم، فقط باید دو خط زیر را در فایل اضافه کنیم tailwind.config.js.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
        "./index.html", // ✅ ajoutez cette ligne
    "./src/**/*.{js,jsx,ts,tsx}" // ✅ ajoutez cette ligne
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

آنها را اضافه کنید دستورات دم باد در فایل index.css و voila

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

با حذف تمام محتوای غیر ضروری پروژه خود را به راحتی تمیز کنید index.css و همچنین محتویات فایل App.tsx مثل این :

// App.tsx
import './App.css'

function App() {
  return (
    <div className="App">
    </div>
  )
}

export default App

در حال بررسی تنظیمات باد عقب

در این مرحله، باد دم روی پروژه شما نصب شده است. قبل از حرکت، مطمئن شویم که همه چیز به درستی کار می کند!

برای تست اینکه همه چیز خوب کار می کند، پیشنهاد می کنم محتویات فایل را جایگزین کنید App.tsx توسط کد زیر:

// App.tsx
import './App.css'

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}

export default App

برنامه را دوباره راه اندازی کنید، باید صفحه زیر را داشته باشید:

تبریک می‌گوییم، اگر صفحه بالا را دارید، می‌توانیم ادامه دهیم. اگر اینطور نیست، مراحل اول را تکرار کنید، ممکن است یک جزئیات را از دست داده باشید!

نصب و راه اندازی اجزای سبک

بیایید به نصب و راه اندازی بپردازیم اجزای سبک. برای این کار دستور زیر را اجرا کنید.

npm install --save styled-components

همانطور که در این آموزش استفاده می کنیم TypeScript، ما وابستگی انواع ابزارهای styled-components را نصب می کنیم.

npm i --save-dev @types/styled-components

package.json شما باید به شکل زیر باشد:

// package.json
"dependencies": {
    ...
    "styled-components": "^5.3.9"
    ...
},
"devDependencies": {
    ...
    "@types/styled-components": "^5.1.26",
    ...
}

بررسی تنظیمات مولفه مدل‌دهی شده

در مورد دم باد، بیایید قبل از حرکت بررسی کنیم که همه چیز به درستی کار می کند. کد زیر را در قسمت اضافه کنید App.tsx به منظور تأیید آن اجزای سبک به درستی نصب شده است.

// App.tsx
import './App.css'
import styled from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
      <Button>Button</Button>
    </div>
  )
}

export default App

پروژه را ذخیره کنید، باید عنوان و دکمه ای مانند این روی صفحه نمایش داده شود:

توضیحات تصویر

اگر همه چیز به درستی نمایش داده شود، می توانید ادامه دهید! برای بقیه، این نتیجه‌گیری خواهد بود و شما باید دوباره تست کامپوننت‌های استایل داده شده را بدهید!

راه اندازی اجزای tailwind و مدل داده شده

بیایید به مرحله مهم این نصب برویم. نصب tailwind پیچیده نیست و اجزای سبک نیز پیچیده نیست، اما استفاده از این دو در هماهنگی بسیار کمتر پیش پا افتاده است.

قبل از استفاده از این ابزار عالی، باید کمی بیشتر نصب و راه اندازی کنید، اما صبر خود را از دست ندهید، همه اینها ارزش هزینه را دارد!

برای شروع، باید وابستگی های زیر را نصب کنید:

کامپوننت های به سبک tailwind
دوقلو.ماکرو
vite-plugin-babel-macros
postcss-import

npm install tailwind-styled-components twin.macro vite-plugin-babel-macros postcss-import

پس از نصب وابستگی ها، بیایید شروع به اضافه کردن کنیم macrosPlugin به لیست پلاگین های vite.config.ts.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import macrosPlugin from 'vite-plugin-babel-macros'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), macrosPlugin()],
})

سپس اقدامات زیر را روی فایل انجام دهید postcss.config.js :

نام فایل را با پسوند تغییر دهید cjs
به افزونه ها اضافه کنید postcss-import
صادرات فایل را با module.exports

فایل زیر را دریافت می کنید:

// postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

اقدامات زیر را روی فایل انجام دهید tailwind.config.js :

نام فایل را با پسوند تغییر دهید cjs
صادرات فایل را با module.exports

فایل زیر را دریافت می کنید:

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

همین، به آخر سفر رسیدی! بیایید به بررسی برسیم.

بررسی تنظیم مؤلفه به سبک tailwind

بیایید تعلیق را دوام نیاوریم، بیایید بررسی کنیم که همه این افراد زیبا در پروژه ما با هم هماهنگی داشته باشند.

برای تأیید، کد فایل را تغییر دهید App.tsx مثل این :

import './App.css'
import tw from 'twin.macro'
import styled from 'styled-components'

const Button = styled.button`
  ${tw`
    bg-transparent
    rounded-sm
    border
    border-blue-500
    text-blue-500
    border-solid
    m-1
    px-4
    py-1
  `}
`

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
      <Button>Button</Button>
    </div>
  )
}

export default App

پروژه را ذخیره کنید و از ثمره تلاش خود لذت ببرید. اگر صفحه زیر در رایانه شما ظاهر شد، برنده شده اید!

توضیحات تصویر

نتیجه

برای نتیجه گیری، نحوه نصب را دیدیم باد دم et کامپوننت های مدل دار. ما همچنین دیدیم که چگونه کل چیز را برای استفاده از قدرت tailwind و ترکیب اجزای مدل دار پیکربندی کنیم.

این ابزارها به شما این امکان را می‌دهند که جلوه‌ای از آن بسازید کیفیت که کد آن بیشتر خواهد بود قابل خواندن است et مختصر.

از آزمایش این ابزارها دریغ نکنید و به من بازخورد بدهید تا تجربه خود را به اشتراک بگذارم!

من لینک آن را به شما می دهم Github بنابراین می توانید یک پروژه کاری با کل راه اندازی داشته باشید.

🔗 https://github.com/Delmotte-Vincent/template-react-vite-tailwind-styled-component

ek3nk4r 2023-04-06

0 38 6 دقیقه قبل خوانده شده