سازمان‌دهی کامپوننت‌ها در پروژه‌های واقعی

مقدمه

تاکنون، ما تمام کامپوننت‌های خود را در فایل App.js یا فایل‌های مجزا در ریشه پوشه src تعریف کرده‌ایم. این روش برای پروژه‌های کوچک قابل قبول است، اما با رشد اپلیکیشن و افزایش تعداد کامپوننت‌ها، این ساختار به سرعت شلوغ و غیرقابل مدیریت می‌شود. یک ساختار پروژه تمیز و منطقی، پیدا کردن کد، دیباگ کردن و افزودن قابلیت‌های جدید را بسیار آسان‌تر می‌کند.

ایجاد یک پوشه components

یک الگوی بسیار رایج و کارآمد در پروژه‌های React، ایجاد یک پوشه اختصاصی به نام components در داخل پوشه src است. این پوشه به عنوان خانه‌ای برای تمام کامپوننت‌های قابل استفاده مجدد اپلیکیشن شما عمل خواهد کرد.

ساختار فایل

هر کامپوننت باید در فایل جاوااسکریپت مخصوص به خود قرار گیرد و نام فایل باید با نام کامپوننت (با PascalCase) مطابقت داشته باشد. برای مثال:

src/
└── components/
    ├── Header.js
    ├── Footer.js
    ├── Button.js
    └── UserProfile.js
                    

این ساختار به شما اجازه می‌دهد تا به سرعت کامپوننت مورد نظر خود را پیدا کنید و منطق مربوط به هر بخش از UI را به صورت کاملاً ایزوله نگه دارید.

یک مثال عملی

بیایید کامپوننت Greeting از درس قبل را به این ساختار جدید منتقل کنیم.

۱. ایجاد فایل کامپوننت

ابتدا، یک پوشه جدید به نام components در داخل src بسازید. سپس، در داخل این پوشه، یک فایل جدید به نام Greeting.js ایجاد کرده و کد کامپوننت Greeting را در آن قرار دهید.

src/components/Greeting.js

import React from 'react';

function Greeting({ name, message }) {
  return (
    <div>
      <h2>{message}</h2>
      <p>This is a message for {name}.</p>
    </div>
  );
}

export default Greeting;

۲. استفاده از کامپوننت در App.js

حالا، در کامپوننت App می‌توانیم Greeting را از مسیر جدیدش وارد کرده و از آن استفاده کنیم.

src/App.js

import Greeting from './components/Greeting';

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Greeting name="Sarah" message="Welcome back!" />
      <Greeting name="John" message="Hello there!" />
    </div>
  );
}

export default App;

همانطور که می‌بینید، فایل App.js اکنون بسیار تمیزتر است و تنها مسئولیت چیدمان کلی صفحه را بر عهده دارد، در حالی که جزئیات پیاده‌سازی کامپوننت Greeting در فایل مخصوص به خود کپسوله شده است.

نتیجه‌گیری

در این درس، با یک الگوی ساده اما بسیار مؤثر برای سازماندهی کامپوننت‌ها در پروژه‌های React آشنا شدیم. ایجاد یک پوشه components و قرار دادن هر کامپوننت در فایل مجزای خود، یک استاندارد صنعتی است که به مقیاس‌پذیری و قابلیت نگهداری پروژه شما کمک شایانی می‌کند.

با این درس، فصل «کامپوننت‌های تابعی» به پایان می‌رسد. شما اکنون می‌توانید کامپوننت‌های تابعی بسازید، با استفاده از props به آنها داده ارسال کنید و آنها را در یک ساختار پروژه منظم سازماندهی کنید. در فصل بعدی، به سراغ یکی از هیجان‌انگیزترین و بنیادی‌ترین مفاهیم React، یعنی «تعاملی‌کردن ری‌اکت با state»، خواهیم رفت.