Организация Компонентов В Проекте

Многие руководствуются рекомендациями Презентационные и контейнерные компоненты , но уважаемый автор в сносках признает, что концепция разделения спорна, и компоненты можно смешивать.

А если это так, то зачем тащить чемодан без ручки? Все компоненты проекта удобнее хранить в одной общей папке.

Каковы преимущества:

• Легко ориентироваться в файловой системе.

• Уникальные имена компонентов проекта.

• Импортируйте без боли ('.

  /.

  /.

  /.

  /.

  /.

  ').

Когда проект вырастет, вам следует разделить его на частные пакеты npm, инкапсулирующие реализацию.

Но отсутствие дерева подпапок внутри папки компонентов гораздо сложнее разрабатывать и поддерживать.

Проверено.

Все компоненты организованы по доменному принципу в одной папке src/componens. Например, можно определить домены: Post — отображение публикации, PostForm — форма редактирования публикации.

Как создать компонент домена - src/компоненты/Post/Post.js. Почему нельзя использовать index.js вместо Post.js — соблюдается уникальность имен файлов компонентов внутри проекта, это упрощает навигацию по вкладкам редактора (и ценную функцию «Найти использования» для контекстного меню выбранный файл будет работать в WebStorm — см.

примечание).

Всем компонентам в папке компонентов домена присваивается префикс компонента домена (Post*.

js).

Подпапки в папке компонента домена не допускаются, внутри плоская файловая структура из компоненты-потомки (PostTitle.js, PostBody.js) и компоненты-предки (PostViewPage.js, PostListPage.js).

Компоненты-потомки используются внутри компонента домена, а компоненты-предки используются снаружи (например, в маршрутизаторе).

Для импорта компонентов домена необходимо внутри каждой папки компонента домена установить собственный package.json, в котором указать «основную» точку входа:

   

 {
   "name": "Post",
   "version": "0.0.0",
   "private": true,
   "main": ".

/Post.js",
 }

   

Кроме того, внутри файла компонента домена (Post.js) объявляется реэкспорт компонентов-предков:

import PostViewPage from '.

/PostViewPage' import PostListPage from '.

/PostListPage' //.

export { PostViewPage, PostListPage } export default Post

К сожалению, вы не можете использовать конструкцию «экспорт из» (ограничение WebStorm), например:

export { default as PostViewPage } from '.

/PostViewPage'

В результате явный доступ к файлам внутри папки компонентов не требуется, например:

import Post from 'components/Post/Post'

По соглашению вам разрешено импортировать только по имени компонента домена:

import Post, { PostViewPage, PostListPage } from 'components/Post'

Источники Примечание с помощью функции «Найти использование» в WebStorm. Как минимум, существует три контекста использования: 1) выбранным файлом, 2) выбранной переменной или символом, 3) выбранным по умолчанию в экспорте компонента.

1) Выберите компонент файла/Post/PostViewPage.js, результат поиска:

// Post.js import PostViewPage from '.

/PostViewPage'

2) Выберите символ PostViewPage внутри файла PostViewPage.js, результат поиска:

// PostViewPage.js PostViewPage.propTypes = {}

3) Выберите значение по умолчанию в экспорте компонента PostViewPage, результат поиска:

// routes.js import { PostViewPage } from 'components/Post' <Route exact path="/post/:id(\d+)/" component={PostViewPage} />

Как видите, третье использование дает наиболее полезную информацию для компонента-предка.

ПС

CSS внутри компонентов Нашел правильный путь винт Стиль-JSX Для Создать приложение React .

Теперь блоки CSS живут внутри файлов компонентов естественным образом — в формате CSS (в отличие от встроенных стилей объектов JS).

И вам не нужно беспокоиться о глобальной области видимости.

Абсолютные пути в импорте Они работают относительно папки src, пример:

import MyComponent from 'components/MyComponent'

Конфигурация Babel-plugin-module-resolver

['module-resolver', { 'root': ['src'] }]

Настройка вебшторма

Для папки src в контекстном меню выполните: Отметить каталог как > Корень ресурса.

Настройка Атома

• Установите плагин js-гиперклик .

• Для компонентов домена пропишите путь к src в package.json:
  
  "moduleRoots": [".

  /.

  "]
  
  

Настройка VSCode

Вам необходимо добавить jsconfig.json в корень проекта:

{ "compilerOptions": { "target": "ES6" }, "exclude": [ "node_modules" ] }

• Суд Взыскал С Российского Поставщика Строительной Техники 500 Тысяч Рублей По Иску Apple О Незаконном Использовании Товарного Знака.

  19 Oct, 24

• Чем Ограничение Размера Блока Опасно Для Биткойна И О Segwit2X

  19 Oct, 24

• Gpt-3 В Картинках: Краткий Обзор

  19 Oct, 24

• У Box.net(Com) Теперь Есть Клиент Для Настольных Компьютеров

  19 Oct, 24

• Жилищная Проблема

  19 Oct, 24

• Мост Между Mac Os X И Windows

  19 Oct, 24

• Одного Из Разработчиков Microsoft Word Отправили В Космос

  19 Oct, 24

• Пзс И Оптическое Волокно Получили Нобелевскую Премию По Физике

  19 Oct, 24

• Samsung Ai Forum 2021. День 1

  19 Oct, 24

• Норвежский Провайдер Отображал Номер Телефона Клиента По Ip В Браузере

  19 Oct, 24