react bootstrap что это
Как использовать 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 вместе с начальной загрузкой, то в нижней части страницы разместите тег
Introduction
Learn how to include React Bootstrap in your project
Installation #
The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer).
If you plan on customizing the Bootstrap Sass files, or don’t want to use a CDN for the stylesheet, it may be helpful to install vanilla Bootstrap as well.
Importing Components #
You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
Browser globals #
We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object. These bundles are available on unpkg, as well as in the npm package.
Examples #
React-Bootstrap has started a repo with a few basic CodeSandbox examples. Click here to check them out.
Stylesheets #
Because React-Bootstrap doesn’t depend on a very precise version of Bootstrap, we don’t ship with any included CSS. However, some stylesheet is required to use these components.
How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.
In case you are using Sass the simplest way is to include the Bootstrap’s source Sass files in your main Sass file and then require it on your src/index.js or App.js file. This applies to a typical create-react-app application in other use cases you might have to setup the bundler of your choice to compile Sass/SCSS stylesheets to CSS.
Customize Bootstrap #
If you wish to customize the Bootstrap theme or any Bootstrap variables you can create a custom Sass file:
. And import it on the main Sass file.
Advanced usage #
See the Bootstrap docs for more advanced use cases and details about customizing stylesheets.
«as» Prop API #
With certain React-Bootstrap components, you may want to modify the component or HTML tag that is rendered.
If you want to keep all the styling of a particular React-Bootstrap component but switch the component that is finally rendered (whether it’s a different React-Bootstrap component, a different custom component, or a different HTML tag) you can use the «as» Prop to do so.
The example below passes a Column component to the «as» Prop in a Button component. This ultimately causes a Column component to be rendered but with the same styles as a Button component.
Themes #
React-Bootstrap is compatible with existing Bootstrap themes. Just follow the installation instructions for your theme of choice.
If you would like to add a custom theme on your app using Create React App, they have additional documentation for Create React App and Bootstrap here
Browser support #
We aim to support all browsers supported by both React and Bootstrap.
Начать с 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 с React
Дата публикации: 2018-06-18
От автора: с ростом популярности одностраничных приложений за последние несколько лет появилось много интерфейсных JavaScript-фреймворков, таких как Angular, React, VueJS, Ember, этот список можно продолжить. В результате использование DOM-библиотек, таких как jQuery, больше не является необходимым требованием для создания веб-приложений. С другой стороны, появилось несколько фреймворков CSS, которые помогут удовлетворить требования построения адаптивных веб-приложений. Почти каждый разработчик интерфейса должен либо использовать, либо слышать о Bootstrap, Foundation или Bulma, каждый из которых представляет собой адаптивную (мобильную) структуру CSS с надежными функциями и встроенными утилитами.
Хотя React стал самой используемой средой JavaScript для создания веб-приложений, Bootstrap — самая популярная платформа CSS, обеспечивающая миллионы веб-сайтов в Интернете. Поэтому становится необходимо изучить различные способы, с помощью которых можно интегрировать в React Bootstrap, и это является целью этого урока.
Этот урок никоим образом не пытается подробно изложить React или Bootstrap. Ожидается, что у вас уже есть опыт работы с React и/или Bootstrap. Если вам нужна помощь с любым из них, смотрите документацию React Docs и Bootstrap.
Добавление Bootstrap
Bootstrap можно добавить в приложение React несколькими способами. В этом уроке нас интересуют только три наиболее распространенных способа:
Использование Bootstrap CDN
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Bootstrap как зависимость
React Bootstrap Package
Использование Bootstrap CDN
Это самый простой способ добавить Bootstrap в ваше приложение. Не требуется установка или загрузка. Вы просто помещаете link в раздел head вашего приложения, как показано в следующем фрагменте.
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. Тестируем
Мы проделали большую работу, и теперь наш проект напоминает полноценный сайт, поздравляю!