Содержание
- 01. Загрузите зависимости.
- 02. Добавьте первый виджет.
- 03. Стиль окна виджета
- 04. Добавьте заголовок и содержание.
- 05. Разрешите виджету покрывать сетку.
- 06. Поставьте стандартные реквизиты.
- 07. Применяйте определенные реквизиты
- 08. Добавьте реквизит в приложение.
- 09. Показать некоторые данные
- 10. Преобразовать в NumberWidget
В этом руководстве мы рассмотрим, как создать приложение с помощью React - библиотеки JavaScript для создания пользовательских интерфейсов. Этот инструмент веб-дизайна особенно полезен при создании компонентов, предлагая значительные преимущества по сравнению с чем-то вроде jQuery.
Возможность создавать автономные, повторно используемые компоненты означает, что вы можете сделать код меньше по размеру и более организованным. Если компоненты настроены достаточно хорошо, они могут быть вставлены, где это необходимо, без каких-либо дополнительных настроек.
В этом руководстве мы создадим приложение для панели управления, которое отслеживает важные показатели поддержки. Экран разделен на сетку, которую можно настроить для отображения различных визуальных элементов в зависимости от данных, которые он должен отображать.
Хотите создать сайт, а не приложение? Вам нужны наши руководства по созданию лучшего конструктора веб-сайтов и веб-хостинга.
- 19 великолепных плагинов jQuery
Создав общий компонент виджета, мы можем вырезать и изменять отображение, не затрагивая какой-либо базовый код. Обертывание их в компоненте контейнера позволяет нам управлять источником этих данных отдельно от их отображения.
Мы будем использовать CSS Grid для отображения контента в определенных блоках. Браузеры, которые его не поддерживают, будут отображаться в одном столбце, как при использовании меньшего экрана.
Загрузите файлы для этого руководства здесь.
01. Загрузите зависимости.
После получения файлов проекта (и сохранения их в облачном хранилище) нам нужно загрузить все необходимые пакеты, необходимые для проекта. К ним относятся файлы из 'create-react-app', которое за нас занимается процессом сборки.
Нам также необходимо запустить два сервера - один, который обеспечивает горячую перезагрузку страницы, а другой предоставляет поддельные данные для тестирования.
Внутри каталога проекта введите в командной строке следующее:
/ * в одном окне * /> установка пряжи> начало пряжи / * в другом окне * /> подача пряжи
02. Добавьте первый виджет.
Для начала мы визуализируем простой компонент на странице. Установив Babel, мы можем писать компоненты, используя классы ES2015. Все, что нам нужно сделать, это импортировать их, когда нам нужно, а Babel с Webpack сделает все остальное.
Открыть /src/components/App.js и добавьте импорт вверху страницы. Затем внутри функции рендеринга поместите компонент в контейнер. div>.
импортировать виджет из ’../components/Widget’; […] Div className = "Приложение"> Виджет /> / div>
03. Стиль окна виджета
В этом проекте Webpack настроен на импорт CSS. Это означает, что мы можем импортировать файлы CSS, как мы это делали с JavaScript на предыдущем шаге, что позволяет нам создавать отдельные файлы для каждого компонента. Добавьте следующий импорт в начало Widget.js. Это свяжется с className ’Widget’ и применит стили к этому компоненту.
import ’../styles/Widget.css’;
04. Добавьте заголовок и содержание.
Для каждого виджета потребуется краткое описание того, какие данные он показывает. Чтобы сохранить возможность настройки, мы передадим это как свойство - или «опору» - компоненту, когда мы его используем.
Что касается контента, React предоставляет специальную дочернюю опору, которая будет содержать контент, введенный между открывающим и закрывающим тегами компонента.
Заменить заполнитель p> в функции рендеринга следующим образом. Компонент загрузки войдет в игру позже.
div className = "header"> h2> {this.props.heading} / h2> {this.props.loading? Загрузка />: ""} / div> div className = "content"> {this.props.children} / div>
05. Разрешите виджету покрывать сетку.
В дополнение к таблицам стилей, которые мы импортируем, мы также можем динамически создавать стили React на основе передаваемых свойств.
Чтобы охватить столбцы и строки с помощью CSS Grid, используйте свойства grid-column и grid-row. Мы можем передать свойства 'colspan' и 'rowspan', чтобы изменить их для каждого компонента аналогично тому, как ячейки таблицы работают в HTML.
Примените стили в конструкторе виджетов и свяжите их с контейнером div>.
если (props.colspan! == 1) {this.spanStyles.gridColumn = `span $ {props.colspan}`; } если (props.rowspan! == 1) {this.spanStyles.gridRow = `span $ {props.rowspan}`; } […] Div style = {this.spanStyles} className = "Виджет">
06. Поставьте стандартные реквизиты.
Прямо сейчас наш виджет пуст, так как мы еще не предоставляем никаких реквизитов. В этих случаях мы можем вместо этого использовать реквизиты по умолчанию.
Если не указано иное, CSS Grids по умолчанию будет занимать наименьшую возможную единицу, которая в данном случае является квадратом 1x1. Непосредственно перед тем, как мы экспортируем виджет, укажите для этого некоторые свойства по умолчанию.
Widget.defaultProps = {заголовок: «Виджет без названия», colspan: 1, rowspan: 1}
07. Применяйте определенные реквизиты
Компоненты могут давать подсказки относительно того, какие типы значений следует отправлять в качестве свойств. Во время разработки приложения любые неправильно переданные реквизиты будут отображаться в консоли как предупреждения, чтобы избежать ошибок в дальнейшем.
Сразу под реквизитами по умолчанию определите, какие реквизиты должны или должны быть переданы и какого типа они должны быть.
Widget.propTypes = {заголовок: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, дочерние элементы: React.PropTypes.element.isRequired}
08. Добавьте реквизит в приложение.
Определив свойство 'children' как требуется, вы можете заметить, что браузер жалуется, что в настоящее время он не определен. Хотя это не сломает приложение, оно будет нас беспокоить, пока оно не будет разобрано.
Вернитесь в App.js и добавьте заголовок к виджету, который мы создали ранее. Вместо того, чтобы делать тег самозакрывающимся, откройте его и добавьте содержимое-заполнитель, чтобы показать, что он работает.
Widget heading = "Open Ticket Total"> p> Это некоторый контент / p> / Widget>
09. Показать некоторые данные
Компонент NumberDisplay работает так же, как только что созданный виджет - он отображает некоторый текст исключительно на основе передаваемых в него свойств. Мы можем добавить его туда, где нам нужно, и получить единообразное отображение числовых данных.
Импортируйте компонент NumberDisplay вверху и используйте его для замены содержимого заполнителя, которое вы только что добавили в Widget.
импортировать NumberDisplay из ’../components/NumberDisplay’; […] NumberDisplay max = {9} значение = {5} />
10. Преобразовать в NumberWidget
На данный момент используется довольно много кода, чтобы показать то, что не будет меняться в разных виджетах. Мы можем сделать специальный компонент, чтобы все это инкапсулировать. Таким образом, нам нужно только импортировать NumberWidget.
Замените импорт Widget и NumberDisplay в верхней части App.js на NumberWidget. Не забудьте также заменить их в методе рендеринга.
импортировать NumberWidget из ’../components/NumberWidget’; […] NumberWidget heading = «Всего открытых тикетов» макс. = {9} значение = {5} />
Следующая страница: заполните приложение панели управления в React
