Создание изоморфного/универсального веб-сайта с помощью React — часть 2

В первой части этой серии постов мы видели, как я провел рефакторинг потока данных на своем сайте.

Теперь мы посмотрим, как создать дизайн, и я решил некоторые проблемы в стиле React.

Меню

Я должен признать, что на таком маленьком веб-сайте, как этот, меню бесполезно, но в то же время оно просто добавляет приятный штрих. (эта гифка имеет некоторые глюки, извините)

Конечно, все меню — это компонент реакции, который имеет карту сайта в качестве реквизита.

pages/index.js
render(){
  return (
    ....
    <Menu
       sections={sitemap}
       />
    ...
}

Для создания этого меню я использовал React Motion, что позволило мне очень легко создать эффект подпрыгивания.

Давайте перейдем к коду!

Как видите, это очень просто. Я изменяю высоту меню в зависимости от количества элементов и использую реактивное движение, чтобы создать эффект шаткости.

Разделы

В этом дизайне каждая секция имеет одинаковую высоту окна просмотра. Конечно, такое поведение ожидается и тогда, когда пользователь изменяет размер страницы.

Чтобы получить этот эффект, высота и ширина области просмотра вычисляются внутри страницы index.js (/pages/index.js) и передаются во все разделы.

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

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

Переопределение стилей в React

Этот дизайн довольно прост, у нас есть один фиксированный столбец и прокручиваемый столбец. Для меня было очень важно не испортить систему прокрутки чрезмерным использованием абсолютного позиционирования.

Очень важно поддерживать хорошую совместимость, чтобы браузер знал точный размер веб-страницы.

Чтобы переключиться с фиксированной позиции на абсолютную (чтобы боковая панель исчезла после завершения раздела), мне пришлось переопределить стиль моего компонента по умолчанию.

Один хороший подход, который я нашел здесь:

https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04 Это очень помогло мне в достижении этого эффекта, не сойдя с ума.

Сначала я создал компонент, который может обрабатывать 2 столбца (Section.jsx), а затем компонент для обработки каждого поведения боковой панели.

var styles = _.cloneDeep(this.constructor.styles);

Позволяет мне клонировать стиль и изменять его, не испортив исходный объект.

let isCurrent = 
    this.props.elementBox 
    && this.props.elementBox.top!==undefined 
    && ( this.props.elementBox.top <=0 
         && this.props.elementHeight+this.props.elementBox.top>=0 
         && this.props.elementHeight != this.props.windowHeight 
       );
let isAtEnd = this.props.elementBox 
         && this.props.elementBox.bottom<this.props.windowHeight;

Вычислите, находится ли секция все еще в окне просмотра и может ли пользователь видеть начало другой секции.

Это просто вопрос переключения между абсолютным/фиксированным позиционированием. Конечно, если элемент находится в конце, нам также нужно установить значение bottom:0px, чтобы он работал.

Изменение размера браузера

Чтобы иметь адаптивный веб-сайт, мне пришлось использовать таблицы стилей; знаете, я думаю, что React великолепен, но таблицы стилей идеально подходят для обработки медиа-запросов. Это просто правильные инструменты для работы.

В следующей части мы увидим, как создать простую систему навигации с плавной прокруткой, pushState и поддержкой обновления браузера.