Как создать приложение приборной панели с реакцией

Sep 14, 2025
Инструкции

В этом руководстве мы пройдем Как создать приложение с помощью Реагировать - библиотека JavaScript для построения пользовательских интерфейсов. Этот Инструмент веб-дизайна Особенно полезно, когда дело доходит до создания компонентов, предлагая значительные преимущества по поводу чего-то вроде jQuery.

Способность создавать автономные, многоразовые компоненты означает, что вы можете сохранить код меньше и более организован. Если компоненты установлены достаточно хорошо, они могут быть удалены там, где это необходимо без необходимости дополнительной настройки.

В этом уроке мы сделаем приложение приборной панели, которое следит за важной метрикми поддержки. Экран разделен в сетку, что можно настроить, чтобы показать различные визуальные эффекты в зависимости от данных, которые необходимо показывать.

Хотите создать сайт, а не приложение? Вам нужны наши руководства в лучшем Строитель сайта и веб хостинг служба.

  • 19 блестящие плагины JQuery

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

Мы будем использовать CSS Grid Для отображения содержимого в определенных блоках. Браузеры, которые не поддерживают его, будут отображаться в одном столбце, как при использовании меньшего экрана.

Скачать файлы для этого руководства здесь Отказ

01. Скачать зависимости

После получения файлов проекта (и сохранение их в облачное хранилище ), нам нужно потянуть все необходимые пакеты, которые нам нужны для проекта. К ним относятся файлы из «Create-React-App», что касается процесса сборки для нас.

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

Введите следующее в командной строке, пока внутри каталога проекта: 

 / * в одном окне * /
и GT; Установка пряжи
и GT; Запуск пряжи
/ * В другом окне * /
и GT; пряжа служит

02. Добавьте первый виджет

react dashboard app

Начните с простого компонента

Чтобы начать вещи выключения, мы сделаем простой компонент на странице. С настройкой Babel мы можем написать компоненты с использованием классов ES2015. Все, что нам нужно сделать, это импортировать их, когда нам нужно и Babel с WebPack сделает все остальное.

Открыть /src/components/app.js. и добавьте импорт в верхнюю часть страницы. Затем внутри функции рендеринга поместите компонент внутри контейнера & lt; div & gt; Отказ 

 Импорт виджет из
  '../components/widget';
[...]
& lt; classname = "приложение" и GT;
  & lt; виджет / & gt;
& lt; / div & gt;

03. Стиль ящик виджета

react dashboard app

При импорте CSS с помощью WebPack стилей может быть определен только на вопрос, чтобы избежать их утечки к другим частям страницы

В этом проекте WebPack настроен для получения импорта CSS. Это означает, что мы можем импортировать файлы CSS, такие как мы сделали с JavaScript на предыдущем шаге, что позволяет нам создавать отдельные файлы для каждого компонента. Добавьте следующий импорт в верхнюю часть Widget.js. Это свяжется с «классным знаком» и будет обладать стилями к этому компоненту. 

 Импорт »../styles/widget.css' ;

04. Добавить заголовок и содержание

Каждый виджет понадобится краткое описание того, какие данные отображаются. Чтобы сохранить вещи настраиваемыми, мы передадим это как свойство - или «опоры» - к компоненту, когда мы его используем.

Что касается содержания, реагирование поставляет специальные «детские опоры, которые будут содержать контент, введенный между открытыми и закрывающими тегами компонента.

Заменить заполнитель & lt; P & GT; в функции рендеринга со следующим. Компонент загрузки придет в игру позже. 

 & lt; headname = "Header" & gt;
  & lt; h2 & gt; {this.proops.heading} & lt; / h2 & gt;
  {Это.props.ploading? & lt; loading / & gt; ""}
& lt; / div & gt;
& lt; classname = "Содержание" и GT;
  {this.props.children}
& lt; / div & gt;

05. Пусть виджет проречивается сеткой

react dashboard app

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

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

Для промежутков столбцов и строк с помощью CSS Grid используйте сетевую колонку и свойства сетевого ряда. Мы можем пройти через реквизиты «Colspan» и «ROASPAN», чтобы изменить это на компонент аналогичным образом, к тому, как радуются таблицы клетки в HTML.

Примените стили в конструкторе виджета и связывают их в контейнер & lt; div & gt; Отказ 

 Если (ropps.colspan! == 1) {
  Это .spanstyles.gridColumn.
  = `Span $ {ropps.colspan}`;
}
Если (roppssrowspan! == 1) {
  Это .spanstyles.gridrow.
  = `SPAR $ {rops.rowspan}`;
}
[...]
& lt; стиль div = {this.spanstyles}
  ClassName = "виджет" & gt;

