Skip to content

Instantly share code, notes, and snippets.

@cooperka

cooperka/React redux component structure.md

Last active May 2, 2019 23:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cooperka/96227c5731a5f8de3f630f6505b0344c to your computer and use it in GitHub Desktop.
Save cooperka/96227c5731a5f8de3f630f6505b0344c to your computer and use it in GitHub Desktop.
Download ZIP
How I personally organize my React components.
Raw
React redux component structure.md 
src/
  index.js                # Renders an <App /> component.
  reducers.index.js       # Exports a root Redux reducer (or MobX store).

  components/
    MyComponent/
      component.js        # Exports MyComponent.
      component.test.js   # Contains tests.
      actions.js          # Exports Redux "action type" strings and "action creator" functions.
      reducers.js         # Exports Redux reducers (or MobX stores).
      someQuery.gql       # Contains a particular GraphQL query for Apollo (one file per query).
                          #   Alternatively, use `sources.js` to export manual data-fetching functions (like AJAX).
      utils.js            # Exports miscellaneous utility functions for MyComponent.
      utils.test.js       # Contains tests.
      styles.css          # Or styles.js for React Native.

      index.js            # Exports MyComponent from component.js (optional convenience).

      MySubComponent/     # Same directory structure for any sub-components.

    MyOtherComponent/     # Same directory structure for any other components.
@cooperka
Copy link
Author

Medium post with more details: https://medium.com/@cooperka/structure-react-apps-197a8ced3c21

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment