برنامه نویسی

بسته، واکنش و باد به ماه

ek3nk4r 2023-02-17

0 38 خواندن این مطلب 2 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

بسته، واکنش و باد به ماه

در سال‌های اخیر، به لطف فناوری‌های مدرن، توسعه اپلیکیشن‌های تحت وب آسان‌تر از همیشه شده است. در این مقاله به شما نشان خواهم داد که چگونه با استفاده از Parcel، Tailwind و React این کار را حتی ساده تر کنید.
Parcel یک بسته نرم افزاری سبک و سریع برای برنامه های کاربردی وب است که به شما امکان می دهد پروژه خود را به راحتی و کارآمد مدیریت کنید. Tailwind یک چارچوب CSS است که برای ایجاد رابط های تمیز و مدرن استفاده می شود، در حالی که React، خوب، React است و نیازی به معرفی ندارد.
بدون هیچ مقدمه ای، بیایید شروع به ایجاد برنامه وب خود کنیم!

mkdir my-webapp
npm init -y
npm i -D parcel
npm i react react-dom
mkdir src
touch src/index.html
npm i -D tailwindcss postcss
npx tailwindcss init

قبل از اینکه کد را بررسی کنیم، باید کد خود را ویرایش کنیم package.json به شرح زیر است

{
  "name": "my-webapp",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.8.3",
    "postcss": "^8.4.21",
    "process": "^0.11.10",
    "tailwindcss": "^3.2.6"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

در داخل پوشه root a ایجاد کنید postcss.config.js فایل و به صورت زیر پیکربندی کنید

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
};

یک فایل به نام ایجاد کنید .postcssrc در همان مسیر و چسباندن:

{
  "plugins": {
    "tailwindcss": {}
  }
}

کد داخل tailwind.config.js را حذف کرده و اضافه کنید

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

که در ./src یک فایل به نام ایجاد کنید index.css و آن را پر کنید:

@tailwind base;
@tailwind components;
@tailwind utilities;

و پر کن ./src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./index.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

اکنون ایجاد کنید index.js فایلی که در آن با استفاده از react شروع به کدنویسی خواهید کرد.

import { createRoot } from 'react-dom/client';
createRoot(app).render(
<div>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</div>
);

برای اجرای آن به صورت محلی کافی است اجرا کنید

npx parcel ./src/index.html
or
npm run serve

برای ساخت پروژه

npx parcel build ./src/index.html

⚠️ اگر پس از ساختن و استقرار کد خود بر روی یک وب سرور، در رابطه با مسیرهای نسبی با خطایی مواجه شدید، ممکن است لازم باشد به شکل زیر بسازید:

parcel build --public-url ./ ./src/index.html

بازتاب های پایانی

با استفاده از Parcel، React و Tailwind، ایجاد یک برنامه وب بسیار کارآمد آسان است. با استفاده از Parcel، می توانید پروژه خود را به طور موثر و سریع مدیریت کنید و با React و Tailwind یکپارچه شوید تا یک برنامه وب ارزشمند ایجاد کنید.
فراموش نکنید که ویژگی های پیشرفته آنها را برای سفارشی کردن تجربه توسعه خود کشف کنید.