Как сделать табы на react
Обновлено: 05.07.2024
Эта статья предназнаена не для бывалых React-профи, а скорее для тех, кто зарабатывает разработкой сайтов и кому любопытно, что Реакт может нам подсказать насчет осовременивания пользовательских интерфейсов. React уже давно занимает меня, и поскольку теперь он завоевал определённое положение и хорошие отзывы в сообществе, не жалко потратить время на его изучение. Во фронтенд-разработке постоянно появляется так много новых технологий, что порой даже трудно понять, стоит ли тратить силы на их изучение. В этой статье я собираюсь рассмотреть самые ценные на мой взгляд, практические соображения, чтобы вы смогли начать работать с React.
Честное предупреждение
На работу с этим материалом я потратила всего неделю. Нарочно. Я пишу это, пока эта технология мне еще в новинку, и могу писать о ней, исходя из этого. В этом состоянии я гораздо лучше запоминаю места, на которых я спотыкалась и находки на этом пути.
Пока далеко от идеала, но вряд ли я сама продвинулась бы ещё дальше за этот промежуток времени.
Разрушители легенд: спецвыпуск о практичности в Реакте
Пока мы не начали, мне бы хотелось развеять пару основных мифов, которые, на мой взгляд, являются преградами для большинства людей.
Неа! Отнюдь. Можно использовать CSS, как и обычно. Потратив уйму времени на рефакторинг гигантского объёма CSS-кода, я поняла, насколько это важно. Реакт относительно новый и ему пока не приходилось выдерживать испытание переделками дизайнов. Если бы мне пришлось заново продираться через тысячи строк встроенных стилей ради обновления padding и line-height , меня бы, как разработчика, это наверняка расстроило.
Тем не менее бывают случаи, когда встроенные стили целесообразны. Если есть компонент, меняющий стили в зависимости от их состояния (к примеру: визуализация данных), то встроенные стили оказались бы весьма кстати, чтобы не пришлось поддерживать нереальное число статических стилей (во многих местах), обрабатывая всевозможные состояния.
Хотя мне кажется, это могло бы быть в придачу к базовому CSS, используемому приложением, и было бы скорее исключением, чем правилом. Однако, в вебе всем хватит места, так что ничто не абсолютно.
Ещё одна, на мой взгляд, приятная деталь в стиле преподавания Веса Боса, это то, как он постепенно подводит слушателя к более привычному подходу и реализации. Я иногда грешу излишне упрощенным и очевидным кодом, хотя и понимаю, что другим нравятся примеры поабстрактнее.
Он предлагает писать разметку с помощью JSX, который наиболее близок к нашему другу, традиционному HTML, так что лично для меня это гораздо понятнее. Поэтому вместо:
Каждый из них работает. Но когда наша разметка становится всё сложнее, я обнаружила, что знакомый HTML в виде JSX помогает моему пониманию. Но учтите, что даже с JSX есть незначительные различия.
И действительно, для Реакта нужно использовать инструменты для сборки, поэтому, как правило, туториалы начинаются с этого. Но я бы посоветовала начинать с того, что если вы совсем новичок, вам следовало бы поковыряться на CodePen, JSBin или JSFiddle. Это — хороший способ повторять и усваивать уроки, прежде чем вкладывать кучу сил в совершенно новую технологию. С целью сделать первый шаг, в сегодняшних примерах я планирую использовать CodePen.
Использование Реакта в типичных приложениях
В типичных приложениях на React 0.14+ прежде всего нам потребуется React и ReactDOM:
А затем вызов ReactDOM.render :
Использование Реакта в CodePen
В нашем случае просто выберем Реакт из выпадающего меню в панели JS (кликнете на иконку шестеренки вверху панели), а затем воспользуемся Babel в качестве компилятора.
Нам не требуется подключать React или ReactDOM с помощью require , поскольку у нас нет никакой маршрутизации, а мы используем компонент приложения напрямую. Просто подправим наш код:
Также, чтобы приступить к работе, потребуется отладчик для Реакта в виде расширения для Chrome или для Firefox, которые отлично подходят для отладки виртуальной DOM.
Использование Реакта
Обратите внимание на структуру для создания компонента приложения, находящуюся вверху. Двигаясь вперёд, вы привыкните к этому синтаксису, поскольку всё, что мы построим сегодня, будет работать на основе этих блоков.
Ничего сложного, правда? Всё равно, что строительные блоки любой веб-страницы. Мы создали навигацию с шапкой, и применили эти компоненты к компоненту приложения, который отображён в body. Единственным подвохом последнего примера может показаться непонятный дополнительный div вокруг и . Это потому, что мы должны всегда возвращать один элемент. У нас не может быть два сестринских элемента, вот и приходится оборачивать их в один div.
Теперь, разобравшись со стоительными блоками, вы должны без проблем собрать целую страницу с помощью Реакта и его компонентов. Я бы посоветовала сделать рефакторинг макета уже созданной вами страницы, просто ради учёбы. Добавьте туда таблицу стилей и собирайте шаг за шаг остальные детали, пока не востановите её полностью. Для практики самое то.
Можно автоматизировать этот процесс, но я бы не советовала использовать подобный инструмент до тех пор, пока вы сначала не пройдете все этапы настройки окружения под себя. Поэтому, столкнувшись в дальнейшем с проблемами, понять происходящее не составит труда.
Обычные подозреваемые: переменные и обработка событий
Давайте добавим чуть-чуть обработки событий и простых переменных, для начала просто чтобы понять, как это происходит.
И снова возьмём первое демо (давайте использовать его на протяжении всей статьи):
У компонента статьи в блоге весьма простая разметка, так что начнём с этого:
Добавим произвольную переменную и обработчик события и посмотрим, как это работает. Первое, что стоит учесть — если мы используем JSX, то фигурные скобки сообщат Реакту, что мы готовы использовать JavaScript. Так что наша переменная будет выглядеть как .
Мы хотим добавить оператор переменной внутрь вызова функции render, но прежде, чем вернуть разметку. Можно затем получить к ней доступ, вызвав переменную, в данном случае . Событие по клику — встроенный обработчик onClick , вероятно, противоречащий хорошему тону, к которому вы привыкли. Это имя мы выбрали сами, когда как render — метод фреймворка. Мы вызваем и пишем метод, хранимый как tryClick (произвольное имя) внутри того же компонента, к примеру:
- click = onClick
- mouseEnter = onMouseEnter
- keyPress = onKeyPress
Здесь можно найти полный список всех поддерживаемых событий.
Объединение Реакта с другими библиотеками (в данном случае Greensock)
Для анимации я предпочитаю GSAP. В Реакте можно использовать и другие библиотеки, поэтому объеденим GSAP с Реактом и посмотрим, что будет.
Мы хотим обращаться к другим библиотекам в нужный момент, поэтому нужно убедиться, что они вызываются сразу же после первого метода render. И в этом нам поможет метод componentDidMount . Ещё немного о других методах жизненного цикла мы поговорим позже, но пока для нас важно то, что этот метод вызывается сразу же после вставки компонента в документ.
Возможно, вы привыкли обращаться к DOM через jQuery или ванильный JavaScript. Можно по-прежнему делать так, но здесь мы обращаемся к частям DOM через getDOMNode() и refs , в этой строке: var sq1 = this.refs.squares1.getDOMNode(); . Немного подробнее об этом написано в документациии Реакта.
У Реакта есть и другие способы добавить динамики вашим проектам — React-Motion Ченга Лу просто замечателен, еще стоит отметить React-GSAP-Enhancer.
Создание глобальной функции-хелпера
Можно даже писать функции-хелперы, к которым легко может обращаться множество компонентов. Для этих функций подходит та же точечная нотация, что и для this.functionName . Мы сохраняем функцию-хелпер (в этом примере на CodePen — прямо в начале файла, но в реальных приложениях это был бы отдельный файл) и объявляем каждую из них в качестве объекта, таким же способом, как и в структуре компонента.
Что-то вроде правильно отформатированной даты в первом демо со статьями блока могло бы выглядеть так:
И использовано вот так:
Настоящее дело: управление состоянием
Хорошо! Теперь, когда мы разобрались со строительными блоками, перейдём к одной из самых класссных вещей.
Реакт безусловно хорош в создании простых для понимания и небольших размеров компонентов, но где действительно проявляется его мощь — это управление состоянием для этих компонентов. Разберём это немного подробнее.
Для этой части разберём пару вещей, весьма важных для понимания того, как обращаться и работать с элементами, которые изменяются.
Каждый раз, когда мы меняем что-либо из этих двух вещей и наш компонент зависит от этого, Реакт будет перерисовывать те части вашего компонента, которые ему понадобится
Прелесть виртуальной DOM в том, что Реакт ищет только те ноды в DOM, которые нужно обновить.
Теперь я прочитала кучу всего про состояние, но думаю, Весу удалось выразиться яснее всех, поэтому я перефразирую его: Если вы привыкли к jQuery, то все данные у вас хранятся в DOM. Реакту это ни к чему, он хранит данные в объекте (состоянии), а затем отрисовывает вещи, в зависимости от объекта. Это как главный эталон, от которого всё зависит.
Props на практике
Для начала давайте просто опробуем this.props , добавив к компоненту Header , а после обратимся к нему в приложении.
Для props можно также добавить значение по умолчанию, в методе жизненного цикла с очень подходящим названием getDefaultProps . Это здорово, поскольку порой не хочется указывать props для каждого компонента. Примером может быть аватар по умолчанию, пока пользователь не выбрал себе настоящий, как яйцо в Твиттере, или установка списка в качестве пустого массива, который будет наполнен позже.
Практика
Давайте немного разовьем это и поработаем с состояниями. Если мы в итоге собираемся менять this.state , нужно довести его до готовности. Для этого воспользуемся getInitialState , что позволит установить, какое состояние самое первое. Без этого мы не сможем добавить состояние.
Давайте просто менять фон в зависимости от выбора пользователя.
Важная часть этого, которую нужно учитывать — требуется функция handleChange
С нативными select-ами в обычном DOM ничего подобного бы не понадобилось, поскольку они автоматически обновлялись бы по выбору пользователей. В Реакте все состояния управляются компонентом, поэтому если нужно, чтобы input или select следил за изменениями, вам придется описать это в коде. Это означает, что за состояние отвечает компонент, а не пользователь.
На первый взгляд неясно, ради чего было столько возиться, но мы намеренно оставляем эти примеры маленькими. По-настоящему Реакт проявляет себя, когда дело доходит до больших сложностей. Как бы я ни любила jQuery (а я до сих пор люблю jQuery, это не то, что можно выразить булевой переменной true/false), вам не удастся уйти от довольно частой проверки при изменениях. В Реакте это решается тем, что эта необходимость устраняется благодаря простоте направления потока данных, по этой же причине его проще отслеживать в очень сложных приложениях.
Основные понятия состояния
Теперь, когда мы разобрались в самых основах, давайте быстренько рассмотрим, почему мы делаем именно так, и некоторые передовые методы.
Поэтому нам нужно по максимуму сохранять состояние в компоненте. На самом деле, вам не стоит беспокоиться о том, когда что-то перерисовывается. Всё, что вам важно учитывать — когда изменяется состояние, а об отображении Реакт позаботится сам.
Из такой идеологии разработки напрямую следует то, почему я также не советую использования props в getInitialState , и здесь можно подробнее почитать о том, почему это считается антипаттерном.
Мы не хотим слишком злоупотреблять состоянием. Хотя компонент и отображается довольно быстро, производительность может упасть, если слишком уж увлечься управлением состоянием. Можно обойти это, едва это станет проблемой, но лучше не попадать в такие ситуации, в принципе.
В оставшейся части статьи мы обсудим, как лучше всего управлять этими состояниями и хранить то, что не меняется, на верхних уровнях иерархии, ссылаясь при этом на лишённые состояния компоненты ниже.
Информацию об элементе можно также получить с помощью так называемого ref. Использование Ref-ов осуществляется за счёт прикрепления их к любому компоненту. Затем они возвращаются во время вызова метода render() и после мы можем ссылаться на них снаружи render() . Это крайне полезно.
И снова возьмём первый пример на CodePen. Давайте на минутку задумаемся, как создаются эти новые статьи в блоге, и при этом применим ref-ы.
На каждом поле формы у нас есть ref, наподобие такого:
А на самом элементе формы мы вызываем:
который ссылается на функцию createPost выше функции render, и использует ref-ы для хранения информации из отправляемой формы:
а затем можно обратиться к нему в состоянии приложения с помощью this.props :
Это крайне удобно, поскольку теперь есть переменная post , с объектом, хранящим своё название (показано тут), дату, детали и т.д. Мы по-прежнему не храним ничего из этого в состоянии приложения, а только лишь дали приложению возможность это использовать. Рассмотрим это подробнее в следующем разделе, заодно с keys.
Этот пример я взяла в качестве способа поговорить о ref-ах в целом, но в приложениях из реальной жизни, вам, возможно, захочется рассмотреть что-то вроде form-serialize, чтобы упаковать поля формы для отправки аяксом.
Keys и использование Ref-ов
В последнем разделе мы создали способ хранить данные, собранные в форме, без передачи их куда-либо. Это потому, что в Реакте мы стремимся управлять этим состоянием в верхнем уровне иерархии. Для сохранения этого состояния, мы запускаем начальное состояние с пустым объектом. Вот где в итоге сохраняются данные из формы.
Затем возьмём функцию addPost. Заметьте, что управление находится здесь, а не в форме, даже хотя вызов происходит из формы. Мы даём состоянию временнУю метку, чтобы статьи оставались уникальными, а также настраиваем состояние для статей.
У каждого дочернего элемента в массиве должен быть уникальный key.prop . Это важно, поскольку при любой возможности Реакт всё равно будет повторно использовать существующий DOM. Реакт использует keys для отслеживания того, какие элементы в DOM он должен обновить. Он избавляет нас от перерисовки всех DOM-элементов, когда это требуется. Это улучшает производительность нашего приложения.
Теперь давайте снова обратимся к приложению, и посмотрим, что мы делаем с только что сохранёнными данными из формы:
Можно видеть, что когда приложение отображается, мы используем Object.keys для создания нового массива. Затем берём .map() с функцией renderPost , которую создадим заранее. Для тех, кто не знаком с .map() , она полезна для создания массива из существующего массива, можете представить её в виде цикла.
Теперь давайте создадим эту самую функцию renderPost, которую только что вызвали. Мы передаём ключ в качестве параметра и назначаем его в качестве ключа, индекса, и создаём объект, который мы называем details, чтобы хранить информацию о состоянии статьи.
Может показаться странным, что мы передаём key и index , но внутри компонента невозможно обратиться к ключу prop , поэтому мы передаём ещё один ключ под названием index . Функция renderPost просто создаёт компонент для каждого элемента в массиве, с подробностями, переданными вниз по иерархии, к которым затем можно обратиться. Это довольно-таки круто, поскольку, если в нашем состоянии что-то обновится, это распространится вниз по иерархии и мы сможем управлять им в одном месте.
В компоненте хранятся подробности, вынесенные вниз по иерархии для отображения всей информации. А созданная нами ранее функция-хелпер, нужная для правильно отформатированной даты, выглядит здесь так: :
А теперь всё вместе
Теперь, когда с keys всё ясно, взглянем на минутку на общую картину. Мы рассмотрели getInitialState , componentDidMount и render , но в Реакте есть ещё один метод при подключении — componentWillMount . Он похож на componentDidMount , но выполняется прямо перед первым отображением компонента.
Эта схема, конечно, включает не все возможности Реакта, а лишь краткую выжимку из пройденного нами материала, и её вполне хватит, чтобы начать возиться с ним.
Заключение
О Реакте написано гораздо больше, а эта статья лишь начало. Надеюсь, это путешествие новичка позволило понять, как подготовиться к работе с Реакта. Эта статья растянулась аж на 20 страниц, но при этом мы даже не затронули массу других важных тем в связи с Реактом, включающих ES6, Browserify, Gulp, Webpack, несметное число альтернативных реализаций и многое другое.
Большое спасибо Майклу Джексону, Весу Босу и Вэл Хед за проверку этой статьи.
В этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это завершающая часть, в ней будет рассказано о передаче пропсов компоненту роута, редиректах и вложенных роутах. + бонус, стилизация активных элементов навигации.
p.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
Передаём пропсы компоненту роута
Мы видели несколько примеров и рабочих кейсов в React роутере. Один из них это передача пропсов напрямую компоненту самого роута.
В React-router это делается очень легко. Давайте создадим новый роут для передачи props его компоненту.
Прямо сейчас мы добавили компонент и новую страницу. Давайте передарим пропс title уже самой странице.
Есть два способа это сделать. Первый очень простой.
Передаём функцию как пропс компонента в компоненте роута
Эта штука сработает, но такой подход не рекомендуется применять с роутером. Почему? Сейчас объясню.
Под капотом React использует React.createElement для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендере, вместо того, чтобы просто обновить уже существующий компонент.
В маленьких приложениях с довольно несложными страницами, это не будет влиять на производительность. Но для больших приложений с множественным изменением состояния на странице, это значительно снизит производительность из-за необязательных циклов ре-рендеринга.
Роутер даёт нам довольно простое решение в этой ситуации. Вместо простой передачи функции через пропсы component , мы можем передать их через пропсы render . Передавая наши пропсы, нам также надо передать дефолтные пропсы к пропсам рендеринга. Давайте посмотрим пример:
Вот это уже рекомендуемый способ передачи самих пропсов в React роутере.
Это очень просто. Если вы хотите увидеть весь пример, то проверьте его тут.
Редиректим роуты
В основном редиректы используют при проверке пользователей на авторизацию, если пользователь не авторизован, то его перенаправит на соответствующую страницу.
Вообще, всё это очень легко сделать с использованием компонента Redirect .
Давайте посмотрим на простой пример того, как он работает. Давайте создадим простую страницу, которая перенаправит на другую страницу основываясь на заданных условиях.
Давайте перенаправим с /old-route на /new-route
Простой пример редиректа
Добавляем роут редиректа в наш пример.
Сейчас мы создадим два URL.
/old-route это старый URL, с которого будет редирект на новый URL /new-route , используя компонент Redirect.
Тут вы увидите, что старая ссылка редиректит на новую ссылку и тут же показывает его в браузере.
Редирект посложнее, основанный на пропсах
Давайте сначала сделаем страничку.
Давайте укажем роут для страниц Auth и Dashboard :
Вложенные роуты и контент
До этого мы видели простые примеры работы с реакт роутером. А сейчас мы разберемся с тем, как работать с вложенными роутами. Перед тем как углубиться в них давайте поймем, что же это такое?
Примеры вложенных роутов
Этот роут показывает всех пользователей.
Вложение первого уровня:
Эти примеры роутов показывают конкретного пользователя. Param и miguel это userId используемые для получения данных о конкретных пользователях.
Вложение второго уровня:
Давайте начнем с конкретного примера. Мы собираемся показать пользователей и затем вывести детальную информацию о них.
Вложенные роуты в React Router
Для примера мы возьмем вот эти данные:
В этом примере есть несколько пользователей и каждый из них имеет разное количество вложенных табов, в каждом из которых есть имя и контент, который мы покажем.
Используя эти данные мы создадим эти роуты:
Вложение первого уровня:
Вложения второго уровня:
Показываем вложения первого уровня
Тут мы пробегаемся по всем данным пользователей и показываем ссылку на каждого пользователя с данными о нем.
Также мы указываем схему роутов для пользователей. userName это параметр, передающийся компоненту UserPage .
Компонент UserPage покажет простую информацию о конкретном пользователе.
React роутер передаст пропсы match и мы сразу получим информацию о пользователе используя значение userName .
Показываем вложенные роуты как табы
Пропс match отдаёт нам url через match.url , который можно использовать для создания вложенных роутов.
Тут мы создаем вложенные роуты, используя информацию для табов у каждого пользователя.
match.path уже выдаёт нам имя пути. Его мы будем использовать для указания вложенной схемы роута.
Но зачем использовать match.path , а не match.url ?
Потому что match.path содержит настоящий путь, то есть user/:userName , где match.url уже готовый url user/Param.
Именно поэтому match.url находится в Link, а match.path используется в определении роута.
tabName это параметр роута, который мы передаём компоненту TabPage . Он использует его для нахождения точного таба и показывает сам контент непосредственно в табе. Давайте глянем на код.
Пропсы match отдадут нам все params в URL userName , tabName
Находим таб в наших данных, используя оба параметра
Показываем информацию таба
Следовательно, мы показали вложенные роуты и вложенный контент в этом примере.
Посмотрим пример в действии.
БОНУС: Используем для указания того, какой элемент активен в панели навигации
Вы можете также импортировать и :
Оба они компилируются в html код, как тут:
Может показаться, что основной их функционал одинаков. Так зачем же нам тогда оба? А затем, что идёт вместе с дополнительным атрибутом стилизации, который позволяет нам стилизовать по особенному именно активную ссылку.
А теперь давайте посмотрим на различия между двумя компонентами. даёт нам дополнительный атрибут activeClassName . В этом атрибуте мы можем указывать класс в CSS, который будет выделять то, что ссылка активна.
CSS селекторы описанные ниже, рендерят линию подчеркивания в тех случаях, когда мы наводим на ссылку и когда она открыта и активна.
С помощью , мы можем добавить атрибуты стилизации для активных элементов, чей путь совпадает с URL в браузере.
В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.
Прим. перев. Если вы начинаете изучение React, вам также стоит прочитать наш материал, в котором разработчик делится советами по использованию этой библиотеки.
Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:
Создайте ваше первое приложение
Прежде всего вам понадобится node.js и редактор кода, например, Atom.
Откроем терминал и установим create-react-app :
Примечание: Пользователям Linux или MacOS, возможно, потребуется дополнительно ввести команду sudo перед npm install -g .
Начнем создавать наше приложение прогноза погоды:
Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:
Новое приложение автоматически откроется в браузере!
Свойства и компоненты
Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js :
Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!
Изменим компонент App , чтобы отобразить наш WeatherDisplay :
Как видите, мы передали данные, которые обозначили переменной zip , в компонент WeatherDisplay . Они называются свойствами (props). Мы можем модифицировать наш компонент для отображения передаваемых данных:
Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:
Обновим render() в компоненте App , в котором, перебирая массив PLACES , создадим тег button для каждого города:
Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве.
На этом этапе файл App.js должен выглядеть так.
Состояние
Мы хотим, чтобы в приложении была возможность переключаться между местами, поэтому мы можем использовать состояние ( state ) для хранения данных в компоненте App .
Сначала давайте добавим функцию-конструктор, в которой будет использоваться super() , а затем установим начальное состояние this.state :
Функция render() может брать данные из this.state при составлении пользовательского интерфейса. Для этого мы можем использовать метод setState компонента React, который меняет состояние и перезапускает функцию render() , чтобы изменить пользовательский интерфейс.
Применим this.state и this.setState в нашем компоненте App :
На этом этапе файл App.js должен выглядеть так.
Жизненный цикл компонентов и выборка данных
Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев.
В этом примере мы хотим вызвать API, когда компонент загрузится на экране, для этого добавим код в componentDidMount . Обновим компонент WeatherDisplay :
Улучшим вывод render() для красивого вывода данных:
На этом этапе файл App.js должен выглядеть так.
Установка компонентов
Bootstrap — популярный набор инструментов для стилизации пользовательского интерфейса в HTML и CSS. Установим его вместе с react-bootstrap , который предоставляет компоненты React для bootstrap :
Импортируем стили из bootstrap в начале файла:
Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:
Заменим теги в компоненте App , чтобы вывести компоненты bootstrap :
Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch :
Выберите подходящее оформление на сайте bootswatch и установите его, заменив bootstrap . В нашем примере мы используем тему journal:
Окончательный вид нашего приложения:
Развертывание (дополнительный материал)
Прежде всего опубликуйте ваш код на Github, затем перейдите в ваш репозиторий и откройте файл ReadMe, в котором вы найдете инструкцию по развертыванию приложения на различных популярных сервисах.
В этой статье я постараюсь разложить основы создания приложения на React.JS на составляющие. Начнем с рассмотрения как создать приложение React JS.
Что такое React JS?
React — это библиотека JavaScript для создания пользовательских интерфейсов. React следует философии Unix, потому что это небольшая библиотека, которая фокусируется только на одном деле и делает это очень хорошо (т.е. на создании пользовательских интерфейсов).
Пользовательский интерфейс (UI) — это все, что мы помещаем перед пользователями, чтобы они могли взаимодействовать с машиной.
Создание приложения React JS App
Для начинающих разработчиков не нужно арендовать хостинг, либо платить за сервисы по развертыванию среды для разработки react js. Достаточно на своем компьютере или ноутбуке установать node.js. Делается это в три клика.
Установка Node.js
Далее запускаем инсталлятор, все шаги стандартные, жмем next-next-next. Вот этот пункт можете оставить по умолчанию неактивным:
После завершения установки у Вас в пункте меню появятся программки:
Также в директории C:\Program Files\nodejs\ лежат файлы
Создаем приложение React JS App
Для установки react js нам понадобится консоль. Вы можете запустить Node.js command prompt. Я предпочитаю использовать far manager. Тут кто где привык работать.
Итак, создадим директорию нашего проекта — приложения React JS, например:
Далее в консоли перейдем в эту папку и запустим команду для инсталляции create-react-app
Для этого в консоли запустим команду npm i -g create-react-app
Теперь нам необходимо создать приложение с помощью установленного на предыдущем шаге инструмента create-react-app. Инструмент create-react-app был создан Facebook и является рекомендуемым способом создания нового проекта.
Наше первое приложение будет называться hello_react. Для его создания запустим команду:
npx create-react-app hello_react
Запустится инсталляция приложения. Идет она примерно 5 минут (зависит на самом деле от скорости интернета, т.к. все зависимости скачиваются из интернета). Итак, в конце установки у вас должна появиться запись:
Т.к. вы только учитесь, то можете пока не использовать git. В итоге приложение весит довольно много (в текущей версии почти 250МБ):
Запускаем приложение React
Краткое описание файлов в приложении React JS
Общая конфигурация проекта React описана в package.json. Вот как это выглядит:
В файле находятся следующие атрибуты:
- name — представляет имя приложения, которое было передано в create-response-app.
- version — показывает текущую версию.
- dependencies — список всех необходимых модулей / версий для нашего приложения. По умолчанию npm устанавливает самую последнюю основную версию.
- devDependencies — перечисляет все модули / версии для запуска приложения в среде разработки.
- scripts — список всех псевдонимов, которые могут использоваться для эффективного доступа к командам react-scripts. Например, если мы запустим npm build в командной строке, он выполнит внутреннюю «react-scripts build« .
Рассмотрим структуру каталога приложения:
- Каталог node_modules предназначен для инструментов сборки. Файл package.json в корне приложения определяет, какие библиотеки будут установлены в node_modules при запуске npm install. После сборки приложения (финальная стадия разработки) этот каталог не публикуется в продуктив. Этот каталог добавляется в .gitignore
- Все динамические компоненты будут расположены в каталоге src . В этой директории содержится код проекта (вся логика вашего приложения). Именно с ней вам придется большую часть времени работать. Рассмотрим файлы в каталоге src:
- App.js — основной JS-компонент. Каждый компонент, который вы создаете в своем проекте, будет потомком этого компонента.
- App.css — это таблица стилей для css правил. Приложение create-react-app предварительно настроено для использования css таблиц стилей. Также можно использовать scss файлы, просто установив node-sass модуль.
- index.js — точка входа для нашего приложения. Этот файл импортирует код приложения из App.js компонента и делает его в root DIV, расположенном в index.html в public папке.
- index.css — это вторичный css файл с общими данными шрифтов, которые можно удалить или использовать для глобального кода CSS.
- App.test.js и setupTests.js — сборка исходного прилоежния поставляется с предварительно сконфигурированными jest и react-testing-library . В этот setupTest.js файл вы можете включить свои тестовые конфигурации, и App.test.js является основным тестовым файлом. Вы также можете безопасно удалить оба этих файла, если у вас нет опыта в тестировании.
- manifest.json — этот файл используется для описания нашего приложения.
- favicon.ico — это файл изображения значка, используемый в нашем проекте. Он также связан внутри index.html и manifest.json.
- index.html — базовая HTML страница, является корневой для вашего проекта. Ее практически не придется исправлять, но она является также ключевой частью проекта.
Сборка проекта React JS APP
Забегая немножко вперед, опишем как создается сборка проекта. После изменения приложения React и его отладки запускается команда:
Результат работы команды:
![]()
В результате у нас появится директория build:
![]()
В директории сборки весь код компилируется и минифицируется до наименьшего полезного состояния. Читаемость кода неважна, поскольку этот код не предназначен для чтения человеком.
Деплой/Deploy проекта на Heroku (развертывание приложения React)
Для того, чтобы задеплоить весь проект с автоматическим развертыванием приложения React без учета собранного проекта, необходимо скачать Heroku CLI:
![]()
Инсталлируем скаченный дистрибутив. Далее в консоли запускаем команду:
Откроется сайт, где нужно нажать кнопку Login (Enter your Heroku credentials)
Далее последовательно запускаем команды:
![]()
Далее можете внести на своей машине изменения в код App.js, например,
И повторить команды:
В таком виде проект соберется на стороне heroku.
![]()
Что такое JSX?
JSX — синтаксический сахар для функции React.createElement(component, props, . children) .
JSX — это расширение React, которое позволяет нам писать JavaScript, который выглядит как HTML.
JSX позволяет нам писать элементы HTML на JavaScript и размещать их в DOM без вызова методов createElement() , либо appendChild() . JSX преобразует HTML-теги в элементы React. Не обязательно использовать JSX при разработке React, но рекомендуется.
С JSX вы можете писать выражения внутри фигурных скобок < >.
Важно помнить при создании компонентов React, что Вы не пишете HTML. Вы используете расширение JavaScript для возврата вызовов функций, которые создают элементы React (которые по сути являются объектами JavaScript).
Диаграмму жизненного цикла React-компонента можно посмотреть на сайте:
React Lifecycle Methods Diagram на русском:
![]()
или на английском:
![]()
Есть еще такая картинка:
![]()
Краткое описание жизненного цикла
Все, что вы видите в приложении React, является компонентом или частью компонента. В React компоненты созданы так, чтобы следовать естественному жизненному циклу. Они создаются (creation), развиваются (updating) и, наконец, умирают (deletion). Это называется жизненным циклом компонента.
Компоненты React — это независимые и повторно используемые блоки кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render(). Компоненты бывают двух типов: компоненты класса и компоненты функции. Их я опишу потом.
Для каждого этапа жизненного цикла компонента, React предоставляет доступ к определенным встроенным событиям / методам, называемым перехватчиками жизненного цикла (lifecycle hooks) или методами жизненного цикла (lifecycle methods). Эти методы дают вам возможность контролировать и управлять тем, как компонент реагирует на изменения в приложении.
Рассмотрим три фазы жизненного цикла компонента React: Mounting, Updating иUnmounting.
![]()
Важно помнить, что render() это единственный метод, который требуется в компонентах React.
Что такое Mounting?
Mounting (монтирование) — означает размещение элементов в DOM.
В React есть четыре встроенных метода, которые вызываются в указанном порядке при монтировании компонента:
- constructor()
- getDerivedStateFromProps() — вызывается прямо перед рендерингом элементаов в DOM.
- render() — выводит HTML в DOM.
- componentDidMount() — вызывается после рендеринга компонента. Вы можете использовать этот метод для настройки любых длительно выполняющихся процессов или асинхронных процессов, таких как выборка и обновление данных.
Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.
Метод constructor
Метод constructor() вызывается раньше всего, когда компонент запускается, и это естественное место для установки initial state и других начальных значений.
Пример:
Компонент — это JS-класс. Как и любой класс, у него есть метод constructor , который вызывается React каждый раз, когда вы создаете компонент. Обычно он устанавливает состояние и свойства.
Что такое Updating?
Следующим этапом жизненного цикла является обновление компонента (Updating).
Компонент обновляется всякий раз, когда происходит изменение состояния или свойств компонента.
В React есть пять встроенных методов, которые вызываются в следующем порядке при обновлении компонента:
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.
Что такое Unmounting?
Следующая фаза в жизненном цикле — это когда компонент удаляется из DOM или размонтируется (unmounting).
В React есть только один встроенный метод, который вызывается при размонтировании компонента:
state
Компоненты React имеют встроенный state объект.
В state объекте хранятся значения свойств, принадлежащих компоненту.
Когда state объект изменяется, компонент перерисовывается.
Объект state инициализируется в конструкторе:
componentWillMount — этот метод устарел
ComponentWillMount() раньше был методом жизненного цикла и вызывался непосредственно перед методом render() . React отказался от его использования из-за того, что он часто используется небезопасно.
componentDidMount
Метод жизненного цикла componentDidMount() запускается сразу после завершения метода render() и подключения компонента к DOM. Это лучшее место для запуска асинхронной функции. Вот базовый пример того, как вы можете получить данные в компоненте класса:
componentDidUpdate
Если у вас есть состояние, основанное на props, вам может потребоваться использовать componentDidUpdate() метод, который вызывается сразу после обновления. Используйте его для обновления модели DOM, сравнивая предыдущие свойства с текущими, см. Пример ниже:
props и propTypes
Props — это список атрибутов, передаваемые в компоненты React. Свойства передаются компонентам через атрибуты HTML.
Компонент функции React получает этот список в качестве своего первого аргумента. Список передается как объект с ключами, представляющими имена атрибутов, и значениями, представляющими присвоенные им значения.
React — это все о компонентах
В React мы описываем пользовательские интерфейсы с помощью компонентов, которые можно использовать повторно, компоновать и сохранять состояние.
Мы определяем маленькие компоненты, а затем собираем их вместе, чтобы сформировать более крупные. Все компоненты, маленькие или большие, можно использовать повторно, даже в разных проектах.
Вы можете думать о компонентах как о простых функциях (на любом языке программирования). Мы вызываем функции с некоторым input, и они дают нам некоторый output. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких.
Компоненты React точно такие же:
Компонент React — это шаблон. План. Глобальное определение. Это может быть функция или класс (с методом рендеринга).
Мы можем повторно использовать один компонент в нескольких пользовательских интерфейсах, а компоненты могут содержать другие компоненты. Базовая форма компонента React — это на самом деле старая обычная функция JavaScript.
Некоторые компоненты React чистые, но вы также можете добавить в компонент побочные эффекты. Например, компонент может изменить HTML-заголовок веб-страницы, когда он монтируется в браузере, или он может прокручивать представление браузера в определенное положение.
Что наиболее важно, компонент React может иметь private state для хранения данных, которые могут изменяться в течение жизненного цикла компонента. Это private state является неявной частью ввода, которая управляет выводом компонента, и именно это и дало React название!
Что такое hook?
Функции hook React могут использоваться только в функциональных компонентах. Вы не можете использовать их в компонентах класса.
Читайте также:
