[MindBox] Разбивка страницы ВКонтакте на компоненты ReactJS
Как я считаю, их можно обозначить как один компонент, но по-разному обозначать параметры вида. (Или сделать левые блоки как один компонент, а центральные - как другой).
Разберем информационный блок.
Не думаю, что в верхнем контентном блоке можно что-то разбить на компоненты, что касается второго, то тут все намного интереснее.
- Информационные компоненты, в которые можно включить Main information и Contact information и другие.
- Для начала рассмотрим один информационный вкладыш.
В данном случае нам придется закинуть в 2.1 два компонента: первый - с описанием информации (пр. Twitter), а второй - с самой информацией (пр. ссылка на Twitter Дурова).
P.S. именно это используется на данный момент во ВКонтакте (CSS-Структура). - Второй вариант информационных вкладышей - два связных, параллельных (данные в них расположены, можно сказать, LinkedByIndex, пример которого ниже). В каждом из параллельных списков находится ряд компонентов, причем одного типа: в левом - типа описания информации (пр. Birthday; Current city etc.), в правом - типа самой информации, описанной в левом блоке (пр. October 10, 1984; Saint Petersburg etc.).
Приступим к рассмотрению третьего контентного блока.
Данный блок можно разбить на три компонента (или выделить в один общий компонент):
- Сам компонент, который представляет кнопку.
- Число (пр. 5.9M; 254 etc.).
- Описание контента, число которого отображается во втором компоненте (пр. followers; photos etc.).
Заметим, что есть одинаковые компоненты, которые сразу бросаются в глаза.
Просмотрев CSS стили данных надписей, могу сказать, что цвет, как кажется на первый взгяд, не одинаков. По причине того, что у меня ноль опыта работы с ReactJS я не уверен в своих суждениях относительно разбивке на компоненты, но, как мне кажется, можно эти текста выделить как один компонент, просто меняя цвет и их назначение (какой-то текст встроен в меню, как часть li-компонента, какой-то - просто текст, а другой - как часть кнопки).
Также есть текст другого типа (можно выделить в отдельный компонент).
Конечно же, тут также присутствуют еще кнопки под аватаркой Дурова.
Кнопочки лайка, комментария и репоста также являются одним компонентом, просто с разной иконкой.
Вот как-то так. На этом хотелось бы подвести итог. Это был взгляд человека на компоненты, у которого опыта работы с ReactJS нет, но я готов учиться и развиваться в этом направлении, тем более что React - интересная, нужная и популярная библиотека.
Спасибо за уделенное внимание, мне очень приятно, что Вы дочитали до конца :)