Организация проекта на React?

Question

[uzi_no_uzi]

Как организовывают проект на React? К примеру такая ситуация, у меня обычное меню на сайте, футер, мне эти элементы по сути не нужно делать через React, я могу просто сверстать их без React, а использовать React только там где нужно? Дальше вопрос про стили, я при верстке использую Less, как мне организовывать код в данном случаи? Я раньше компилировал код с помощью Gulp, видимо сейчас так уже не получится, и обязательно ли стили подключать напрямую к React компонентам? Или можно как и при обычной верстке разбивать стили, как мне удобно?

Answer 1

[Антон Спирин]

1. React приложение это лишь модуль который рендерится в древе вашей страницы. Соответственно, это может быть как полноценное SPA приложение, так и небольшой виджет, ничего не подозревающий о содержимом остальной части страницы. Тут все зависит от задач, которые вы перед собой ставите.
2. Собирать бандл лучше с помощью webpack. Это сейчас стандарт фронтенд разработки.
3. Стили можно организовывать множеством способов. В экосистеме имеется множество разных инструментов для решения этой задачи. Если планируете переиспользование своего виджета, то стили лучше писать изолированные, если это лишь неотъемлемая часть проекта, содержащая сложную логику, то можно смело использовать общие стили проекта. Возвращаясь к вашему вопросу, нет, стили подключать напрямую не обязательно.

Answer 2

[nakree]

Футер, хедер и меню - 3 разных компонента, их можно вставить в один компонент Wrapper, который будет рендерить сhildren'ов (основной контент). Стили можно подключить 1 раз в index.js. Если настроите вебпак, то он сможет вам собирать стили в один сss. В Сreate React App уже все настроено для sass, и можно без конфигов сразу подключить. Если трудно разобраться, то можете билдить стили, и этот файл подключать в реакту 1 раз. Если хотите добиться модульности, и переиспользовать компоненты в других проектах, то лучше стили писать к каждому компоненту. Еще можно посмотреть на styled-components (сss in js).

Примеров структур проектов в интернете много. Я, например, разбиваю страницы по папкам, в которых лежит сам компонент, редюсер, экшен\сага и подпапка для дополнительных компонентов. Можно хранить отдельно редюсеры, отдельно экшены, отдельно компоненты.

Да, и если вы пишите на реакте, то все элементы должны быть в виде компонентов, а не в виде верстки, потому что реакт это либа для работы с dom.

Answer 3

[Дмитрий]

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

Если они не пересекаются с блоком, где лежит главный корневой компонент, то можно. Если пересекаются, то тоже можно, просто создав компонент, который в render() возвратит вашу верстку а в shouldComponentUpdate будет возвращать false, чтобы нет перерисовываться.