06. Поставлять реквизиты по умолчанию

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

Если не сказано иное, CSS Grids по умолчанию по умолчанию займет наименьшее подразделение, которая может, которая в этом случае является квадратом 1x1. Незадолго до того, как мы экспортируем виджет, поставьте некоторые реквизиты по умолчанию в этот эффект. 

 Widget.DefaultProps = {
  Рубрика: «Безмятежный виджет»,
  Colspan: 1,
  rofspan: 1.
}

07. Обеспечить определенные реквизиты

react dashboard app

Компонент NUMBLEDISPLAY представляет собой «презентационный» компонент, так как он не имеет внутреннего состояния, и полностью полагается на реквизиты, переданные ему

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

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

 Widget.PropTypes = {
  Руководство: ract.proptypes.string,
  Colspan: Rect.PropTypes.Number,
  Rowspan: Rect.PropTypes.Number,
  дети:
    Rect.PropTypes.Element.isrequired.
}

08. Добавьте реквизит в приложение

Определив «дети» по мере необходимости, вы можете заметить, что браузер, жалующийся в настоящее время не определен. Хотя это не сломает приложение, он будет продолжать нас, пока оно не отсортировано.

Вернитесь снова к App.js и добавьте заголовок в виде виджета, который мы создали ранее. Вместо того, чтобы сделать тег самозащиты, откройте его и добавьте некоторые содержимое заполнителя, чтобы показать, что он работает. 

 & lt; заголовок виджета = "Открытый билет" и GT;
  & lt; P & GT; это какой-то контент и LT; / P & GT;
& lt; / widget & gt;

09. Показать некоторые данные

react dashboard app

Мы можем использовать синтаксис @supports в CSS для обнаружения того, поддерживает ли браузер, поддерживает макеты сетки. Если нет, у нас по умолчанию на однопологовое представление

Компонент NUMBLEDISPLAY работает очень похоже на виджет, который мы только что создали, - оно делает какой-то текст, основанный исключительно на реквизитах, которые мы передаем в него. Мы можем бросить его там, где нам нужно и иметь последовательное отображение численных данных.

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

 Import NumberDisplay из '../Components/numberdisplay';
[...]
& lt; numberdisplay max = {9} значение = {5} / & gt;

10. Преобразовать в NumberWidget

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

Замените виджет и импорт NumberDisplay в верхней части app.js с nowwidget. Убедитесь, что также замените их в метод рендера. 

 Import NumberWidget от
  '../components/numberwidget';
[...]
& lt; numberwidget
  заголовок = "Открытый билет"
max = {9} значение = {5} / & gt;

Следующая страница: Заполните приложение для приборной панели в React

  • 1.
  • 2.

Текущая страница: Сделайте приложение приборной панели в реакции - шаги 1-10

Инструкции - Самые популярные статьи

Учебное пособие в СМИ: Как акварель над цифровым искусством

Инструкции Sep 14, 2025

(Кредит на изображение: Naomi Vandoren) Как независимый художник, мне н�..

Используйте отрицательное пространство, чтобы рисовать лучшие руки

Инструкции Sep 14, 2025

Даже, казалось бы, сложный процесс, такой как рисунок рукой, может быть ..

Step-by-step: How to mimic oil paint in Corel Painter

Инструкции Sep 14, 2025

Только ощущается только вчера, когда я играл роль с друзьями в старших классах в фантазиях мира, полных р..

Сделайте анимацию автомобиля с ICLONE 7

Инструкции Sep 14, 2025

Создание анимации или 3D фильмы Вовлечение автомобилей с колес..

Используйте WordPress как безголовый CMS

Инструкции Sep 14, 2025

Сначала я слышал о беговых подходе CMS в разговоре, я смотрел из города Т..

Создать отзывчивый макет с CSS Grid

Инструкции Sep 14, 2025

Макет сетки CSS Растет в поддержке браузера каждый день, и мы може..

Как создать удивительные эффекты с фигурами CSS

Инструкции Sep 14, 2025

Разработчики Frontend, как правило, думают в прямоугольниках; Прямоугольн�..

Как сделать свой веб-сайт WordPress Multingual

Инструкции Sep 14, 2025

На 10 лучших языках, используемых в Интернете, английский Ранчает п..

Категории