پس از آشنایی با ساختار فایلها، حالا نوبت به بررسی اسکریپتهای موجود در فایل 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 قابل استفاده است.
در فایل src/App.jsx اولین کامپوننت React تعریف شده است. این کامپوننت در واقع یک تابع جاوااسکریپت است که با حرف بزرگ شروع میشود (PascalCase) و بهعنوان function component شناخته میشود.
function App() {
return (
Hello React
);
}
export default App;برای شروعی ساده، میتوان فایلهای App.css و index.css را خالی کرد تا بدون استایلهای پیشفرض کار کنیم.
متغیرهایی که داخل تابع تعریف میشوند، در هر بار اجرای تابع دوباره تعریف میشوند. اگر متغیری به دادههای داخلی تابع وابسته نیست، بهتر است آن را خارج از تابع تعریف کنیم:
const title = 'React';
function App() {
return (
Hello {title}
);
}
export default App;این روش باعث بهینهسازی عملکرد و جلوگیری از تعریف مجدد متغیرها در هر بار رندر میشود.
با استفاده از اسکریپتهای npm میتوان پروژه React را اجرا، بررسی، و آمادهٔ انتشار کرد. همچنین با تعریف کامپوننتها بهصورت تابعی، میتوان ساختار ساده و قابلفهمی برای شروع یادگیری React ایجاد کرد. در ادامه، با مفاهیم JSX، props، و مدیریت وضعیت بیشتر آشنا خواهیم شد.