Эта запись была обновлена ​​13 августа 2021 года! 🎉 Мы обновили использование React с v16.9.0 до v17.0.2, React-Redux с v6.0.0 до v7.2.4 и ReactiveSearch с 3.0.0-rc до 3.22.0.

Это третий пост для магазина фильмов, серия руководств по приложениям электронной коммерции React & Redux, созданная Appbase. Конечным результатом этой серии стал ваш собственный многофункциональный масштабируемый магазин фильмов, созданный с помощью React и Redux!

В этом посте мы научим вас создавать домашнюю страницу и настраивать CSS в компонентах React.

Оглавление

  1. Начало работы с React и Next.JS
  2. Основы React
  3. Домашняя страница + Макет + CSS-in-JS (Emotion.JS) (⇒ Вы здесь!)
  4. Основы Redux
  5. Компоненты пользовательского интерфейса Appbase.io + ReactiveSearch
  6. Создание страницы поиска
  7. Аутентификация с Auth0
  8. Страница продукта + Страница оформления заказа + Платеж с полосой
  9. Аналитика с Appbase.io
  10. Развертывание с помощью Heroku
    ИЛИ
    Развертывание с помощью Vercel
  11. Совместимость с PWA (Progressive Web App)

Мы будем говорить на следующие темы:

  • Настройка ant-design
  • Используйте emotion-JS для достижения CSS-in-JS.
  • Создать макет страницы
  • Создание пользовательского интерфейса домашней страницы

Начиная

Шаг 1. Настройка дизайна Ant

Во-первых, давайте добавим в наш проект библиотеку компонентов. Библиотека компонентов предлагает множество функций, таких как:

  • Готовые к использованию готовые компоненты
  • Единый дизайн во всем приложении
  • Настройка и гибкость
  • Адаптивный макет для мобильных устройств
  • Сосредоточьтесь больше на бизнес-логике, сэкономив время на пользовательском интерфейсе

Мы собираемся использовать Ant-design, одну из самых популярных библиотек компонентов для React.

Установка

yarn add antd

Добавьте в корень файл .babelrc со следующей конфигурацией:

Примечание. Next.js поставляется с конфигурацией babel по умолчанию, хотя вы можете переопределить ее, добавив собственный .babelrc в корень.

Используйте babel-plugin-import (рекомендуется). Это позволяет импортировать компоненты из antd без необходимости вручную импортировать соответствующую таблицу стилей. Плагин antd babel автоматически импортирует таблицы стилей.

Подробнее о настройке файла .babelrc.

Транспортировка модулей CSS с помощью next.config.js

Вот основные моменты кода:

  • Мы будем использовать пакет @ zeit / next-css, который позволяет нам импортировать .css файлы в наш код. Согласно их документам, таблица стилей скомпилирована в .next/static/css. Next.js автоматически добавит файл CSS в HTML. В производственной среде добавляется хэш фрагмента, чтобы стили обновлялись при развертывании новой версии таблицы стилей.
  • Мы используем еще один плагин под названием next-transpile-modules для переноса непереведенных модулей из node_modules, например antd.

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

Давайте визуализируем компонент Button из дизайна Ant с помощью ReactDom.

import { Button } from 'antd'; 
ReactDOM.render(<Button />, mountNode);

Шаг 2: CSS-в-JS

Мы используем CSS-in-JS для стилизации наших компонентов, он абстрагирует модель CSS до уровня компонента, а не до уровня документа (модульность).

Emotion - это высокопроизводительная легкая библиотека CSS-in-JS.

Согласно документам:

Emotion - это производительная и гибкая библиотека CSS-in-JS. Основываясь на многих других библиотеках CSS-in-JS, он позволяет быстро стилизовать приложения с помощью стилей строк или объектов. Он имеет предсказуемый состав, чтобы избежать проблем со специфичностью CSS. Благодаря исходным картам и этикеткам Emotion имеет отличный опыт разработчика и отличную производительность с тяжелым кешированием в производственной среде.

Установка

Установите необходимые пакеты:

yarn add @emotion/babel-preset-css-prop @emotion/core @emotion/styled emotion emotion-server

Нам нужно будет правильно извлечь и внедрить стили, создав файл с именем _document.js в папке pages со следующим содержимым:

Примечание. На страницах в Next.js отсутствует определение разметки окружающего документа. Например, вы никогда не включаете <html>, <body> и т. Д. Чтобы переопределить это поведение по умолчанию, вы должны создать файл в ./pages/_document.js, где вы можете расширить класс Document.

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

Шаг 3. Создайте макет страницы

У нас есть готовые настройки Ant design и Emotion, давайте создадим несколько компонентов для создания макета нашей страницы.

