react-organization.md

Example Structure

/
    /scripts
    /src
        /assets
            /css
            /font
            /img
            /svg
        /core
            /graphql
                apollo.tsx
                state.tsx
            /themes
                dark.tsx
                light.tsx
            /tests
            /services
            /store
            /data
        /shared
            /utils
            /components
                /charts
                /Button
        /App
            /Navbar
                /Profile
                /Search
                index.tsx
                NavBar.tsx
                NavBar.scss
                NavBar.test.tsx
            /Dashboard
                /ActivityFeed
                    index.tsx
                    ActivityFeed.tsx
                    ActivityFeed.scss
                    ActivityFeed.test.tsx
                index.tsx
                Dashboard.tsx
                Dashboard.scss
                Dashboard.test.tsx
            App.tsx
            App.scss
            AppRoutes.tsx
        index.tsx
        index.html

Breakdown

Application features are grouped by feature type implementing a SRP pattern for all components and functions.

• scripts/ - Any scripts (js/sh/etc) that are specific to the application build or deployment.
• src/assets - Static assets such as images, svgs, css, fonts. No javascript should be here.
• src/core - Global state, services and configuration specific to the application itself.
• src/shared - Components and functions that are not coupled to the application itself. Nothing in this folder should reference anything outside of shared.
• src/shared/components - DRY components
• src/shared/utils - Misc utils.
• src/App - The application itself that is glueing all the components together. This should not have any startup code/etc.
• src/App/* - Stateful components that make up specific features of the application. These should not reference any other stateful components outside of their folder. Any component that is specific to this feature should be nested within this feature folder.
• src/index.tsx - The bootstrapping of the app component.

Conventions

• Each function should have a single class (export ideally)
• Barrels should be used to export the consumable functions of the feature/function. Avoid broad sweeping exports for tree shaking reasons.
• File names should be named the same as their exports.
• Try to make components DRY where possible with state being passed down. This will make testing easier.

References

• https://github.com/markerikson/react-redux-links/blob/master/project-structure.md
• https://github.com/enaqx/awesome-react#boilerplates
• https://github.com/leebenson/reactql/tree/master/src
• https://github.com/graphcool-examples/react-graphql/tree/master/quickstart-with-apollo/src/components
• https://github.com/atomicobject/ts-react-graphql-starter-kit/tree/master/modules/client
• https://github.com/react-boilerplate/react-boilerplate
• https://github.com/sysgears/apollo-universal-starter-kit/tree/master/packages/client/src/modules
• https://github.com/graphcool-examples/react-graphql/blob/master/quickstart-with-apollo/src/components/CreatePage.js
• https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/contact/containers/Contact.jsx#L5

"Each function should have a single class (export ideally)"
You mean "each file"?

DRY in programming usually means "Don't repeat yourself". I would just say "Try to keep GraphQL operations out of components where possible with state being passed down from a parent container".

src/shared/utils - Misc utils.

This seems like a catch-all directory. I would be interested to know what we specifically expect this folder to contain.