How to handle hellish hell in response?

Question

I run my application to interact through Node. Is there a way to handle this import easily?

Im running

./node_modules/.bin/babel-node --presets react,es2015 server/server.js

when starting npm. And server.js is a simple express server that servesReactDOMServer.renderToString(<MyApp />)

Some of my response components have something like this:

import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate";
import Footer from "../../organisms/Footer/Footer";
import Header from "../../organisms/Header/Header";
import Hero from "../../organisms/Hero/Hero";
import MainMenu from "../../organisms/MainMenu/MainMenu";
import TodoList from "../../organisms/TodoList/TodoList";

it is error prone, one change, such as a directory name, will lead to the manual entry of each file for updating.

You have an idea how I can fix this. Ideally, I would have something like this:

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"

perhaps? How?

Thanks!

Answer 1

It also doesn't look much better for me:

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"

... / "myComponents" , .

, , , .

"import hell" React, .

Webpack . . .

Answer 2

organisms. common.js :

export Footer from "./Footer/Footer";
export Header from "./Header/Header";  
export Hero from "./Hero/Hero";
export MainMenu from "./MainMenu/MainMenu";
export TodoList from "./TodoList/TodoList";

:

import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js"