Сначала создайте специальную папку для компонентов React с именем компоненты в корне. Мы собираемся добавить еще немного абстракции, создав папку Макет в каталоге компоненты, чтобы добавить компоненты, связанные с макетом.

Мы собираемся создать компонент-оболочку, используя концепцию React Composition, этот компонент можно использовать на всех страницах для выполнения набора общих задач. В React композиция дает вам довольно интересные преимущества. Вы создаете небольшие и компактные компоненты и используете их для компоновки дополнительных функциональных возможностей.

Давайте добавим наш первый компонент, создав файл Container.js со следующим содержанием в каталоге components / Layout.

Обобщим код:

  • Мы создали функциональный компонент, который принимает два свойства children и title. Свойство children позволяет вставлять компоненты внутрь других компонентов.
  • Мы используем компонент Head из Next.js, чтобы установить свойства заголовка страниц.
    Например, свойство title используется для установки заголовка страницы со значением по умолчанию как Магазин фильмов.
  • Мы используем компонент Layout из Ant design, чтобы обрабатывать макет всей страницы. Дополнительные сведения см. в документации.
  • Мы используем css из @ эмоция / ядро, чтобы определить стиль нашего компонента-контейнера.

Создать компонент заголовка

Давайте добавим пользовательский интерфейс на нашу страницу, создав общий компонент Заголовок на всех страницах.
Мы собираемся поместить компоненты, связанные с заголовком, в новую папку под названием Header в папке Layout, давайте заполним components / Layout / Header / index. js со следующим содержанием.

Основные моменты кода:

  • Мы разделили панель навигации на два компонента: LeftMenu и RightMenu, которые имеют содержимое левого и правого меню соответственно.
  • Вы можете видеть, что мы визуализируем логотип и используем Link Next.js для перехода.

Примечание. Как мы знаем, Next.js работает со структурой каталогов, поэтому все ресурсы должны храниться в статической папке.

  • Поскольку мы создаем мобильное адаптивное приложение, поэтому заголовок тоже должен быть отзывчивым, мы используем компонент Ящик из Ant Design для отображения вертикального меню на экранах мобильных устройств.
  • Мы выделили стили в другом файле по адресу styles.js. Давайте посмотрим, как мы используем EmotionJS для создания адаптивной мобильной панели навигации.

Создадим наш компонент LeftMenu с помощью компонента Меню от Ant Design.

Таким же образом нам нужно создать компонент RightMenu .

Вы можете видеть, что компонент RightMenu использует свойство mode, чтобы решить, отображать ли вертикальное или горизонтальное меню. Мы создали наш CSS таким образом, чтобы Компонент Drawer будет виден только на мобильных устройствах, нам нужно отобразить вертикальное меню на мобильных устройствах, поэтому мы передаем значение свойства режима как вертикальное в RightMenu под компонентом Ящик .

Создайте компонент содержимого

Опять же, мы собираемся использовать композицию React для создания нашего компонента Content для визуализации содержимого страницы.

Создать компонент нижнего колонтитула

Давайте добавим компонент нижнего колонтитула к нашим компонентам макета, используя следующий код:

Этот компонент будет интегрирован с компонентом Контейнер для отображения сообщения внизу страницы.

Шаг 4: Создание домашней страницы

Наконец, мы закончили со всеми базовыми настройками, и наши компоненты макета ждут, чтобы их использовали.
Давайте объединим эти вещи и создадим нашу главную страницу pages / index.js.

Вы можете убедиться, что мы используем компонент Контейнер на верхнем уровне, чтобы обернуть все дочерние компоненты, и компонент Заголовок для отображения адаптивной мобильной навигационной панели для переходов между страницами.

Мы визуализируем пользовательский интерфейс баннера фильма в компоненте Контент и, наконец, используем компонент Нижний колонтитул в конце для отображения нижнего колонтитула.

В этом учебном посте мы узнали, как настроить Ant design и EmotionJS в проекте Next.js, мы также создали компоненты макета и использовали их. вместе, чтобы создать домашнюю страницу.

В следующем руководстве мы обсудим Redux, чтобы узнать, как создавать централизованное состояние приложения и управлять им с помощью архитектуры flux. Подпишитесь здесь и следите за обновлениями!

Хотя руководство полностью бесплатное и включает пошаговые инструкции по созданию приложения, оно не включает исходные таблицы стилей и некоторые другие подробные сведения о приложении. Вы можете получить всю базу кода приложения магазина фильмов (вместе с обновлениями и поддержкой в ​​течение следующих 6 месяцев) всего за 99 долларов (действует в течение ограниченного времени).