I feel you completely on the issue of naming components, Abhi :D! I’ve been battling with this meta for a while now. My personal take is that we have amazing technologies, but have yet to come up with the correct terms to describe the concepts. That is why I’m trying out different naming approaches. In my opinion, the terms we have right now (generally accepted by the community) — “ContainerComponent”, “DumbComponent”, “SmartComponent”, etc, are simply awful. They are not nearly precise enough to explain their semantic function. The worst offender is Container. Container of what — a component, another container, rice, apples?…you get the idea :).
Two thumbs up on the idea of a single component file. Another approach I have been toying with for a bigger project is:
PersonList.visual.js => the visual, dumb component
PersonList.data.js => GraphQL query
PersonList.actions.js => Redux stuff, including reducer
PersonList.component.js => The Container :) or combination of the above
About the ‘export default Container(List)’, I have also gone this way :). The only issue I’m having with it, is that it is sometimes difficult to find the composed element in IntelliJ’s Search Everywhere function :).
Anyway, thanks again. I’ll be looking forward to you next article!