CodeBlanks Logo Icon CodeBlanks
Login Register

The layout pattern

Learn to write components that build a page skeleton with children.

Layout pattern

The layout pattern lets you write the app frame once and reuse it on every page. Header, sidebar and footer live inside the layout; page content is rendered in separate components.

This reduces repetition: you do not copy the same header into every page. It also enforces consistency: changing the frame in one place updates every page automatically.

In React Router, the layout wraps child routes with Outlet; each child renders at the Outlet location.

Router layout with Outlet

If you use React Router, you use Outlet instead of children. Outlet marks where the matched child route renders.

This means the layout does not need to know which child to render; the router matches automatically. The layout only provides the frame.

Layout and content evolve independently; adding a new page does not require changing the layout.

Practice Layout component

Complete the skeleton below. Write a Layout component; return a div containing <header>, <Outlet /> and <footer>. Export it.

Starter code

App.jsx
import { Outlet } from "react-router-dom";

// Write the Layout component here

Sample solution

App.jsx
import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <header>Başlık</header>
      <Outlet />
      <footer>Alt bilgi</footer>
    </div>
  );
}

export default Layout;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is the layout's job?

  • Renk paleti
  • Sharing the layout Correct answer
  • Fetching data
  • State tutmak

Explanation: Layout writes the frame once and shares it across pages.

2 Layout skeleton

Question 
function Layout({ children }) {
  return <div><header /><main>{____}</main><footer /></div>;
}
Answer 
function Layout({ children }) {
  return <div><header /><main>{children}</main><footer /></div>;
}

Explanation: children renders the page content into the layout.

3 The layout pattern: match the terms

Term Meaning
Layout Provides the frame
Outlet Child route slot
header Top area
footer Bottom area

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart