Как оптимизировать import вReact App?

Question

Есть определенный кусок кода, который хотелось бы оптимизировать ибо выгляди ужасно

import Login from "./components/login/login";
import Register from "./components/register/register";
import HomePage from "./components/homePage/homePage";
import  Role  from "./components/helpers/role";
import PrivateRoute from "./components/components/PrivateRouter";
import AdminPage from "./components/adminPage/AdminPage";
import Topics from "./components/homePage/topic";```

Как все эти импорты записать в один файл из которого я смогу брать нужные мне компоненты?

Answer 1

может для кого-то это и выглядит ужасно, но это "нормально". как вариант, создайте файл myComponents в который импортируйте все компоненты. внутри файла положите все компоненты в один объект, затем импортируйте этот объект куда хотите, так как компоненты в React - это обычные объекты. например:

import Login from "./components/login/login";
import Register from "./components/register/register";
import HomePage from "./components/homePage/homePage";
import  Role  from "./components/helpers/role";
import PrivateRoute from "./components/components/PrivateRouter";
import AdminPage from "./components/adminPage/AdminPage";
import Topics from "./components/homePage/topic";

const myComponents = {
  Login,
  Register,
  HomePage,
  Role,
  PrivateRoute,
  AdminPage,
  Topics
}

export default myComponents;

затем импортируем:

import myComponents from './lala/myComponents';

<myComponents.Login /> // используем

но особого преимущества я здест не вижу

Answer 2

Обычно в компонент лежит в отдельной папке, в которой есть index.js, в котором ты делаешь import export этого компонента. В итоге у тебя получится

import {component1, component2, component3...} from '../components'

Answer 3

Можно просто бе const сразу экспорт

БЛОГ НА HUSL

Как оптимизировать import вReact App?

Ответы (3 шт):