React Best Practices

Лучшие практики разработки приложений на React + Redux, полученные мною во время работы на проектами.

Введение

Эта статья была написана в целью собрать все мысли и опыт разработки приложений на React.js и Redux. Здесь изложены только мои мысли, поэтому не стоит воспринимать этот документ как основополагающий. Написана сея статья была специально для русскоязычного сообщества, т.к. даже среди моих знакомых программистов девелоперов не много тех, кто может прочитать документация React на английском.

Почему Redux?

Для React есть несколько популярных библиотек для управления состоянием, кроме Redux. Можно использовать, например, MobX или его младшего брата MobX-State-Tree, который гораздо удобнее, однако мы не видим что происходит под капотом. Что мне нравится в React - это дакларативность, мы видим, что будет в результате наших трудов, когда пишем код, и так это и работает. Redux - тоже декларативен, мы видим по коду как данные меняются, и как это работает. Если вас смущает писать все время switch-case в редюсерах - используйте обертки типа redux-act или напишите свою, это несложно, честно.

Структура проекта

Структура проекта на React и Redux, независимо от объема функционала может быть представлена следующим образом.

Следует отметить, что это набросок, и компоненты могут быть совершенно другими в вашем проекта.

• /assets - для различных глобальных статических файлов (css, less, sass, images, icons, fonts), которые могут быть импортированы в бандл.
  • /images - картинки и иконки
  • /fonts - файлы шрифтов
  • /styles - стили
    • /entry.less - включается в entry.jsx
    • /theme.less - тема оформления
  • ...
• /components
  • /app - компоненты, имеющие некоторый функциональный смысл для пользователя
    • /Auth - пространство имен компонентов
      • /Register - компонент регистрации
        • /connect.js - весь Redux код, необходимый для компонента, включая селекторы (тут удобно писать бизнес логику, где полно всякого хардкода в виде if-else, map, filter и т.п.)
        • /Register.jsx - сам компонент
        • /Register.module.less - стили, в данном случае с css-module
        • /index.jsx - контейнер, подключающий Redux к компоненту
      • /index.js - реэкспорт
      • ...
    • /index.js - реэкспорт
    • ...
  • /forms - различные формы ввода
    • /RegisterForm.jsx
    • /RegisterForm.module.less
    • /index.js - реэкспорт
    • ...
  • /layouts - обертки страницы, может содержать header, sidebar
    • /UnAuthLayout - обертка для не авторизованного пользователя, без сайдаба и хедера.
      • /UnAuthLayout.jsx
      • /UnAuthLayout.module.less
      • /index.js - реэкспорт c использованием React-Loadable
    • /index.js - реэкспорт
    • ...
  • /lib - общие компоненты, например, окно виджета
    • /Widget - компонент отображающий что-либо внутри себя, можно применять на многих страницах
    • /index.js - реэкспорт
    • ...
  • /pages - компоненты страниц, зависят напрямую от URL, рендерятся из роутера. В страницу можно помещать контейнеры.
    • /RegisterPage
      • /RegisterPage.jsx
      • /RegisterPage.module.less
      • /index.js - реэкспорт c использованием React-Loadable
    • /index.js - реэкспорт
    • ...
  • /services - служебные компоненты, (HOC, UpdateBlocker и т.п.)
    • /withDocument.jsx - HOC для отображения DocumentTitle в react-helmet, например
    • /index.js - реэкспорт
    • ...
• /config - Runtime конфигурация приложения
  • /constants.js - константы, вроде API_URL
  • /routes.js - конфигурация роутинга по страница, массив объектов
  • /roles.js - статические роли пользователей для доступа к страницам
  • /types.js - глобальные типы событий вроде SUCCESS, LOADING, FAILURE
  • ...
• /modules - @todo
• /core - @todo
• /services - модуля для связи с данными вне приложения
  • /api - клиент и api-методы
  • /storage - localStorage, sessionStorage, cookies
  • ...
• /store - @todo
• /entry.jsx - точка входа в приложение, указывается в entry WebPack, например

В итоге имеем

1. Бесконечно масштабируемые компоненты, дайте
   • первому девелоперу писать компоненты
   • второму - подключать к Redux, писать стейт и редюсеры
   • третьему - API методы и их обработку
   • ну, а сами если вы босс, напишите роутинг :-)

Redux

@todo

Babel, ES (TS) и все такое

@todo