اسکریپت‌های npm در React

پس از آشنایی با ساختار فایل‌ها، حالا نوبت به بررسی اسکریپت‌های موجود در فایل package.json می‌رسد. این اسکریپت‌ها در بخش scripts تعریف شده‌اند و معمولاً شامل موارد زیر هستند:

"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"

برای اجرای هر اسکریپت، از دستور npm run <script> استفاده می‌کنیم:

• npm run dev: اجرای پروژه به‌صورت محلی
• npm run lint: بررسی خطاهای نگارشی و ساختاری کد
• npm run build: ساخت پروژه برای انتشار نهایی
• npm run preview: مشاهده نسخهٔ تولیدی پس از اجرای build

توجه داشته باشید که npm run preview فقط پس از اجرای npm run build قابل استفاده است.

اولین کامپوننت React

در فایل src/App.jsx اولین کامپوننت React تعریف شده است. این کامپوننت در واقع یک تابع جاوااسکریپت است که با حرف بزرگ شروع می‌شود (PascalCase) و به‌عنوان function component شناخته می‌شود.

نسخهٔ ساده‌شده برای شروع:

function App() {
  return (
    

      
Hello React
    
  );
}
export default App;

برای شروعی ساده، می‌توان فایل‌های App.css و index.css را خالی کرد تا بدون استایل‌های پیش‌فرض کار کنیم.

نکات کلیدی در کامپوننت‌ها

• کامپوننت‌ها باید با حرف بزرگ شروع شوند تا توسط React به‌عنوان کامپوننت شناخته شوند.
• در ابتدا کامپوننت‌ها پارامتر ندارند، اما در ادامه با props آشنا خواهیم شد.
• کدی که کامپوننت بازمی‌گرداند شبیه HTML است، اما در واقع JSX است — ترکیبی از جاوااسکریپت و HTML.

متغیرهای داخلی و خارجی

متغیرهایی که داخل تابع تعریف می‌شوند، در هر بار اجرای تابع دوباره تعریف می‌شوند. اگر متغیری به داده‌های داخلی تابع وابسته نیست، بهتر است آن را خارج از تابع تعریف کنیم:

const title = 'React';
function App() {
  return (
    

      
Hello {title}
    
  );
}
export default App;

این روش باعث بهینه‌سازی عملکرد و جلوگیری از تعریف مجدد متغیرها در هر بار رندر می‌شود.

جمع‌بندی

با استفاده از اسکریپت‌های npm می‌توان پروژه React را اجرا، بررسی، و آمادهٔ انتشار کرد. همچنین با تعریف کامپوننت‌ها به‌صورت تابعی، می‌توان ساختار ساده و قابل‌فهمی برای شروع یادگیری React ایجاد کرد. در ادامه، با مفاهیم JSX، props، و مدیریت وضعیت بیشتر آشنا خواهیم شد.