DEV Community

Discussion on: 4 folder structures to organize your React & React Native project

Collapse
 
jackmellis profile image
Jack

Your hexagonal example is confusing even to someone who has been using HA on the front end for years!
It's significantly simpler than that (from my experience at least) if you just think in terms of ports and adapters:

UI/

Contains components/ hooks / assets and cares only about presentation (technically the ui is a port)

Ports/

Contains your services / api requests and has absolutely zero ui knowledge

Adapters/

Contain functions/hooks that connect your UI layer to your Ports layer

Domain/

Just contains pure business logic functions and model interfaces (if typescript is your thing)

If you follow it properly you end up with very clean separation of concerns