Comments 13
Так же не совсем понятна мотивация складывать компоненты в папку components. Ведь все созданное на react по своему определению является компонентами. А желание привести код к повторному использованию должно подтолкнуть на объединение представления-реакт-компонента с логикой этого компонента. Только при таком раскладе можно перенести компонент без боли.
Так же личный опыт подсказывает, что все проекты уникальны и по сути из проекта в проект мигрируют только ui, которые и следует выносить в отдельный модуль или в случаи со сборщиками в отдельный бандл. А вот компоненты MainPage или PostPage, хотя я называю их MainRoute и PostRoute будут состоять из тех самый ui, а так же будут являться уникальными для конкретного проекта и даже не стоит забивать себе голову чтобы сделать их переиспользуемыми.
Я лично предпочитаю использовать index файлы, и у меня Atom он с этим отлично справляется. Думаю WebStorm тоже можно настроить на нормальное отображение файлов во вкладках.
К тому же у меня в проекте импорты вида:
import MyComponent from 'components/MyComponent';
import { getDistributions } from 'actions';
Достигается это за счёт настройки webpack конфига:
resolve: {
extensions: ['', '.jsx', '.js', '.css', '.json'],
modules: [
path.resolve('./src'),
path.resolve('./node_modules'),
],
},
Если беспокоит линтер, то его тоже можно настроить:
"settings": {
"import/resolver": "webpack"
}
Более подробно eslint-import-resolver-webpack
Если интересно более подробно, то могу написать пост.
Я лично предпочитаю использовать index файлы
Экзорцизм в публикации про это, собственно. :)
Если интересно более подробно, то могу написать пост.
Конечно интересно!
Хорошо, на следующих выходных напишу :) Просто, как мне кажется, создавать package.json файлики в каждом компоненте для исправления поиска и нормального отображения вкладок в IDE, немного изыбтычно, и нужно настраивать саму IDE.
У меня Атом отображает два одинаковых файла так:
WebStorm тоже так умеет, где-то в настройках включается.
![](https://habrastorage.org/files/98f/f56/738/98ff567389f646729718740ebce21882.png)
Perfect World:
![](https://habrastorage.org/files/856/dee/a07/856deea0795e4391b9df43edf67a3af5.png)
Идеально было бы так:
post/view/.js
post/view/.test.js
post/view/.css
post/view/.tpl
post/edit/.js
post/edit/.test.js
post/edit/.css
post/edit/.tpl
Проходили. Как следствие размножения подпапок, плодятся компоненты с одинаковыми именами. Можно повеситься, перебирая List.js, Button.js etc. :)
и нужно настраивать саму IDE
IDE подкручивал для навигации по абсолютным путям — в любом случае нужно.
Имхо — строить проект под редактор/IDE — мягко говоря
Лучше если хоть в одной IDE будет удобно, чем когда неудобно в любой.
Организация компонентов в проекте