Одностраничные приложения React с модулями React-Router and React-Transition-Group

Одностраничные приложения React с модулями React-Router and React-Transition-Group

От автора: в этом уроке вы узнаете, как с помощью модулей react-router и react-transition-group создавать многостраничное React приложение с анимациями page transition.

Подготовка приложения React

Установка пакета create-react-app

Если вы хоть раз пробовали React, возможно, вы слышали о пакете create-react-app. Он сильно упрощает начало разработки в React.

В этом уроке мы будем использовать этот пакет для инициализации приложения React. Прежде всего, установите Node.js. Он также поставит npm.

Запустите в консоли npm install -g create-react-app. Команда глобально установит create-react-app на ваш компьютер.

Далее можно проверить установку с помощью команды create-react-app -V.

Создание проекта React

Необходимо создать проект React. Просто запустите create-react-app multi-page-app. multi-page-app можно заменить на свое название.

create-react-app создаст папку multi-page-app. Выполните cd multi-page-app, чтобы сменить папку. Далее выполните npm start для инициализации локального сервера.

Это все. Вы запустили приложение React на локальном сервере. Необходимо почистить стандартные файлы и подготовить приложение. В папке src удалите все кроме App.js и index.js. В файле index.js замените код на следующий:

Я в основном удалил строки, связанные с registerServiceWorker, а также строку import ‘./index.css’;. В файле App.js замените код на следующий:

Далее установим необходимые модули. Чтобы установить модули react-router и react-transition-group, выполните в терминале следующие команды.

После установки пакетов можно их проверить. Откройте файл package.json в главной папке проекта, модули должны быть подключены под dependencies.

Компоненты роутера

Есть 2 разных варианта роутера: HashRouter и BrowserRouter.

Исходя из названия, HashRouter использует хэши для отслеживания ссылок – подходит для статических серверов. Если же сервер динамический, лучше использовать BrowserRouter – с ним URL будет красивее.

Как только решили, что будете использовать, добавьте компонент в файл index.js.

Далее необходимо обернуть компонент <App> в компонент роутера. Конечный вариант файла index.js:

Если вы выберите динамический сервер и BrowserRouter, единственное различие будет в том, что необходимо будет импортировать BrowserRouter и с его помощью обернуть компонент App.

Оборачивая компонент App, мы создаем объект приложения history, посредством которого компоненты react-router смогут общаться друг с другом.

Внутри компонента App

Внутри компонента App у нас будет 2 компонента Menu и Content. Исходя из названий, они будут хранить меню и показывать контент. Создайте папку components внутри папки src. Создайте файлы Menu.js и Content.js.

Menu.js

Наполним компонент Menu.js. Это будет функциональный компонент без состояния. Нам не нужны состояния и хуки жизненного цикла.

У нас есть ul с тегами li для ссылок. Добавьте строку ниже в компонент Menu.

Оберните контент тегов li в компонент <Link>.

Компонент Link — это react-router компонент, который ведет себя как тег <a>, но не перезагружает страницу с новой ссылкой.

Если через CSS добавить стили тегу a, компонент Link также примет эти стили. Есть расширенная версия компонент Link – NavLink. Этот компонент предлагает возможность стилизовать активные ссылки. Необходимо определить, куда будут вести ссылки. Для этого в компоненте Link есть свойство to.

Content.js

Внутри компонента Content мы определим Routes, которые будут совпадать с Links. Нам понадобятся компоненты Switch и Route из react-router-dom. Поэтому сначала импортируйте их.

Во-вторых, импортируйте компоненты, на которые мы будем ссылаться. Это компоненты Home, Works и About. Предположим, что вы уже создали эти компоненты в папке components. Их тоже нужно импортировать.

В этих компонентах может быть что угодно. Я просто определил их как функциональные компоненты без состояния с минимумом контента. Пример шаблона показан ниже. Его можно использовать для всех трех компонентов, но не забудьте поменять названия.

Switch

С помощью компонента Switch мы группируем наши компоненты Route. Switch ищет все Routes и возвращает первое совпадение.

Route

Routes – это компоненты, вызывающие целевой компонент, если он совпадает со свойством path. Конечная версия файла Content.js:

Компоненту Home нужно доп. свойство exact – это главная папка. Exact заставляет Route сравнивать четкие пути. Если он не используется, другие пути, начинающиеся с /, также будут соответствовать компоненту Home, и для каждой ссылки он будет отображать только компонент Home.

Теперь по клику на ссылку меню приложение должно переключать контент.

Анимация переходов Route

На данном этапе у нас есть рабочая система роутера. Анимируем переходы роутера. Для этого воспользуемся модулем react-transition-group.

Будем анимировать состояние mounting каждого компонента. Когда вы маршрутизируете разные компоненты с компонентом Route внутри Switch, вы, по существу, mounting и unmounting разные компоненты.

Мы будем использовать react-transition-group в каждом компоненте, который мы хотим оживить. Таким образом, у вас может быть разная анимация для каждого компонента. Я буду использовать только одну анимацию для всех.

Для примера возьмем компонент Home. Сперва необходимо импортировать CSSTransitionGroup.

Далее необходимо обернуть контент с его помощью.

Так как мы работаем с состоянием mounting компонента, мы включаем transitionAppear и задаем таймаут. Мы также выключаем transitionEnter и transitionLeave, так как они валидны только с подключенным компонентом. Их нужно использовать, если вы хотите анимировать детей компонента.

Наконец, добавьте transitionName, чтобы на него можно было ссылаться в файле CSS.

Мы также импортировали CSS файл, где задали CSS переходы.

Если обновить страницу, то на компоненте Home появится эффект fade-in.

Если вы примените ту же процедуру ко всем другим маршрутизируемым компонентам, вы увидите их отдельные анимации, когда измените контент в Menu.

Заключение

В этом уроке мы рассмотрели модули react-router-dom и react-transition-group. По обоим модулям можно сказать намного больше, чем в этой статье. Вот рабочая демонстрация того, что было покрыто.

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

За последние пару лет React стал популярным. Фактически, у нас есть ряд предметов на рынке, доступных для покупки, просмотра, реализации и т.д.

Автор: Dogacan Bilgili

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Курс по React JS Material UI

Прямо сейчас посмотрите курс по React JS Material UI

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree