Если вы работаете над небольшим проектом, содержащим две страницы и ограниченное количество компонентов, и хотите использовать их в разных файлах, это легко использовать:
import ComponentName from “component path”
Но что, если вы работаете с большим проектом, в котором много страниц и компонентов?
Это не лучший способ использовать наш старый метод импорта, вы получите сотни строк кода только для того, чтобы импортировать нужные страницы или компоненты в определенный файл!
Одним из способов получения чистого и упорядоченного кода с правилом D.R.Y.* является использование
импорта индексов.
Правило *D.R.Y.: расшифровывается как «Не повторяйтесь». Это принцип разработки программного обеспечения, направленный на уменьшение повторения шаблонов и дублирования кода в пользу абстракций и избежание избыточности.
Внутри папки компонентов или страниц создайте файл index.js.
В этом файле экспортируйте каждый компонент по умолчанию.
Теперь вы получаете чистый импорт для каждого компонента по любому пути в вашем проекте. Все, что вам нужно сделать, это импортировать необходимые компоненты очень простым способом:
import {Header, Footer} from “./components”
import {Home, Contact, Admin, Cart, Orders, Products, SingleProduct, User} from "./pages";
Обратите внимание, что react.js рассматривает файл index.js как корневой каталог для родительской папки.
