comerc Apr 9 2017 at 19:23

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

3 min

17K

Website development*JavaScript*ReactJS*

Tutorial

+22

Comments 13

copal Apr 9 2017 at 23:10

В java и c# классы принято называть как, если Page, то MainPage или SomePage, если Model, то UserModel или PostModel. Не понятно чем руководствовался автор, надеюсь что не css стилем.

Так же не совсем понятна мотивация складывать компоненты в папку components. Ведь все созданное на react по своему определению является компонентами. А желание привести код к повторному использованию должно подтолкнуть на объединение представления-реакт-компонента с логикой этого компонента. Только при таком раскладе можно перенести компонент без боли.

Так же личный опыт подсказывает, что все проекты уникальны и по сути из проекта в проект мигрируют только ui, которые и следует выносить в отдельный модуль или в случаи со сборщиками в отдельный бандл. А вот компоненты MainPage или PostPage, хотя я называю их MainRoute и PostRoute будут состоять из тех самый ui, а так же будут являться уникальными для конкретного проекта и даже не стоит забивать себе голову чтобы сделать их переиспользуемыми.

Luchnik22 Apr 9 2017 at 23:38

Я лично предпочитаю использовать 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
Если интересно более подробно, то могу написать пост.

comerc Apr 9 2017 at 23:49

Я лично предпочитаю использовать index файлы

Экзорцизм в публикации про это, собственно. :)

Если интересно более подробно, то могу написать пост.

Конечно интересно!

-1

Luchnik22 Apr 10 2017 at 00:02

Хорошо, на следующих выходных напишу :) Просто, как мне кажется, создавать package.json файлики в каждом компоненте для исправления поиска и нормального отображения вкладок в IDE, немного изыбтычно, и нужно настраивать саму IDE.

У меня Атом отображает два одинаковых файла так:

vintage Apr 10 2017 at 00:09

WebStorm тоже так умеет, где-то в настройках включается.

comerc Apr 10 2017 at 11:04

Оно из коробки работает:

Perfect World:

vintage Apr 10 2017 at 11:17

Идеально было бы так:

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

comerc Apr 10 2017 at 11:52

> Подпапки в папке доменного компонента не допускаются, внутри плоская структура файлов

Проходили. Как следствие размножения подпапок, плодятся компоненты с одинаковыми именами. Можно повеситься, перебирая List.js, Button.js etc. :)

vintage Apr 10 2017 at 13:03

Да нет, нормально получается. Если что, WebStorm умеет и по частям путей искать.

comerc Apr 10 2017 at 00:12

и нужно настраивать саму IDE

IDE подкручивал для навигации по абсолютным путям — в любом случае нужно.

-1

gearbox Apr 10 2017 at 12:24

Как подстроиться под webStorm. Пользователи Atom, Brackets и VS Code возмущены. Пользователи vim-а снисходительно улыбаются.

Имхо — строить проект под редактор/IDE — мягко говоря ~~глупость~~ неосмотрительно.

vintage Apr 10 2017 at 13:04

Лучше если хоть в одной IDE будет удобно, чем когда неудобно в любой.

gearbox Apr 10 2017 at 15:29

про ложную дихотомию пропустим, перейдем сразу к сути — чем когда неудобно в любой — это от безисходности? Удобно для большинства людей — синоним слова привычно. Если речь об одиночке или фан проекте — да без проблем. Но работать командой с таким подходом — как то не айс.

Show the best of all time