مدل React به ما امکان می‌دهد یک صفحه را به یک سری از کامپوننت‌ها تقسیم کنیم. بسیاری از این کامپوننت‌ها اغلب بین صفحات تکرار می‌شوند. به عنوان مثال، هر صفحه دارای یک نوار ناوبری (Navbar) و پاورقی (Footer) یکسان باشد.
```jsx
import Navbar from './navbar'
import Footer from './footer'
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
```
در این کد، ابتدا دو کامپوننت `Navbar` و `Footer` را import می‌کنیم. سپس یک کامپوننت جدید به نام `Layout` تعریف می‌کنیم. این کامپوننت دارای یک پارامتر به نام `children` است که وظیفه‌اش قرار دادن کامپوننت‌های فرزند درون خود است. بدین ترتیب، هر آنچه که بین تگ‌های `<Layout>` و `</Layout>` قرار داده می‌شود، به عنوان `children` در کامپوننت `Layout` قرار می‌گیرد.
در بدنه کامپوننت `Layout`، دو کامپوننت `Navbar` و `Footer` قرار داده شده‌اند. همچنین یک تگ `<main>` نیز وجود دارد که هر آنچه که درون آن قرار داده می‌شود، به عنوان محتوای اصلی صفحه در نظر گرفته می‌شود. با استفاده از این کامپوننت `Layout`، می‌توانیم کامپوننت‌های فرزند را در سایر صفحات استفاده کنیم و در همه صفحات نوار ناوبری و پاورقی را به صورت یکپارچه درج کنیم.
این الگوی طراحی، کاربردی است و به شما امکان می‌دهد کامپوننت‌های مشترک را در یک قالب (Layout) جداگانه قرار دهید و آنها را در صفحات مختلف استفاده کنید. این کد نمونه تمام صفحاتی است که از این قالب استفاده می‌کنند را نشان می‌دهد.
