What is the best way to import components in React?

Question

JavaScript

The project gets a lot of shared components (buttons, switches, etc.). And in each component you have to import them separately.
There is an option to create a module in which to import all these components and return

export default { 
  Component1,
  Component2,
  Component3
}

Accordingly - to import only it. and from it already take the necessary components.
Is this the normal approach in the React world - and are there any downsides?
Thank you!

Answer 1

We use this approach. I'll show you with an example action from redux, but it can also be used with components.
An index.js file is created in the directory with shared components. It exports all named exports from files in this folder like this: Index.js
file:

export * from './auth';
export * from './user';
export * from './interfaces';
export * from './search';
export * from './catalog';
export * from './classifier';

auth.js file:

export const getUserToken = ( login, password ) => (dispatch, getState) => {...}
export const registerUser = ( newUserData ) => ( dispatch, getState ) => {...}

Thus, then in any place where we need to get one of these files, we have one entry point through which we can get variables from several files at once:

import { getUserToken, doSmsng, doSmsngElse } from '../../../_actions';