Структура проекта React (Архитектура приложения React)

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 22

  • @ТёмаКоролёв-к6ф
    @ТёмаКоролёв-к6ф 3 роки тому +23

    Надеюсь я помогу кому то своим комментарием.
    /components/ - глобальные компоненты (используются везде).
    /components/[page]/ - компоненты для конкретной странице .
    /containers/ - компоненты с бизнес логикой (умные компоненты).
    /services/ - модули работающие с данными тоже бизнес логика, но не компоненты.
    /utils/ - вспомогательные функций aka хелперы.
    /pages/ - роутинг приложения. Я использую nextJS поэтому там это из "коробки" сделано.
    /styles/ - глобальные стили.
    /redux/ - все что связано с redux.
    /* По желанию */
    /repositories/ - методы для получения данных из глобальных стейтов или апи запросов, но это уже больше подходит к проектам с "Чистой архитектурой". Можно обойтись redux селекторами и папкой api)
    Всем спасибо за внимание.

    • @kostyafrompiter
      @kostyafrompiter 2 роки тому

      Спасибо тебе большое дружище.

    • @elenashchekina3899
      @elenashchekina3899 2 роки тому

      Спасибо!

    • @СергейВер-и9ю
      @СергейВер-и9ю 2 роки тому +1

      Лучше компоненты, которые используются только в одной странице, размещать там же, т.е. pages/home/ тут основная страница index.ts и в этой же папке можно расположить компоненты, методы, стили, типы, которые используются только в этой странице. Так можно добиться максимальной модульности.
      А так же, придерживаясь такого метода, можно максимально сократить количество Redux, за что оптимизация скажет спасибо.

    • @ТёмаКоролёв-к6ф
      @ТёмаКоролёв-к6ф 2 роки тому +1

      ​@@СергейВер-и9ю спорный момент, но тут каждому свое. Лучше иметь одну папку components, чем несколько папок разбросаные по всему проекту. Имхо. Просто даже тот же самый NextJS вам не позволит создать папку components внутри папки pages :D
      Насчет redux не совсем понял. Наверное идея в том что и туда action и reducer класть. Да можно может и удобно. Повторюсь каждому свое. Лично я стараюсь писать код так, чтобы мой проект не зависел сильно от библиотек и фреймворков.
      Пример из опыта моя бизнес логика приложения не зависит от ReactJS, я могу спокойно визуальную часть переписать на любой другой фреймворк Vue, Angular и т п не затронув бизнес логику.

    • @voronko100
      @voronko100 2 роки тому

      👍🔥🔥🔥

  • @КириллОмаров-ш8ч
    @КириллОмаров-ш8ч 3 роки тому +7

    Очень редкий и интересный контент ! Спасибо

  • @nickdunne1235
    @nickdunne1235 2 роки тому +1

    Уделяете внимание деталям, подписка

  • @Naddys0n
    @Naddys0n 3 роки тому +2

    Просто находка!

  • @Гилфойл-т4я
    @Гилфойл-т4я 2 роки тому

    Спасибо большое. Подписка.

  • @vladimirliankevich1361
    @vladimirliankevich1361 2 роки тому

    Спасибо хорошая информация

  • @serhiiskachkov7341
    @serhiiskachkov7341 4 роки тому +3

    Спасибо, интерестно.

  • @1MrGerman
    @1MrGerman 3 роки тому

    Отличное видео, подписался!

  • @Yakitosina
    @Yakitosina 3 роки тому

    Спасибо, очень помогли!

  • @tamaraevpraksina6945
    @tamaraevpraksina6945 3 роки тому

    Имеются ли у вас уроки на UDEMY? Очень подробно преподаете. Спасибо

    • @DevMagazineChannel
      @DevMagazineChannel  3 роки тому

      Спасибо! К сожалению, пока только на youtube

  • @user-ir5zd2jy9e
    @user-ir5zd2jy9e 4 роки тому

    а Rest API куда? Бэкенд админ управления куда? Бэк какой? Нода? Вэбсервер express? Nginx перед ним?
    ... имхо вот это бы всё целеком - вот это бомба конент, так как в нете есть инфа только по каждой теме в отдельности.. (
    Спс за видео!!

    • @AndKozinsky
      @AndKozinsky 4 роки тому +1

      Смотрите в сторону микросервисной архитектуры.

  • @DevMagazineChannel
    @DevMagazineChannel  4 роки тому +5

    Также рекомендую 👉 useLayoutEffect и useEffect ua-cam.com/video/wPQlz4M4rnI/v-deo.html
    Еще больше о разработке 👉 it-dev-journal.ru