React Folder Structure

[couds]

Hi All

I was thinking on. a folder structure like this

/src
|-- /componentes (Reusable components across all app like inputs, boxes, accordions, etc)
|-- /screens (like the pages on next but not directly related with routing, more like the type of screen (home, result list, item details, etc)
|-- /services (Here we can create the "connectors" to external services, helpers functions, any non-react oriented code)
|--/store ([OPTIONAL] if we use redux all the redux related code, actions, reducers, constants, ...)

And for component level like this

component-a/
|-- index.js (reexport the component and apply any HoC)
|-- component-a.js (The code of the component, without any HoC)
|-- styles.scss (I put scss but could by styled or any other)
|-- components/ (This is a personal preference but If a component have smaller components I like to put it inside this folder following the same structure)

What do you guys think about this?

Edit: I tried to use the /polls but didn't work T_T, lets use

👍 - Yes I let's use this structure

👎 - No, Let use something else

[lostpebble]

Looks good to me. Except I don't like making use of /index.js as the export for the component. I prefer to use the full name of the component- as then we avoid "implied" imports in other JS files, like import ImageComponent from "./components/ImageComponent"- which is actually importing /ImageComponent/index.js instead of what could be confused as ./components/ImageComponent.js.

So instead, I think we should always use the full component name for the file: /components/ImageComponent/ImageComponent.js.

Would rather remove all ambiguity- same goes for default exports. Would prefer if we always name our exports- so not making use of export default ImageComponent or whatnot- rather export const ImageComponent = () => {}

I see that a lot of people in the React community are finally starting to catch on and work this way now too- it just helps to make things more "static" and direct.

Could be that I work with TypeScript a lot- and these kinds of things just make it easier overall to deal with auto-imports and stuff (helps the IDE know what you actually want when you type it).

[couds]

I'm thinking on a middle ground. Wdyt inde.js with named export?

[lostpebble]

Yea, cool. Lets do that. My dislike for index.js isn't as much as default exports 😄

[lostpebble]

I just remembered why I don't tend to enjoy index.js - because when I use the functionality in my IDE of "Search for filename", and I start searching for "ImageComponent"- it won't find it. And generally these search functions don't search on folder names.

But its all good- not something we should be getting too caught up on anyway.

[couds]

Haha 100% agree with the index issue. That's why I suggest to use only for import export. (I had the same issue with the search and hate it.. >.<)

No actual code should be on the index.js file 👍

I will work this weekend on preparing the folder structure and install the UI library.

Also try to make a mockups so we can follow for the design (don't expect much on my design skill xD)

[lostpebble]

Hahah cool, sounds good!

Should we use something like Figma? Easy to share and collaborate with.

I'm guessing we just focus on Desktop UI ? I know mobile-first is important, but this is just a demo project after all... can get a bit annoying having to balance between the two.

You should also take a look at what @cw00dw0rd has put together on the Vue project already. Spin it up and take a look, he has already got some interface stuff in which might give us a bit of direction.

Let me know once you've got the basic structure in, and I'll add some Store stuff and make the first connection to the backend (API Async action things) using Pullstate for us to work with.