Как реализовать структуру проекта с общими?

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

Ниже приведена подробная структура проекта с общими компонентами, которую вы можете использовать как отправную точку для своего проекта на React:

Корневая папка проекта:

src/ - папка, содержащая весь исходный код вашего проекта
public/ - папка, содержащая статические файлы проекта (например, index.html, изображения и т.д.)
package.json - файл конфигурации npm проекта

Папка src/:

components/ - папка, содержащая все компоненты проекта
pages/ - папка, содержащая основные страницы приложения
utils/ - папка, содержащая утилитарные функции и вспомогательные модули
styles/ - папка, содержащая глобальные стили и стили компонентов
App.js - главный файл приложения, в котором происходит маршрутизация и рендеринг основных компонентов
index.js - файл, который рендерит главный компонент App и подключает его к DOM

Папка components/:

atoms/ - папка, содержащая маленькие, независимые компоненты (например, кнопки, инпуты)
molecules/ - папка, содержащая компоненты, состоящие из нескольких атомов (например, формы, карточки)
organisms/ - папка, содержащая компоненты, состоящие из нескольких молекул или атомов (например, шапки, футера)
templates/ - папка, содержащая компоненты, определяющие общую структуру страницы (например, макеты с боковым меню)
index.js - файл, который экспортирует все компоненты для общего использования

Пример структуры компонента Button:

Button.js - файл, содержащий код компонента Button
Button.styles.js - файл, содержащий стили компонента Button
Button.test.js - файл, содержащий тесты для компонента Button

Пример использования общего компонента:

   import React from 'react';
   import Button from './components/Button';

   const App = () => {
     return (
       <div>
         <Button>Click me</Button>
       </div>
     );
   };

   export default App;

Это всего лишь пример структуры проекта на React с общими компонентами. Вы можете настроить его в соответствии со своими потребностями и привычками разработки. Однако, использование подхода Atomic Design поможет вам создать модульный, масштабируемый и легко сопровождаемый проект на React.