Как в гексагональной архитектуре разместить клиентское приложение на React

В гексагональной архитектуре клиентское приложение на React размещается во внешнем слое (adapter layer) как один из адаптеров для взаимодействия с пользователем. React-приложение общается с ядром (domain layer) через порты (interfaces), например, через API или сервисы. Пример структуры: ``` src/ core/ # Domain layer ports/ # Interfaces (ports) services/ # Business logic adapters/ web/ # React app components/ # UI components api/ # API clients (adapters for core ports) ``` React-компоненты вызывают методы API-адаптеров, которые реализуют порты ядра. Например: ```jsx // api/client.js (adapter) export const fetchProducts = async () => { return axios.get('/api/products'); // Implements core product port }; // components/ProductList.js import { fetchProducts } from '../api/client'; function ProductList() { const [products, setProducts] = useState([]); useEffect(() => { fetchProducts().then(data => setProducts(data)); }, []); return ; } ``` Ключевое - изолировать бизнес-логику в core, а React использовать только для рендеринга и обработки UI событий.