Как да създадете приложение за табло с React

Страница 1 от 2: Направете приложение за табло в React - стъпки 1-10

В този урок ще разгледаме как да създадете приложение използвайки Реагирайте - JavaScript библиотека за изграждане на потребителски интерфейси. Това инструмент за уеб дизайн е особено полезен, когато става въпрос за създаване на компоненти, предлагайки значителни предимства пред нещо като jQuery.

Възможността да създавате самостоятелни компоненти за многократна употреба означава, че можете да поддържате кода по-малък и по-организиран. Ако компонентите са настроени достатъчно добре, те могат да бъдат пуснати там, където е необходимо, без изобщо да се изисква допълнителна настройка.



В този урок ще направим приложение за табло, което следи важни показатели за поддръжка. Екранът е разделен на мрежа, която може да бъде персонализирана, за да показва различни визуални ефекти в зависимост от данните, които трябва да покаже.



Чрез създаването на общ компонент на джаджа можем да нарязваме и променяме дисплея, без да засягаме кой да е от основните кодове. Опаковането им в компонент на контейнер ни позволява да контролираме източника на тези данни отделно от тяхното показване.

Ще се възползваме от CSS мрежа за показване на съдържание в определени блокове. Браузърите, които не го поддържат, ще се показват в една колона, подобно на това, когато използвате по-малък екран.



как се правят преходи в след ефекти

Изтеглете файловете за този урок тук .

01. Изтеглете зависимостите

След като получим файловете на проекта, трябва да изтеглим всички необходими пакети, които са ни необходими за проекта. Те включват файлове от „create-response-app“, който се занимава с процеса на изграждане за нас.

Също така трябва да стартираме два сървъра - един, който осигурява горещо презареждане на страницата, и друг, който предоставя някои фалшиви данни за тестване.



Въведете следното в командния ред, докато сте в директорията на проекта:

/* in one window */ > yarn install > yarn start /* in another window */ > yarn serve

02. Добавете първата джаджа

приложението на таблото за реакция

Започнете с прост компонент

За да започнем нещата, ще изобразим прост компонент на страницата. С настройката на Babel можем да пишем компоненти, като използваме класове ES2015. Всичко, което трябва да направим, е да ги импортираме, когато имаме нужда, а Babel с Webpack ще свърши останалото.

Отвори /src/components/App.js и добавете импортирането в горната част на страницата. След това, във функцията за рендиране, поставете компонента вътре в контейнера .

import Widget from '../components/Widget'; […]

03. Оформете кутия с джаджи

приложението на таблото за реакция

Когато импортирате CSS с Webpack, стиловете могат да бъдат обхванати само до въпросния компонент, за да се избегне изтичането им в други части на страницата

В този проект е създаден Webpack, за да вземе CSS импортиране. Това означава, че можем да импортираме CSS файлове, както направихме с JavaScript в предишната стъпка, което ни позволява да създаваме отделни файлове за всеки компонент. Добавете следния импорт в горната част на Widget.js. Това ще се свърже с 'Widget' className и ще обхване стиловете към този компонент.

import '../styles/Widget.css';

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

Всяка джаджа ще се нуждае от кратко описание на данните, които показва. За да запазим нещата персонализируеми, ще го предадем като свойство - или „опора“ - на компонента, когато го използваме.

Що се отнася до съдържанието, React предоставя специален 'детски' проп, който ще съдържа съдържанието, въведено между отварящите и затварящите маркери на компонента.

Сменете заместителя

{this.props.heading}

{this.props.loading ? :''} {this.props.children}

05. Нека джаджата обхване мрежата

приложението на таблото за реакция

Със спецификацията на CSS Grid ще бъдат приложени елементи на оформление като улуци, независимо от стила, приложен към дъщерни елементи

В допълнение към таблиците със стилове, които импортираме, можем също така да създаваме React стилове динамично въз основа на подадените реквизити.

За да обхванете колони и редове с CSS Grid, използвайте свойствата grid-column и grid-row. Можем да преминем през 'colspan' и 'rowpan' подпори, за да променим това за всеки компонент по начин, подобен на начина, по който клетките на таблицата работят в HTML.

Приложете стилове в конструктора на приспособления и ги свържете към контейнера .

if (props.colspan !== 1) { this.spanStyles.gridColumn = `span ${props.colspan}`; } if (props.rowspan !== 1) { this.spanStyles.gridRow = `span ${props.rowspan}`; } […]

06. Доставка по подразбиране

В момента нашата джаджа е празна, тъй като все още не предлагаме никакви реквизити. В тези случаи можем да предоставим реквизит по подразбиране, който да използваме вместо това.

Освен ако не е казано друго, CSS гридите по подразбиране ще заемат най-малката единица, която може, което в този случай е квадрат 1х1. Точно преди да експортираме приспособлението, предоставете някои реквизити по подразбиране за това.

как да направите ивици в
Widget.defaultProps = { heading: 'Unnamed Widget', colspan: 1, rowspan: 1 }

07. Прилагайте конкретни подпори

приложението на таблото за реакция

каква камера използват професионалистите
Компонентът NumberDisplay е „презентационен“ компонент, тъй като няма вътрешно състояние и разчита изцяло на реквизита, предаден му

Компонентите могат да предоставят подсказки какъв тип стойности трябва да се изпращат като подпори. Докато разработвате приложение, всички неправилно предадени реквизити ще се показват в конзолата като предупреждения, за да се избегнат грешки по-надолу по линията.

Точно под реквизитите по подразбиране дефинирайте какви реквизити трябва или трябва да бъдат предадени и какъв тип трябва да бъдат.

Widget.propTypes = { heading: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, children: React.PropTypes.element.isRequired }

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

Чрез дефиниране на „детски“ проп, както се изисква, може да забележите, че браузърът се оплаква, че в момента е недефиниран. Въпреки че това няма да повреди приложението, то ще продължи да ни подслушва, докато не бъде сортирано.

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

This is some content

09. Показване на някои данни

приложението на таблото за реакция

Можем да използваме синтаксиса @supports в CSS, за да открием дали браузърът поддържа мрежови оформления или не. Ако не, ние по подразбиране използваме изглед с една колона

Компонентът NumberDisplay работи подобно на приспособлението, което току-що създадохме - изобразява някакъв текст, базиран чисто на реквизита, който предаваме в него. Можем да го пуснем там, където трябва, и да имаме последователно показване на цифрови данни.

Импортирайте компонента NumberDisplay в горната част и го използвайте, за да замените съдържанието на заместител, което току-що добавихте в Widget.

import NumberDisplay from '../components/NumberDisplay'; […]

10. Конвертиране в NumberWidget

В момента има доста код, използван за показване на нещо, което няма да се промени в джаджи. Можем да направим специален компонент, който да капсулира всичко това. По този начин трябва само да импортираме NumberWidget.

Заменете импортираните джаджи и NumberDisplay в горната част на App.js с NumberWidget. Не забравяйте да ги замените и в метода на рендиране.

import NumberWidget from '../components/NumberWidget'; […]

Следваща страница: Попълнете приложението си за табло в React

  • 1
  • две

Текуща страница: Направете приложение за табло в React - стъпки 1-10

Следваща страница Направете приложение за табло в React - стъпки 11-21