Как использовать Bootstrap с React?
Все мы знаем популярность React и то, как эта библиотека упростила задачи разработки для фронтенд-разработчиков. React — самая популярная интерфейсная библиотека для создания пользовательского интерфейса приложения. Отрасли постепенно сокращают использование библиотек jQuery и DOM для создания своих приложений.
Когда дело доходит до создания адаптивного приложения, на рынке полезны фреймворки CSS. Если вы работаете фронтенд-разработчиком, то фреймворки Bootstrap, Foundation и Bulma для вас не новы. Большинство отраслей используют фреймворк Bootstrap. Миллионы веб-сайтов работают в режиме начальной загрузки.
В этом блоге мы собираемся обсудить, как использовать React и Bootstrap, как добавить bootstrap в приложение React. Как установить пакет начальной загрузки React и как использовать его в приложении React. Начнем с этого…
Метод добавления Bootstrap в React
В основном есть три способа добавить Bootstrap в приложение React. Обсудим их по очереди.
1. Использование Bootstrap CDN
Это один из самых простых способов использовать бутстрап в вашем приложении React. Лучшее в загрузочном CDN — это отсутствие необходимости в установке или загрузке. Вам просто нужно скопировать и вставить ссылку в заголовок вашего приложения, чтобы оно заработало. Ниже находится ссылка, которая вам нужна.
Если вашему приложению нужны компоненты JavaScript вместе с начальной загрузкой, то в нижней части страницы разместите тег
Два способа интеграции Bootstrap в React-приложение
Второй метод заключается в установке готового пакета React-Bootstrap. Данная сборка позволяет использовать JavaScript компоненты фреймворка Bootstrap (кнопки, формы, элементы навигации) в React- приложениях. Мы рассмотрим оба способа, чтобы вы могли выбрать наиболее подходящий.
Пример использования элементов Bootstrap в оформлении React- приложения:
Первый способ интеграции Bootstrap и React
Прежде всего, установим фреймворк Bootstrap, используя следующую команду для менеджера пакетов npm:
Код в файле src/index.js должен выглядеть следующим образом:
Теперь вы можете использовать классы Bootstrap, как это сделал я в файле src/App.js (результат – на скриншоте, продемонстрированном в начале статьи):
Второй способ подключения Bootstrap к React-приложениям
В этом методе мы установим сборку React-Bootstrap с помощью следующей npm команды:
После завершения установки импортируем CSS элементы Bootstrap в файл src/index.js :
Код файла src/index.js выглядит следующим образом:
Все готово, можно использовать классы Bootstrap, как это сделано в моем примере файла src/App.js на скриншоте, приведенном в начале статьи:
Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!
Начать с React и Bootstrap за 2 дня. День №1
Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.
Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).
В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:
Установка
Для начала нам нужен менеджер пакетов. Я выбрал npm, а он есть в Node.js
Так что первым делом устанавливаете Node.js на свою операционную систему с официального сайта: nodejs.org/en/download. С установкой вы сможете разобраться, так что процесс установки описывать не буду. Отмечу лишь, что под Ubuntu устанавливается просто:
Через терминал проверяем, что Node.js и npm успешно установились:
Если при выводе возникнут ошибки – значит что-то прошло не так и надо разбираться, и возможно переустанавливать их. Если же выведется v c цифрами и точками – то всё хорошо.
Установим Create-react-app, чтобы потом можно было быстро создавать каркасы приложений:
Далее создаём каркас приложения на React. Назовём наше приложение new-app. Если хотите создать приложение папке отличной от пользовательской папки – то сначала через терминал перейдите в неё с помощью команды cd. Итак, в терминале достаточно ввести 3 команды:
Создаём приложение new-app. Переходим в папку new-app. Запускаем приложение. После этих строк должен запуститься браузер с приложением React по адресу http://localhost:3000
Терминал должен остаться открытым, без него не будет открываться страница приложения. Если вдруг закрыли – не беда. Достаточно с помощью команды cd перейти в папку приложения и запустить его командой npm start
Теперь установим Bootstrap
Так же советуют установить к нему зависимости jquery и popper.js, но они нужны только для JS-части Bootstrap. Попробовал без них — CSS-часть Bootstrap нормально работает, так что следующие строки в терминале не обязательны:
Далее надо внести изменения в файлы приложения, для этого переходим в папку new-app, где находится приложение в файл src/index.js добавляем строку, она должна быть первой:
Если будете использовать jQuery, popper.js или JS-часть Bootstrap (модальные окна, анимации и т.д), то потребуется под первой строкой добавить ещё 3 строки:
Теперь осталось запустить проект:
И снова откроется браузер по адресу http://localhost:3000 уже с приложением, облагороженным с помощью Bootstrap:
Так же для отладки React можно установить расширение «React Developer Tools» для браузера. Актуальные ссылки на расширение для Chrome и Firefox и другие варианты использования указаны в официальном репозитории github.com/facebook/react-devtools
Установка и первоначальная настройка на этом завершена.
JSX, компоненты и свойства
Давайте посмотрим, что нам сгенерировал create-react-app — исходные файлы лежат в каталоге src. Во-первых, посмотрим файл index.js – там несколько строчек импорта. По строчкам понятно, что они делают, так что не буду комментировать.
Самая важная строка в этом файле:
В ней рисуется страница приложения. В исходном HTML-файле находится элемент
выводится компонент App, который рисуется функцией render класса ReactDOM. При этом компонент рисуется в форме, похожей на XML, которая и называется JSX (о котором позже).
Теперь перейдём в файл App.js, где находится реализация класса App, который наследуется от класса React.Component.
JSX очень похож на HTML, при этом есть вставки JS-кода в фигурных скобках <>. И обязательно должен быть один корневой элемент, в данном случае
Чтобы лучше разобраться – сотрём весь код метода render(), и напишем простейший компонент:
А теперь вернёмся в файл index.js и исправим
После сохранения файлов – в браузере обновится страница. А теперь будем разбираться.
Концептуально, компоненты подобны JavaScript-функциям. Они принимают произвольные данные (называемые props) и возвращают React-элементы, описывающие что должно появиться на экране. Компоненты позволяют разделить UI на независимые, переиспользуемые части и работать с каждой из них отдельно.
Когда React видит, что элемент представляет собой пользовательский компонент, он передает все JSX-атрибуты в этот компонент единым объектом. Такой объект называется props.
В примере параметр name передаётся в компонент как атрибут тега со значением «Мир». Далее в методе render() класса App в качестве результата функции внутри JSX, который фактически является HTML-шаблоном – в фигурных скобках <> указывается this – текущий класс, props – пользовательский объект, name – название параметра объекта.
Конструктор, жизненный цикл и изменение состояния
Помимо параметров, хранящихся в props можно хранить состояние объекта в state.
Сделаем таймер. Для таймера не нужны параметры, поэтому уберём параметры в index.js:
А теперь в файле App.js заменим весь текст между import и export:
После вставки и сохранения этого кода на странице появится и автоматически запустится таймер.
Давайте разбирать этот код. До класса объявили константу, благодаря которой можно регулировать частоту обновления таймера.
Далее внутри класса идёт обязательный конструктор класса, в который передаётся props. Далее стандартная обработка конструктора родительского класса super(props) и определение состояния value через this – текущий объект. Это единственное место, где можно напрямую установить состояние. В остальных местах доступно только чтение, либо установка состояния специальным методом setState(), который используется в следующем методе increment() для увеличения состояния value на единицу.
В приложениях с множеством компонентов очень важно высвобождать ресурсы, занятые компонентами, когда они уничтожаются. Нам необходимо устанавливать таймер каждый раз, когда DOM отрисовывается в первый раз. В React это называется «монтированием/монтажом». Также нам нужно очищать этот таймер, каждый раз когда DOM, созданный компонентом, удаляется. В React это называется «демонтированием/демонтажём».
Для этого и используются методы componentDidMount() и componentWillUnmount(). В документации эти методы носят название «lifecycle hooks». Мы же будем для простоты называть их методами жизненного цикла. Метод componentDidMount() срабатывает после того, как компонент был отрисован в DOM. Это хорошее место, чтобы установить таймер. Очищать таймер будем в методе componentWillUnmount() жизненного цикла.
Обратите внимание, как мы в componentDidMount() сохраняем ID таймера прямо в this используя стрелочную функцию. В то время как this.props самостоятельно устанавливаются React-ом и this.state имеет определенное значение, вы свободно можете добавить дополнительные поля в класс вручную, если вам необходимо хранить что-нибудь, что не используется для визуального вывода. Если вы не используете что-то в render(), оно не должно находиться в состоянии state.
Далее на время выполнения render() в локальной константе value фиксируется значение состояния value. И далее с помощью математической функции floor(), которая округляет число в меньшую сторону, деления(/) и получение остатка от деления(%) получаем части таймера, которые далее выводим в одну строку после слова Таймер. Можно посмотреть результаты нашей работы.
Оформление с помощью Bootstrap
Не удобно, что таймер работает сразу при обновлении страницы. Хотелось бы, чтобы он запускался и останавливался при нажатии на соответствующие кнопки. А ещё хотелось бы, чтобы он был в центре и крупный.
Начнём с оформления. Для этого в файл App.css добавим следующие строки:
Благодаря встроенному в Bootstrap адаптивно-резиновому контейнеру container-fluid, который помогает создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину. Сделаем контейнер flex, с направлением выстраивания элементов по вертикали – чтобы он занял всё пространство и его можно было выровнять по центру.
Теперь доработаем метод render() в App.js, чтобы применить стили Bootstrap и добавить пару кнопок. Для этого заменим возвращаемое методом значение на следующее:
В первой строке к корневому
добавили 2 класса Bootstrap: container-fluid(о котором писал выше) и align-items-center – который как раз и выравнивает элементы контейнера по центру.
с классом display-1 – этот класс как раз для показа крупного текста.
Далее на цифры добавил новый тег — который обычно используется для подсветки клавиш, которые нужно нажать. В данном случае он отлично подходит для контраста показываемых цифр.
В последней цифре, показывающей части секунды добавлено условное выражение, позволяющее для однозначных цифр (
Как использовать компоненты Bootstrap 4 в ReactJS
Платформа Twitter Bootstrap CSS Framework является и будет в течение долгого времени одной из самых удивительных и известных платформ HTML, CSS и JavaScript, которые вы можете использовать как шаблон для создания веб-сайтов или веб-приложений. Основными особенностями фреймворков являются базовые CSS и HTML для типографики, значков, форм, кнопок, таблиц, сеток макетов и навигации, а также пользовательские плагины jquery и поддержка адаптивных макетов. Если вы работаете в каком-либо проекте React и хотите облегчить свою жизнь при разработке пользовательского интерфейса с помощью Bootstrap, у нас есть хорошие новости для вас. Сегодня в качестве компонентов React можно использовать последнюю версию Bootstrap. Мы говорим о Reactstrap. Эта библиотека может помочь вам работать в режиме React, используя потрясающие, новейшие и простые в использовании функции Bootstrap 4.
Заметка
Если вы ищете компоненты Bootstrap 3 в ReactJS, пожалуйста, проверьте эту другую статью.
1. Установите Reactstrap
Модуль Reactstrap реализует все компоненты Bootstrap 4 как компоненты React, поэтому их можно легко встроить в ваше приложение. Это не зависит от jQuery, поэтому ваш код будет максимально чистым. Тем не менее, он использует Tether (зависимость от Bootstrap) для создания эффективных и приятных подсказок. Чтобы установить его, переключитесь в каталог вашего проекта с терминалом и установите в качестве первого шага Bootstrap 4, выполнив следующую команду:
Затем установите модуль Reactstrap, который позволяет использовать начальную загрузку 4 в качестве компонентов реакции:
После установки вы сможете использовать любые компоненты, которые может предложить оригинальная библиотека Bootstrap 4. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь. Не забудьте также посетить их официальный сайт.
2. Определите свою тему Bootstrap 4
Вам нужно будет включить таблицу стилей в классы начальной загрузки 4, так что есть 2 варианта в зависимости от того, как вы работаете. Если вы используете веб-пакет и можете настроить включение CSS-файлов, импортирующих его из JavaScript, вы можете просто импортировать таблицы стилей начальной загрузки 4 по умолчанию в свой основной файл JS, например:
В противном случае, если вы хотите включить стороннюю тему Bootstrap 4 (как Bootswatch 4) затем вы можете просто включить его в свой HTML-документ с помощью тега ссылки:
3. Использование компонентов Bootstrap в React
Как типичный подход в React, каждый компонент Bootstrap 4 может быть импортирован из библиотеки:
раскладка
Широко известными особенностями Bootstrap является его революционная система сетки макетов. Использование Grid-системы Bootstrap поможет вам создать макеты страниц через ряд строк и столбцов, в которых размещается ваш контент. Как правило, каждый ряд начальной загрузки помещается в контейнер как в обычном, так и в контейнерном флюиде. В версии React этот компонент также называется контейнером и может использоваться следующим образом:
Далее следует компонент Row, который определяет горизонтальный элемент div, в который можно поместить несколько столбцов:
Наконец, столбцы, которые вы можете использовать в группе с контейнером и строками, чтобы создать свой удивительный макет:
Кнопки
Bootstrap предоставляет различные стили кнопок, которые можно легко использовать с React. При простой загрузке вам нужно было только предоставить класс для определения стиля кнопки, теперь в ReactJS вы можете установить его тип с помощью color имущество:
модальности
Следующий компонент создает кнопку, которая отображает модальный при нажатии. Как только вы нажмете кнопку закрытия, диалоговое окно закроется автоматически:
Поскольку мы не хотели перечислять все компоненты начальной загрузки 4, но наиболее часто используемые, вы найдете все компоненты в документации по официальный сайт Reactstrap здесь.
React.js: собираем с нуля изоморфное / универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг
Разработка изоморфного приложения глазами моей жены
Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.
Оглавление
Итак, в первой части мы закончили на том, что разработали простой компонент HelloWorld и собрали окружение для сборки и контроля качества кода. Настало время сделать полноценный сайт, а это значит, что мы добавим еще несколько страниц, свяжем их ссылками и реализуем изоморфный роутинг.
1. Добавляем в проект react-bootstrap
Это очень популярная библиотека, которая позволяет использовать элементы bootstrap в стиле React.
Например, вместо конструкций вида
Также не придется использовать JavaScript-код оригинального bootstrap, ведь он уже реализован в компонентах react-bootstrap.
Устанавливаем react-bootstrap
Вносим изменения в проект
Выделим виджет HelloWorld из App.jsx в отдельный компонент. Напоминаю, что App.jsx — это точка входа в изоморфную часть приложения, и мы ее скоро перепишем в виде layout’а, внутри которого будут отображаться запрошенные пользователем страницы.
Рефакторинг
src/components/HelloWorldPage/index.js
Этот шаг позволит нам импортировать наш компонент так
Это аккуратнее и упрощает сопровождение исходного кода приложения.
Создаем App.jsx
src/components/App/index.js
src/components/App/App.jsx
Важное примечание: обратите внимание, что я явно указываю, какие компоненты react-bootstrap я импортирую. Это поможет webpack в процессе сборки включить только используемую в проекте часть react-bootstrap, а не всю библиотеку целиком, как случилось бы, если бы я написал
Важно отметить, что этот маневр работает только в тех случаях, когда используемая библиотека поддерживает модульность. Например, react-bootstrap и lodash к таким относятся, а jquery и momentjs — нет.
Как видно из кода, приведенный выше компонент не работает со state и не использует component workflow callbacks (например, componentWillMount и componentDidMount). Это означает, что его можно переписать в виде так называемого Pure Sateless Function Component.
В будущем компоненты, написанные таким образом, будут иметь преимущество в производительности (спасибо теории функционального программирования и концепции pure functions), а чем более производителен каждый компонент в отдельности, тем более производительное приложение у нас получится в итоге.
Пока же реакт оборачивает подобные компоненты в обычные ES6-классы, но с одним приятным бонусом:
По умолчанию компонент обновляется всегда при получении новых значений props и/или state даже в тех случаях, когда они полностью совпадают с предыдущими. Это не всегда необходимо. У разработчика есть возможность самостоятельно реализовать метод shouldComponentUpdate(nextProps, nextState), который возвращает либо true, либо false. С помощью него вы сами можете явно указать Реакту, в каких случаях вы хотите, чтобы компонент перерисовался, а в каких — нет.
Если же компонент реализован как Pure Stateless Function Component, то Реакт сам в состоянии определить необходимость обновления внешнего вида компонента без явной реализации shouldComponentUpdate, то есть мы получаем больший профит, приложив меньше усилий.
Примечание: код ниже является учебным примером такого компонента. Так как в будущем мы внесем изменения в App.jsx, и он перестанет быть pure stateless компонентом, не следует переносить этот пример в наш проект.
Примечание 2: в нашем проекте я буду реализовывать все компоненты в виде ES6-классов, даже там, где возможно и правильно было бы реализовать их в виде Pure Stateless Functions Components, чтобы не усложнять содержание статьи.
Самое время посмотреть, что изменилось в браузере. И… да, у bootstrap нет стилей. Разработчики react-bootstrap сознательно не включили их в дистрибутив, так как все равно вы будете использовать собственную тему. Поэтому идем на любой сайт с темами для bootstrap, например bootswatch.com, и скачиваем понравившуюся. Сохраним ее в src/components/App/bootstrap.css. Я рекомендую сохранить именно полноценную версию, так как ее проще кастомизировать, а минификацию потом все равно сделает webpack.
Примечание: можно скачать мою тему с репозитория на github.
Внесем изменение в App.jsx
src/components/App/App.jsx
Я не хочу сейчас акцентировать внимание на настройке работы с glyphicons, тем более, что мы не будем использовать их в проекте, поэтому просто удалим их из стилей.
src/components/App/bootstrap.css
Возвращаемся в браузер, и теперь все должно выглядеть хорошо.
Примечание: если при перезагрузке страницы вас раздражает, что сначала появляется старая версия страницы, а новая лишь спустя пару секунд — просто перезапустите nodemon.
2. Добавляем несколько страниц и роутинг.
2.1. Сделаем две заглушки
src/components/CounterPage/index.js
src/components/CounterPage/CounterPage.jsx
src/components/TimePage/index.js
src/components/TimePage/TimePage.jsx
2.2. Добавим роутинг
Для роутинга мы будем использовать библиотеку react-router.
Чтобы она заработала, необходимо внести в наш проект следующие изменения:
2.2.1. Файл routes
src/routes.jsx
Обратите внимание, что мы по факту экспортируем компонент Реакта. IndexRoute является аналогом index.html или index.php в вебе: если часть пути опущена, то будет выбрана именно она.
Примечание: компоненты Route и IndexRoute могут быть вложены в другие Route сколько угодно раз. В нашем примере мы ограничимся двумя уровнями.
Таким образом мы определили следующее соответствие
URL ‘/’ => компонент вида
URL ‘/counter’ =>
URL ‘/time’ =>
В нашем приложении компонент App должен играть роль лейаута, поэтому необходимо «научить» его рендерить вложенные (children) компоненты.
src/components/App/App.jsx
2.2.2 Добавим роутинг в серверную часть приложения
src/server.js
Примечание: функция match принимает в качестве первого параметра JavaScript объект с ключами routes и location. Я использую shorthand notation ES6, полный вариант выглядел бы так
где routes мы импортируем из файла routes.jsx. В качестве второго параметра match принимает callback функцию, которая и отвечает за рендеринг.
Временно отключим клиентский JavaScript
src/client.js
Теперь протестируем роутинг в браузере — наша страница выглядит все также, хотя мы и избавились от явного вложения компонента HelloWorldPage в контейнер App. Двигаемся дальше.
Добавим ссылки на другие страницы. Обычно это делается так:
Однако, нам надо оформить в виде ссылок компоненты NavItem. Для этого воспользуемся библиотекой react-router-bootstrap.
src/components/App/App.jsx
Протестируем серверный роутинг.
Перезапустим nodemon. В браузере откроем Developer Tools, вкладку Network.
Теперь можно оценить результаты нашего труда и покликать на ссылки в меню навигации. Заметим, что запросы уходят на сервер, где обрабатываются express. Он, в свою очередь, рендерит и возвращает браузеру HTML-код запрошенной страницы. Сейчас наше приложение работает в точности как классическое веб-приложение.
В случае, если клиентский JavaScript не успеет загрузиться и инициализироваться, либо в нем окажется ошибка, наше приложение будет все еще успешно работать, в чем мы только что смогли убедиться.
2.2.3 Добавим роутинг в клиентскую часть приложения.
src/client.js
Примечание: обратите внимание, что теперь компонент Router стал корневым компонентом нашего приложения. Он отслеживает изменения URL и формирует контент страницы на основе настроенных нами routes.
Вернемся в браузер и еще раз покликаем по ссылкам, внимательно наблюдая за вкладкой Network инструмента Developer Tools. На этот раз страница не перезагружается, запросы к серверу не уходят, а клиентский JavaScript раз за разом рендерит запрошенную страницу. Все работает!
Промежуточный результат
Мы добавили несколько страниц и успешно настроили клиентский и серверный роутинг, убедившись, что они корректно работают для всех сценариев.
3. Flux и Redux
Сначала реализуем страницу со «счетчиками», чтобы разговор о Flux и Redux оказался максимально приближенным к практике.
Создадим два новых компонента: Counter.jsx и StateCounter.jsx.
Counter будет отображать переданное ему значение и кнопку «плюс», отвечающую за изменение этого значения.
StateCounter — компонент-родитель компонента Counter. Он будет хранить текущее значение Counter в собственном хранилище state и содержать бизнес-логику обновления этого значения при клике по кнопке «плюс».
Я сознательно выбрал такую реализацию, чтобы явно разделить интерфейс и бизнес-логику.
Этот прием очень часто используется на практике, так как подобный код проще:
В частности в нашем проекте сразу несколько компонентов будут использовать Counter.
src/components/CounterPage/Counter.jsx
src/components/CounterPage/Counter.css
src/components/CounterPage/StateCounter.jsx
src/components/CounterPage/CounterPage.jsx
Самое время протестировать обновленный код. В браузере перейдем на вкладку «Счетчики» и нажмем на кнопку «+». Значение изменилось с 0 на 1. Отлично! Теперь перейдем на любую другую вкладку, а потом вернемся обратно. Значение счетчика снова стало «0». Это в высшей степени ожидаемо, но не всегда соответствует тому, что мы хотели бы видеть.
Настало время обсудить концепцию «Flux».
Примечание: Flux — это именно концепция, а не библиотека. На сегодняшний день существует множество различных библиотек, которые ее реализуют.
3.1. Основные принципы Flux на пальцах
Компоненты не содержат бизнес-логику, а отвечают лишь за рендеринг интерфейса.
В приложении существует один объект, который хранит состояние всего приложения. Я буду называть его «глобальным состоянием», хотя не совсем уверен, что это наиболее удачный термин. Некоторые компоненты по желанию разработчика «подписываются» на интересующую их часть глобального состояния. С течением времени глобальное состояние может изменяться, а все подписанные на него компоненты получают обновления автоматически.
Важное примечание: глобальное состояние описывает лишь состояние вашего front-end приложения в отдельной вкладке и хранится исключительно в оперативной памяти браузера. Таким образом, оно будет утеряно, если пользователь нажмет F5, что абсолютно нормально, ожидаемо и by design. Я остановлюсь на этой теме более обстоятельно в третьей части.
Практический пример
Допустим, у нас есть сайт интернет-магазина: в центре страницы мы увидим список товаров, в панели навигации — иконку корзины с количеством товаров и общей их стоимостью, а где-то справа — блок с детализацией товаров, добавленных в корзину. Одним словом, достаточно распространенный сценарий.
Сценарий с точки зрения пользователя
Если бы мы писали этот сценарий на jQuery, то пришлось бы написать много кода для работы с DOM’ом. В процессе реализации все новых требований заказчика код становился бы все запутаннее, и, с большой долей вероятности, что-нибудь в итоге сломалось бы, а сложность и стоимость поддержки постоянно увеличивалась бы с течением времени и новых «хотелок».
Этот же сценарий с точки зрения Flux
Примечание: компоненты «Добавить в корзину», «Уведомления», «Корзина» и «Детализация Корзины» подписаны на глобальное состояние.
Пример кода такой функции
Упрощенно, хоть и не совсем корректно: в этом примере функция dispatch отвечает за обновление глобального состояния. Мы берем функцию, которая содержит бизнес-логику обновления глобального состояния, и передаем ее в качестве первого аргумента функции dispatch.
В результате общий процесс выглядит следующим образом и всегда работает однонаправленно.
В процессе выполнения эта функция изменяет один или несколько раз глобальное состояние.
От теории к практике!
3.2. Redux
Коротко: это одна из наиболее популярных реализаций концепции Flux.
Нам предстоит многое сделать:
Подбадривающее примечание: в процессе выполнения этих шагов вам могут прийти мысли вроде: «Зачем все это?» или «Ну почему все так сложно?». Ничего! Глаза боятся, а руки делают. Если вы дошли до этого места, то вспомните первую часть статьи. Она же огромная, я-то знаю, я же ее писал! Да, в первый раз может уйти много времени, чтобы проделать эти шаги, но в последующие разы это будет занимать совсем немного времени, обещаю!
3.2.1. Установим redux, react-redux и redux-thunk
3.2.2. Реализуем бизнес-логику счетчиков
3.2.2.1 Создаем папки src/redux, src/redux/actions и src/redux/reducers соответственно.
3.2.2.2 Создаем файл counterActions.js. В нем будут описаны функции, которые будут вызываться из наших компонентов.
src/redux/actions/counterActions.js
3.2.2.3 Создаем файл counterReducer.js. В нем мы опишем логику обновления глобального состояния.
src/redux/reducers/counterReducer.js
Что делает этот код?
Примечание: очень важно не забыть про третий шаг, так как в процессе инициализации redux все подобные функции (их еще называют «редьюсеры») будут вызваны с действием типа @@INIT, и мы должны корректно вернуть начальное значение.
3.2.3 Реализовываем инициализацию redux
Создаем файл configureStore.js
src/redux/configureStore
Что делает этот код?
3.2.4. Добавляем инициализацию redux в серверную часть приложения
src/server.js
Контекст — это props с глобальной областью видимости. То есть вы в своем компоненте явно указываете соответствующие props, которые будут доступны во всех его child компонентах и их child компонентах и так далее. Важно помнить, что это экспериментальная фича, а значит, есть большой шанс, что ее API в будущем изменится и, соответственно, явно использовать в своих приложениях ее не рекомендуется.
Другое дело, когда речь заходит о библиотеках, где контекст использовать приемлемо. Если API контекста поменяется, то вам будет достаточно обновить версии библиотек, которые его используют, не внося ни строчки изменений в собственный код.
В нашем примере мы используем компонент Provider из библиотеки react-redux и передаем ему хранилище глобального состояния store. Этот компонент хранит состояние в виде контекста, а так как это корневой элемент приложения, то доступ к глобальному состоянию в теории может быть обеспечен для абсолютно любого компонента нашего приложения, чем мы и будем с удовольствием пользоваться.
3.2.5. Добавляем инициализацию redux в клиентскую часть приложения
src/client.js
3.2.6. Реализуем компонент «Счетчик», который будет подписан на глобальное состояние
src/components/CounterPage/ReduxCounter.jsx
Функция connect соединяет наш компонент с глобальным состоянием. Она очень интересная и делает следующее:
Примечание: такие функции как connect называются High Order Components или сокращенно HOCs.
Концепция High Order Component работает следующим образом: у вас есть функция, которая принимает в качестве параметра один компонент, а возвращает другой, который, как правило, содержит в себе исходный с расширенным набором props.
connect как раз и является примером такой функции. Упрощенно она выглядит следующим образом
3.2.7. Добавляем новый счетчик на страницу с CounterPage
src/components/CounterPage/CounterPage.jsx
3.2.8. Тестируем
Мы проделали большую работу, и теперь наш проект напоминает полноценный сайт, поздравляю!