آشنایی با ساختار پوشه ها و فایل ها در ری اکت

Familiarity with the Structure of Project Folders and Files in React

برای برنامه نویسی react از ویرایشگر VSCode استفاده می کنیم. حواستان باشد که VSCode (مخفف Microsoft visual studio code) یک ویرایشگر سبک و رایگان است اما Microsoft Visual Studio یک IDE کامل و بسیار سنگین است که برای کدنویسی جاوا اسکریپت مناسب نیست. بنابراین حتما از لینکی که به شما داده شده است استفاده کنید.

برای درک ساختار پوشه های پروژه و فایل ها در ری اکت به پوشه پروژه خودتان مراجعه کنید. اگر از قسمت قبل یادتان باشد نام پوشه من complete-react-guide بود.

dependency ها یا وابستگی های پروژه (اسکریپت هایی که پروژه به آن نیاز دارد تا به طور صحیح کار کند) در فایل package.json قرار دارند. همانطور که می بینید این پروژه 3 وابستگی دارد:

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "1.1.5"
  },

اطلاعات دیگری نیز از قبیل نسخه react و... مشاهده می کنید. در حال حاضر من از نسخه 16.8 کتابخانه React استفاده می کنم اما شما در آینده نسخه های جدید تر را دریافت خواهید کرد. نگران این مسئله نباشید.

پوشه دیگری در root پروژه (صفحه اصلی پروژه - داخل پوشه complete-react-guid) وجود دارد: node_modules. این پوشه تمام وابستگی ها و وابستگی های وابستگی ها را در خودش نگهداری می کند. شما نباید به این پوشه دست بزنید چرا که هنگام اجرای دستور npm install به طور خودکار ساخته شده و تنظیمات مربوط به آن نیز انجام شده است.

پوشه public پوشه اصلی است که توسط وب سرور بین کاربران توزیع می شود اما هنگام توسعه فقط فایل هایی را دارد که می توانیم ویرایش کنیم و فایل های اسکریپت در پوشه src (مخفف source) قرار دارند. داخل این پوشه یک فایل index.html وجود دارد و تا آخر پروژه هیچ فایل HTML دیگری را به آن اضافه نمی کنیم. حتی اگر پروژه شما از نوع MPA است، صفحات آن را با استفاده از create-react-app می سازید نه اینکه به این قسمت فایل های HTML مختلفی را اضافه کنید.

داخل این فایل HTML یک div با "id="root وجود دارد. این عنصر بسیار مهم است چرا که عنصری است که کل برنامه ما درون آن قرار می گیرد. البته اگر نیاز داشتید که کتابخانه های دیگری (مثلا کتابخانه های CSS) را در فایل HTML بارگذاری کنید یا دوست دارید تگ های meta بیشتری اضافه کنید، می توانید این کارها را در همین فایل HTML انجام دهید. از این نظر مشکلی وجود ندارد.

فایل بعدی فایلی به نام manifest.json است که اطلاعات meta را در خود دارد. مانند نام برنامه ما، Favicon مورد استفاده، url ابتدایی و... . شما می توانید با خواندن چند خط کد داخل ای فایل متوجه کارایی آن شوید.

مهم ترین پوشه برای ما، پوشه src است. درون این پوشه همان فایل هایی وجود دارند که با آن ها کار خواهیم کرد و در واقع برنامه ما در این قسمت نوشته می شود. از بین این فایل ها، فایلی به نام index.js وجود دارد که فایل بسیار مهمی است. اگر وارد آن شوید می بینید که عنصر App را render می کند:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

این عنصر بالاتر از فایل app.js وارد شده است. توجه کنید که import کردن app.js بدین شکل می باشد:

import App from './App';

یعنی پسوند js. از دستور حذف شده است. اسکریپت های ما به صورت خودکار پسوند js را اضافه می کنند و نیازی به انجام این کار نیست. اگر وارد فایل App.js شوید اولین و تنها کامپوننت پروژه فعلی مان را می بینید:

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

از آنجایی که ما با این کدها کاری نداریم و می خواهیم پروژه خودمان را بنویسیم تمامی کدهای JSX بالا را از فایل آن حذف کرده و فقط div اولیه با کلاس "className="App را باقی بگذارید. سپس در آن یک تگ h1 ایجاد کرده و عبارت Hi, I’m a React App را بنویسید:

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hi, I'm a React App!</h1>
      </div>
    );
  }
}

همچنین کد مربوط به logo را نیز از آن حذف کنید:

import logo from './logo.svg';

از آنجایی که npm start را دارید (ر.ک به جلسه قبل) با ذخیره کردن این فایل محتوای مرورگر تغییر خواهد کرد. حالا می توانید فایل logo.svg را حذف کنید چرا که به آن نیازی نداریم.

فایل دیگری به نام App.css وجود دارد که استایل ها را برای پروژه ما تعیین می کند. تمامی کدهای این فایل را به جز کلاس app. حذف کنید. بنابراین محتوای این فایل بدین شکل خواهد بود:

.App {
  text-align: center;
}

فایل دیگری به نام index.css نیز وجود دارد که استایل های کلی را در خود نگه می دارد؛ مثلا استایل های مربوط به عنصر body و ...

فایل registerServiceWorker نیز مربوط به اجرای عملیات pre-cache و ... است و به صورت خودکار کار خودش را انجام می دهد. ما با این فایل کاری نخواهیم داشت. فایل آخر نیز App.test.js است که به ما اجازه ایجاد unit test را می دهد. در مورد مبحث تست کردن برنامه به طور مفصل صحبت خواهیم کرد اما هنوز وقت آن نشده است.

اکثر کدنویسی ما در همین فایل App.js انجام می شود و در جلسه بعدی به سراغ JSX و درک نحوه کار آن می پردازیم. امیدوارم این قسمت به شما درکی کلی از ساختار پوشه ها و وظیفه هر کدام از آن ها داده باشد.

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

Familiarity with the Structure of Project Folders and Files in React