Как правильно создать layout страницы с изменяемым состоянием?

Для создания layout страницы с изменяемым состоянием в React вы можете использовать несколько подходов, в зависимости от сложности вашего проекта и требований к масштабируемости и переиспользованию компонентов.

Один из наиболее распространенных подходов - использование компонентов-контейнеров и компонентов-представлений. Компонент-контейнер отвечает за логику и состояние страницы, а компонент-представление - за отображение данных.

Для начала, создайте компонент-содержимое страницы, который будет управлять состоянием страницы и передавать его в компоненты-представления. Например, мы можем создать компонент App, который будет содержать <div>, внутри которого расположены компоненты-представления:

import React, { useState } from 'react';
import Header from './Header';
import Sidebar from './Sidebar';
import Content from './Content';

const App = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (
    <div>
      <Header />
      <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
      <Content />
    </div>
  );
};

export default App;

В данном примере мы создаем компонент App, который хранит внутри себя состояние isSidebarOpen и функцию toggleSidebar, которая изменяет это состояние. Это состояние мы передаем в компонент Sidebar в качестве пропса isOpen, а также передаем функцию toggleSidebar. Компоненты Header и Content также могут использовать это состояние, если им потребуется.

После этого создайте компоненты-представления для Header, Sidebar и Content. Пример для компонента Sidebar:

import React from 'react';

const Sidebar = ({ isOpen, toggleSidebar }) => {
  return (
    <div>
      <button onClick={toggleSidebar}>
        {isOpen ? 'Close Sidebar' : 'Open Sidebar'}
      </button>
      {isOpen && <nav> ... navigation items ... </nav>}
    </div>
  );
};

export default Sidebar;

В данном примере компонент Sidebar принимает два пропса: isOpen и toggleSidebar. Мы используем isOpen для определения, показывать ли нам боковую панель или нет, и toggleSidebar для вызова функции изменения состояния isSidebarOpen.

Компоненты Header и Content могут использовать пропсы по аналогии с компонентом Sidebar.

Такой подход позволяет легко управлять состоянием страницы и отображать разные компоненты в зависимости от его значения. Вы можете повторить этот подход для других компонентов и функционально расширять фронтенд вашего приложения на React.