react-respond

Что это?

Это компонент макета на основе ReactJS.

Зачем?

Таких компонентов должно быть много, и многие зрелые фреймворки имеют эту функцию. Разве разработка этого не пустая трата времени? Да, это пустая трата времени. Я создаю этот грубый прототип просто для практики! Сейчас эта вещь ещё сырая, она имеет только базовые функции макета и недостаточную гибкость, а производительность средняя!

Особенности

• Реактивный макет.
• Пользовательские правила реактивного макета.
• Автоматическое отображение или скрытие боковых панелей.
• Нет понятия строк, просто вставляйте элементы ячеек в порядке текстового потока. Подробнее см. wiki.

Установка демо

1. Сначала клонируйте проект на локальный компьютер:

   git clone https://github.com/felixzxk/react-respond.git

2. Затем перейдите в каталог demo и установите зависимости:

   npm i

3. Установите компонент react-respond (в demo уже есть компонент, отдельно устанавливать не нужно):

   npm install --save react-respond

Запуск демо

После установки зависимостей выполните следующую команду:

npm run dev

После компиляции посетите localhost:3001.

О webpack

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

npm install webpack -g

Если необходимо изменить номер порта, можно настроить значение port в файле package.json:

"scripts": { "dev": "webpack-dev-server --progress --colors --host localhost --port 3001 --inline --hot" },

Использование

var ReactRespond = require('react-respond'), //основной контейнер RRCell = ReactRespond.RRCell, //базовый дочерний элемент RRFix = ReactRespond.RRFix, //дочерний элемент с фиксированным позиционированием

<ReactRespond {/* ...someProps идёт здесь */}

<RRCell
    {/* ...someProps идёт здесь */}
>
    {/* ваш контент идёт здесь */}
</RRCell>
{/* ... любой другой RRCells ... */}
<RRCell
    {/* ...someProps идёт здесь */}
>
    {/* ваш контент идёт здесь */}
</RRCell>
<RRFix
    type = 'top'                        //элемент fix должен иметь атрибут type, определяющий его положение на странице, по умолчанию «top»
    {/* ...someProps идёт здесь */}
>
    {/* ваш контент идёт здесь */}
</RRFix>