I'm slowly learning how to break things up into ponents but my OCD is going mad on one particular one. I have a tab view containing lots of different cards / panels. Standard dashboard. However my import statements are growing quickly as I add new cards ( and redux actions ).

import { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
import { fetchMatches } from '../../actions/matchAction'
import MatchingCard from '../../ponents/MatchingCard'
import MapCard from '../../ponents/MapCard'
import ImageCard from '../../ponents/ImageCard'
import DocumentCard from '../../ponents/DocumentCard'

What would be a standard pattern to tidy this up? Put all those classes in one file? I was going to create an import file but I'd still be in the same scenario of adding many imports?

Any advice would be appreciated.

I'm slowly learning how to break things up into ponents but my OCD is going mad on one particular one. I have a tab view containing lots of different cards / panels. Standard dashboard. However my import statements are growing quickly as I add new cards ( and redux actions ).

import { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
import { fetchMatches } from '../../actions/matchAction'
import MatchingCard from '../../ponents/MatchingCard'
import MapCard from '../../ponents/MapCard'
import ImageCard from '../../ponents/ImageCard'
import DocumentCard from '../../ponents/DocumentCard'

What would be a standard pattern to tidy this up? Put all those classes in one file? I was going to create an import file but I'd still be in the same scenario of adding many imports?

Any advice would be appreciated.

• javascript
• reactjs
• module
• webpack
• redux

6 Answers 6

You could add an index.js to the actions and ponents directories so you can import more on a single line

../../actions/index.js

export * from './userAction'
export * from './matchAction'

../../ponents/index.js

Because of the default exports of your ponents, you can just export them directly like in the actions.

import MatchingCard from './MatchingCard'
import MapCard from './MapCard'
import ImageCard from './ImageCard'
import DocumentCard from './DocumentCard'

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

Then your import statement bees

import { fetchUser, matchUser, stopMatchUser, fetchMatches } from '../../actions'
import { MatchingCard, MapCard, ImageCard, DocumentCard } from '../../ponents'

If you're using Webpack, you can use its resolve.alias, you can set up aliases for your monly-used folders (eg. src) so you're not writing these long relative paths.

You can set it up so you either do something like:

import Component from "@/ponents/my-ponent.js"

... where @ means your src folder, or simply just:

import Component from "ponents/my-ponent.js"

And this works no matter where you are in the folder structure because its an absolute path.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

You can have quite amount of imports in some of your connecting ponents and it's not so bad.

Joining ponents into one file usually bad decision, it's much better to separate them.

In my experience there is one real solution - breaking things up to even smaller ponents. Then on average you will have less dependencies per each file.

Also you can consider additional abstractions, like HOC (https://facebook.github.io/react/docs/higher-order-ponents.html) which can decrease duplication and diversity of your ponents in result.

Its not a right idea to have all the ponents in a single file. The whole idea of ponents in React is to modularize you structure.

If you don't want to have so many import statements in your file, a solution is to create a separate file where you can have all those exports and from from there.

Create a imports.js file for example

export { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
export { fetchMatches } from '../../actions/matchAction'
export {default as MatchingCard} from '../../ponents/MatchingCard'
export {default as MapCard} from '../../ponents/MapCard'
export {default as ImageCard} from '../../ponents/ImageCard'
export {default as DocumentCard} from '../../ponents/DocumentCard'

Now in your file you can import like

import {fetchUser, matchUser, stopMatchUser , fetchMatches, MatchingCard, MapCard, ImageCard, DocumentCard } from './path/to/imports.js

if you are importing many ponents from a same folder, then you can reduce your import lines by making an index.js file in your ponents folder.

index.js

export * from './MatchingCard';
export * from './MapCard';
export * from './ImageCard';
export * from './DocumentCard';

You can now import the ponents like this.

import { MatchingCard, MapCard, ImageCard, DocumentCard} from '../../ponents'

This might be overkill and a little unrelated but it is still a possible solution. For large projects that contain a lot of similar code I'm defining more and more of the UI as data.

const formFields = [
  { id: 'name', type: 'string' },
  { id: 'size', type: 'integer' },
  { id: 'isPublic', type: 'boolean' }
]

Based on the type it chooses what type of ponent to use (textfield, checkbox, etc) and imports it for me. This pushes the importing to a mon helper function and dramatically reduces the number of import statements in the codebase.

Also, using the alias feature in webpack might make figuring out those paths easier. It also makes refactoring the folder structure much easier.