مرور ساختار فایل‌ها و دایرکتوری‌ها

آموزش React

آشنایی با ساختار پروژه

در درس قبل، ما با موفقیت اولین پروژه React خود را با استفاده از Create React App ایجاد کردیم. این ابزار یک ساختار فایل و پوشه استاندارد برای ما ایجاد می‌کند که دانستن نقش هر بخش، برای توسعه اپلیکیشن ضروری است. در این درس، به بررسی مهم‌ترین فایل‌ها و پوشه‌های ایجاد شده خواهیم پرداخت.

ساختار دایرکتوری

وقتی پوشه پروژه خود (hello-react) را باز می‌کنید، چندین فایل و پوشه را در سطح اصلی آن مشاهده خواهید کرد: 

hello-react/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

پوشه node_modules

این پوشه حاوی تمام وابستگی‌ها و پکیج‌های جاوااسکریپت است که پروژه شما به آنها نیاز دارد (مانند خود React). این پوشه به صورت خودکار توسط npm مدیریت می‌شود و شما هرگز نباید آن را به صورت دستی تغییر دهید. این پوشه معمولاً بسیار حجیم است و در سیستم کنترل نسخه (مانند Git) نادیده گرفته می‌شود.

فایل‌های package.json و package-lock.json

فایل package.json حاوی متادیتای پروژه شماست، از جمله نام، نسخه، و لیستی از وابستگی‌های لازم برای توسعه و اجرا. فایل package-lock.json یک رکورد دقیق از نسخه دقیق هر پکیج نصب شده را نگه می‌دارد تا تضمین کند که تمام اعضای تیم و سرور پروداکشن دقیقاً از یک نسخه یکسان از وابستگی‌ها استفاده می‌کنند.

پوشه public

پوشه public حاوی فایل‌های استاتیک پروژه است. مهم‌ترین فایل در این پوشه، index.html است.

فایل public/index.html

این تنها فایل HTML در اپلیکیشن تک-صفحه‌ای شماست. این فایل، «پوسته» یا shell اصلی اپلیکیشن شماست. React تمام کامپوننت‌ها را به صورت پویا در داخل این فایل تزریق خواهد کرد. اگر به محتوای آن نگاه کنید، یک تگ <div> با id="root" پیدا خواهید کرد. این همان نقطه‌ای است که اپلیکیشن React ما در آن رندر خواهد شد.

پوشه src

این پوشه، قلب تپنده اپلیکیشن شماست و شما بیشتر وقت خود را در اینجا صرف خواهید کرد. پوشه src حاوی تمام کدهای جاوااسکریپت، CSS و کامپوننت‌های React شماست.

فایل src/index.js

این فایل، نقطه ورود (entry point) اصلی اپلیکیشن React شماست. این فایل مسئولیت پیدا کردن عنصر <div id="root"> در index.html و رندر کردن کامپوننت اصلی اپلیکیشن (App) در داخل آن را بر عهده دارد.

Copy Icon src/index.js 
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

فایل src/App.js

این فایل، کامپوننت اصلی و ریشه اپلیکیشن شما را تعریف می‌کند. تمام کامپوننت‌های دیگری که می‌سازید، در نهایت به صورت تودرتو در داخل کامپوننت App قرار خواهند گرفت. در حال حاضر، این فایل حاوی کدهای مربوط به صفحه خوشامدگویی پیش‌فرض React است.

در این درس، با ساختار استاندارد یک پروژه React که توسط Create React App ایجاد شده، آشنا شدیم. دیدیم که چگونه فایل‌های public/index.html و src/index.js با هم کار می‌کنند تا اپلیکیشن ما را رندر کنند و فهمیدیم که تمرکز اصلی ما بر روی کار با فایل‌های داخل پوشه src خواهد بود. در درس بعدی، «اجرای اولین کامپوننت ساده»، ما فایل src/App.js را ویرایش کرده و اولین کامپوننت سفارشی خود را خواهیم ساخت.