Зміст
- 01. Завантажте залежності
- 02. Додайте перший віджет
- 03. Стиль коробки віджетів
- 04. Додайте заголовок та зміст
- 05. Нехай віджет охоплює сітку
- 06. Поставте реквізит за замовчуванням
- 07. Застосовуйте конкретні реквізити
- 08. Додайте реквізит до програми
- 09. Відобразіть деякі дані
- 10. Перетворити на NumberWidget
У цьому підручнику ми розглянемо, як створити програму за допомогою React - бібліотеки JavaScript для побудови користувальницьких інтерфейсів. Цей інструмент веб-дизайну особливо корисний, коли йдеться про створення компонентів, пропонуючи значні переваги перед чимось на зразок jQuery.
Можливість створювати автономні багаторазові компоненти означає, що ви можете тримати код меншим та більш організованим. Якщо компоненти налаштовані досить добре, їх можна запустити там, де це необхідно, взагалі без необхідності додаткового налаштування.
У цьому підручнику ми створимо програму на інформаційній панелі, яка стежить за важливими показниками підтримки. Екран розділений на сітку, яку можна налаштувати для відображення різних зображень залежно від даних, які йому потрібно показати.
Хочете створити сайт, а не додаток? Вам потрібні наші путівники по найкращому конструктору веб-сайтів та веб-хостингу.
- 19 чудових плагінів jQuery
Створюючи загальний компонент віджета, ми можемо рубати та змінювати дисплей, не впливаючи на будь-який базовий код. Загортання їх у компонент контейнера дозволяє нам контролювати джерело цих даних окремо від їх відображення.
Ми будемо використовувати CSS Grid для відображення вмісту у визначених блоках. Браузери, які його не підтримують, відображатимуться в одній колонці, подібно до того, як використовувати екран меншого розміру.
Завантажте файли для цього підручника тут.
01. Завантажте залежності
Після отримання файлів проекту (та збереження їх у хмарному сховищі) нам потрібно витягнути всі необхідні пакети, необхідні для проекту. Сюди входять файли з програми «create-response-app», яка стосується процесу збірки для нас.
Нам також потрібно запустити два сервери - один, який забезпечує гаряче перезавантаження сторінки, а інший - деякі підроблені дані для тестування.
Введіть у командному рядку наступне, перебуваючи всередині каталогу проекту:
/ * в одному вікні * /> встановлення пряжі> початок пряжі / * в іншому вікні * /> подача пряжі
02. Додайте перший віджет
Для початку ми зробимо простий компонент на сторінці. З налаштованим Babel ми можемо писати компоненти за допомогою класів ES2015. Все, що нам потрібно зробити, це імпортувати їх, коли нам це потрібно, а Babel з Webpack зробить все інше.
Відчини /src/components/App.js та додайте імпорт у верхню частину сторінки. Потім всередині функції візуалізації розмістіть компонент усередині контейнера div>.
імпортувати віджет з '../components/Widget'; […] Div className = "App"> Віджет /> / div>
03. Стиль коробки віджетів
У цьому проекті створено Webpack для отримання імпорту CSS. Це означає, що ми можемо імпортувати файли CSS, як це було зроблено з JavaScript на попередньому кроці, що дозволяє нам створювати окремі файли для кожного компонента. Додайте наступний імпорт у верхню частину Widget.js. Це зв’яжеться з ‘Widget’ className і охопить стилі до цього компонента.
імпортувати ’../styles/Widget.css’;
04. Додайте заголовок та зміст
Кожен віджет потребуватиме короткого опису даних, які він відображає. Щоб зробити речі настроюваними, ми передамо це як властивість - або „prop” - компоненту, коли ми його використовуємо.
Що стосується вмісту, 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» та «rowpan», щоб змінити це для кожного компонента подібно до того, як комірки таблиці працюють у HTML.
Застосуйте стилі в конструкторі віджетів і зв’яжіть їх із контейнером div>.
if (props.colspan! == 1) {this.spanStyles.gridColumn = `span $ {props.colspan}`; } if (props.rowspan! == 1) {this.spanStyles.gridRow = `span $ {props.rowspan}`; } […] Div style = {this.spanStyles} className = "Widget">
06. Поставте реквізит за замовчуванням
Зараз наш віджет порожній, оскільки ми ще не надаємо жодного реквізиту. У цих випадках ми можемо надати за замовчуванням реквізит для використання.
Якщо не сказано інше, CSS Grids за замовчуванням забирає найменшу одиницю, яку тільки може, а це в цьому випадку квадрат 1х1. Безпосередньо перед тим, як експортувати віджет, надайте кілька реквізитів за замовчуванням для цього.
Widget.defaultProps = {заголовок: "Безіменний віджет", colspan: 1, розмах рядків: 1}
07. Застосовуйте конкретні реквізити
Компоненти можуть надавати підказки щодо того, який тип значень слід надсилати як реквізит. Під час розробки програми будь-який неправильно переданий реквізит відображатиметься в консолі як попередження, щоб уникнути помилок далі.
Просто під реквізитом за замовчуванням визначте, який реквізит потрібно або потрібно передавати, і якого типу вони повинні бути.
Widget.propTypes = {заголовок: React.PropTypes.string, colspan: React.PropTypes.number, rowpan: React.PropTypes.number, діти: React.PropTypes.element.isRequired}
08. Додайте реквізит до програми
Визначивши потрібний реквізит «діти», ви можете помітити, що браузер скаржиться, що він наразі не визначений. Незважаючи на те, що це не призведе до поломки додатка, воно буде продовжувати змушувати нас, поки не буде відсортовано.
Поверніться до App.js і додайте опис заголовка у віджет, який ми створили раніше. Замість того, щоб робити тег самозакриваючим, відкрийте його та додайте трохи заповнювача, щоб показати, що він працює.
Заголовок віджета = "Загальна кількість відкритих квитків"> p> Це деякий вміст / p> / Widget>
09. Відобразіть деякі дані
Компонент NumberDisplay працює подібно до віджету, який ми щойно створили, - він відображає деякий текст на основі лише реквізиту, який ми в нього передаємо. Ми можемо кинути його туди, де нам потрібно, і мати послідовне відображення числових даних.
Імпортуйте компонент NumberDisplay у верхній частині та використовуйте його для заміни вмісту заповнювача, який ви щойно додали у віджет.
імпортувати NumberDisplay з '../components/NumberDisplay'; […] NumberDisplay max = {9} value = {5} />
10. Перетворити на NumberWidget
На даний момент існує досить багато коду, який використовується, щоб показати щось, що не зміниться у віджетах. Ми можемо виготовити спеціальний компонент, щоб інкапсулювати його все. Таким чином нам потрібно лише імпортувати NumberWidget.
Замініть імпорт віджетів та NumberDisplay у верхній частині App.js на NumberWidget. Не забудьте також замінити їх у методі візуалізації.
імпортувати NumberWidget з '../components/NumberWidget'; […] Заголовок NumberWidget = "Загальна кількість відкритих квитків" max = {9} value = {5} />
Наступна сторінка: Заповніть програму інформаційної панелі в React
