Как делаются сайты на React?

Question

[qfrontend]

Приветствую :)
Скажите пожалуйста как делаются сайты на React ? И для каких он сайтов ?
Допустим есть сайт, на котором каталог с фильтрами, слайдеры, галереи товара, ну и меню. Как на на таких сайтах используют React ?
Делают основную вёрстку и в неё добавляют отдельные компоненты (каталог с фильтрами, слайдеры, галереи товара) ?
Или же сразу вся страница вместе с вёрсткой изначально это какой то глобальный компонент ? И уже в нём отдельные "подкомпоненты" ?
Как компоненты взаимодействуют друг с другом (меняют состояние друг друга)? Через глобальный/родительский компонент ?

Answer 1

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

Вопрос можно перефразировать в Для чего используют фронтенд фреймворки?. Ответ на него легко ищется поисковиком.
Ответы на все ваши вопросы конкретно по React есть в туториале и документации на
официальном сайте. Не ленитесь и потратьте время на ознакомление.

Answer 2

[Yustas Alexu]

Делают основную вёрстку и в неё добавляют отдельные компоненты (каталог с фильтрами, слайдеры, галереи товара) ?
Или же сразу вся страница вместе с вёрсткой изначально это какой то глобальный компонент ? И уже в нём отдельные "подкомпоненты" ?

Второе. У Реакт приложения бывает root-элемент. Это элемент на странице, который будет считаться корневым. Все что ниже этого элемента есть реакт-приложение, которое контроллируется реактом. То есть представляет собой набор компонентов вложенных друг в друга.

Как компоненты взаимодействуют друг с другом (меняют состояние друг друга)? Через глобальный/родительский компонент ?

Состояние компонента можно поменять извне через изменение его props. Props можно прокидывать вниз по иерархии от компонента к компоненту или использовать глобальное хранилище, например Redux.

Answer 3

[mr_molodoy]

Делают основную вёрстку и в неё добавляют отдельные компоненты

Да.

сразу вся страница вместе с вёрсткой изначально это какой то глобальный компонент ?

Тоже да.
Смотрите по задаче.

Если у Вас только часть страницы динамична и зависима от некого состояния, то Вам никто не мешает сделать react компонент только для этой части страницы, а статичное содержимое оставить статичным.
Но я всегда более склонен ко второму варианту и считаю его более верным (только не когда это может создать больше проблем).

Как компоненты взаимодействуют друг с другом (меняют состояние друг друга)?

Почитайте про Redux.
А в целом Вы вольны делать так как считаете нужным.
React - это всего лишь view приложения и он должен (но не обязан конечно) лишь знать о том как отрисовать компонент, но сами компоненты не должны хранить какую либо бизнес-логику приложения.
Мы например React используем параллельно с коллекциями и моделями Backbon'a, ими же и манипулируем, а react только отображает их состояние и перерисовывает при их обновлении.
Для такой связки есть готовые библиотеки (например вот https://github.com/magalhas/backbone-react-component), мы правда под себя писали сами.