search

recruitment-process / recruitment-process-frontend

https://recruitment-process.github.io/recruitment-process-frontend/
1 stars 1 forks source link

Develop #96

Closed Bjorn86 closed 1 year ago

Bjorn86 commented 1 year ago

Версия на ревью

Bjorn86 commented 1 year ago

@FenixDeveloper Алексей, спасибо за ревью! Учтём ваши замечания. Хотели у вас уточнить по поводу комментария о "легком" беспорядке ) у нас в структуре. Не совсем поняли, что мы должны положить в директорию pages, и что в итоге должно остаться в директории components. Можно по подробнее? Если у вас какой-то репо со схожей предлагаемой вами структурой, в качестве образца, будет вообще супер!

FenixDeveloper commented 1 year ago

@Bjorn86 Предлагаю сделать следующую структуру: src/ --ui-kit/ (простейшие компоненты, универсальные для любых интерфейсов) ----button.jsx --components/ (секции, из которых формируются страницы, модальные окна, хедеры, сайдбары и т.д. уникальные для проекта) ----header.jsx --pages/ (верхнеуровневые сборки - страницы, состоящие из секций, здесь происходит подключение данных и действий и передача их пропсами в секции) ---- main.jsx

Готовые примеры есть только в проектном месяце веб+, но там закрытые репы и не совсем корректно ими делиться. По структуре выше если надо уточняйте, надеюсь подробно достаточно расписал.

Собственно почему предлагаю такую структуру — она следует самому частому маршруту разработки, хорошо декомпозирует проект и позволяет следовать рекомендациям facebook по правильной композиции. Общая суть заключается в размещении бизнес-логики на максимально высоком уровне сборки, а весь интерфейс ниже формируется из более крупных блоков (секций), которым все данные и действия передаются самой страницей.

Такое деление уровней абстракции является наиболее оптимальным и распространенным, а структурировать можно любыми способами. Главное не смешивать разные уровни в одной директории чтобы самим было удобно ориентироваться )

dzhaneta commented 1 year ago

@Bjorn86 Предлагаю сделать следующую структуру: src/ --ui-kit/ (простейшие компоненты, универсальные для любых интерфейсов) ----button.jsx --components/ (секции, из которых формируются страницы, модальные окна, хедеры, сайдбары и т.д. уникальные для проекта) ----header.jsx --pages/ (верхнеуровневые сборки - страницы, состоящие из секций, здесь происходит подключение данных и действий и передача их пропсами в секции) ---- main.jsx

Готовые примеры есть только в проектном месяце веб+, но там закрытые репы и не совсем корректно ими делиться. По структуре выше если надо уточняйте, надеюсь подробно достаточно расписал.

Собственно почему предлагаю такую структуру — она следует самому частому маршруту разработки, хорошо декомпозирует проект и позволяет следовать рекомендациям facebook по правильной композиции. Общая суть заключается в размещении бизнес-логики на максимально высоком уровне сборки, а весь интерфейс ниже формируется из более крупных блоков (секций), которым все данные и действия передаются самой страницей.

Такое деление уровней абстракции является наиболее оптимальным и распространенным, а структурировать можно любыми способами. Главное не смешивать разные уровни в одной директории чтобы самим было удобно ориентироваться )

все еще не до конца поняли) накидала примерно. подойдет?

image
Bjorn86 commented 1 year ago

@FenixDeveloper Алексей, я также столкнулся с проблемой при попытке установить для scss includePaths. Делаю всё по инструкции с доки CRA. Завожу в .env переменную SASS_PATH=src/shared, меняю импорт на @import 'mixins.scss';, всё работает, но при сборке получаю кучу ворнингов:

WARNING in ./src/components/VacancyCard/VacancyCard.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/components/VacancyCard/VacancyCard.scss)
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "src/shared/_mixins.import.scss"
 * "src/shared/_mixins.import.scss.css"
 * "src/shared/_mixins.import.scss.sass"
 * and more ...

Погуглил этот вопрос, и нашёл, что это в общем-то известный баг: https://github.com/facebook/create-react-app/issues/12329 https://github.com/facebook/create-react-app/issues/12635 Предлагаемые решения выглядят как костыли, и как я понял, могут не работать в зависимости от ОС. Игнорируем ворнинги? Или может у вас есть какая-либо информация как решить эту проблему не прибегая к eject или костылям? )