April 29, 2020

[MindBox] Разбивка страницы ВКонтакте на компоненты ReactJS

Для начала, я бы обратил внимание на данные блоки

Как я считаю, их можно обозначить как один компонент, но по-разному обозначать параметры вида. (Или сделать левые блоки как один компонент, а центральные - как другой).
Разберем информационный блок.

Похоже на три контентных блока, которые можно представить как один компонент

Не думаю, что в верхнем контентном блоке можно что-то разбить на компоненты, что касается второго, то тут все намного интереснее.

С моей точки зрения, можно выделить два случая, рассмотрим их
  1. Информационные компоненты, в которые можно включить Main information и Contact information и другие.
  2. Для начала рассмотрим один информационный вкладыш.
    В данном случае нам придется закинуть в 2.1 два компонента: первый - с описанием информации (пр. Twitter), а второй - с самой информацией (пр. ссылка на Twitter Дурова).
    P.S. именно это используется на данный момент во ВКонтакте (CSS-Структура).
  3. Второй вариант информационных вкладышей - два связных, параллельных (данные в них расположены, можно сказать, LinkedByIndex, пример которого ниже). В каждом из параллельных списков находится ряд компонентов, причем одного типа: в левом - типа описания информации (пр. Birthday; Current city etc.), в правом - типа самой информации, описанной в левом блоке (пр. October 10, 1984; Saint Petersburg etc.).
Linked by index примерная иллюстрация © Rejke <Valery Smirnov>

Приступим к рассмотрению третьего контентного блока.

Третий контентный блок в информационном блоке

Данный блок можно разбить на три компонента (или выделить в один общий компонент):

  1. Сам компонент, который представляет кнопку.
  2. Число (пр. 5.9M; 254 etc.).
  3. Описание контента, число которого отображается во втором компоненте (пр. followers; photos etc.).

Заметим, что есть одинаковые компоненты, которые сразу бросаются в глаза.

Один компонент

Надписи

Просмотрев CSS стили данных надписей, могу сказать, что цвет, как кажется на первый взгяд, не одинаков. По причине того, что у меня ноль опыта работы с ReactJS я не уверен в своих суждениях относительно разбивке на компоненты, но, как мне кажется, можно эти текста выделить как один компонент, просто меняя цвет и их назначение (какой-то текст встроен в меню, как часть li-компонента, какой-то - просто текст, а другой - как часть кнопки).

Также есть текст другого типа (можно выделить в отдельный компонент).

Конечно же, тут также присутствуют еще кнопки под аватаркой Дурова.

Кнопки
Навигационные компоненты
Лайки, комментарии, репосты

Кнопочки лайка, комментария и репоста также являются одним компонентом, просто с разной иконкой.

Вот как-то так. На этом хотелось бы подвести итог. Это был взгляд человека на компоненты, у которого опыта работы с ReactJS нет, но я готов учиться и развиваться в этом направлении, тем более что React - интересная, нужная и популярная библиотека.

Спасибо за уделенное внимание, мне очень приятно, что Вы дочитали до конца :)