React'ive Saturday – Как должно выглядеть ваше React приложение

Иван Хадаев, Frontend Developer, Brighter

Доповідь на тему проблем організації коду в React (Redux) додатках та думка автора як можна зробити краще (гірше). Також будуть розглянуті питання ідеї коду, зовнішнього оформлення та інструменти підтримки “краси” в проекті.

Transcript

1. Как должно выглядеть ваше React приложение.
2. Чуточку о себе Хадаев Иван Работаю в Делаю вид, что понимаю javascript и умею во frontend.
3. Структура по ролям или по сущностям?
4. Структура папок проекта Преимущества структуры по сущностям: 1. Быстрый поиск. Чтобы увидеть все связанные файлы нужно открыть одну папку. 2. Более короткий путь импорта. Где это может проиграть: 1. Сложные связи между данными которые много пересекаются с другими сущностями.
5. Action types, Actions(Action creators) - Action types храним в константах. - Выносим сложности в сервисы. - async/await - пора!
6. С async/await получаем более “плоский” и читаемый код. С промисами вам нужно помнить о цепочке.
7. Слабые стороны async/await - Чтобы использовать нужна функция(перед которой мы напишем async) - И как следствие нельзя использовать в руте, нужно обязательно объявлять функцию с async. В промисах мы можем так:
8. Контейнер в отдельном файле:
9. Контейнер-компонент
10. Сокращайте дистанцию между стором и компонентом
11. Используйте redux-thunk чтобы сократить код
12. Components - Используйте propTypes(ваша лень вас многого лишает)
13. Prettier - Установите правила один раз и забудьте о форматировании кода в принципе.
14. ESLint - Не ленитесь настраивать ESLint, это не только точки с запятой :)
15. https://github.com/Hadaev-Ivan/eslint-base-create-react-app
17. Спасибо за внимание!