Is there an official style guide or naming convention for React based projects?

Question

I\'m setting up a React project with my team that will use mobX as state manager, plus TypeScript.

I\'ve seen a common pattern in the casing and naming patterns in R

Answer 1

At the moment i have a Folder named in PascalCase and within it i have an index.js file - this is my Component.

Any Components directly attached to the root Component i have nested in their own Folder with their own index.js. I also use dot notation to describe the nature of any files directly related to that folder e.g [descriptor].[name].[prefix]

Components/
    ComponentName/
    |---util.componentName.js
    |---constants.componentName.js
    |---styles.componentName.scss
    |---index.js
        ChildComponent1/
        |---util.childComponent1.js
        |---styles.childComponent1.scss
        |---index.js
        ChildComponent2/
        |---util.childComponent2.js
        |---styles.childComponent2.scss
        |---index.js

And for my mobx Store, because i'm less likely to have a real deep folder structure with my store modules i have one Root module-Folder with normally two js files within them Actions.js & index.js index being my main store Class that extends my Actions class. (i found that one mobx class with observable, computed and action properties got a bit cluttered).

The Store folder itself has an index.js which imports all sibling store-modules in-order to combine them into one store Object later on (needed for my project)

Store/
    StoreModule/
    |---actions.js
    |---index.js
    AnotherStoreModule/
    |---actions.js
    |---index.js
    index.js

I suppose there is no REAL right way as it's down to preference, the way above i find readable and when using tools on VSCode to find files it can make it easier when searching for specifics like "i want to see all files that are constants files" searches for constants.[component name]