Задаволены
- 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. Гэта будзе звязана з "Віджэтам" className і будзе ахопліваць стылі гэтага кампанента.
імпартаваць ’../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" і "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 = "Віджэт">
06. Пастаўка рэквізіту па змаўчанні
Зараз наш віджэт пусты, бо мы пакуль не пастаўляем рэквізіт. У гэтых выпадках мы можам паставіць рэквізіт па змаўчанні для выкарыстання.
Калі не сказана іншае, CSS Grids па змаўчанні займае найменшую адзінку, якую толькі можа, а гэта ў гэтым выпадку квадрат 1х1. Перад тым, як экспартаваць віджэт, пастаўце некалькі рэквізітаў па змаўчанні для гэтага.
Widget.defaultProps = {загаловак: "Безназоўны віджэт", colspan: 1, інтэрвал радкоў: 1}
07. Прымяненне канкрэтнага рэквізіту
Кампаненты могуць падказваць, які тып значэнняў трэба адпраўляць у якасці рэквізіту. Пры распрацоўцы прыкладання любы няправільна перададзены рэквізіт будзе адлюстроўвацца ў кансолі як папярэджанне, якое дазваляе пазбегнуць памылак далей.
Толькі пад рэквізітам па змаўчанні вызначце, які рэквізіт трэба альбо трэба перадаць, і які тып яны павінны быць.
Widget.propTypes = {загаловак: React.PropTypes.string, colspan: React.PropTypes.number, шэраг радкоў: React.PropTypes.number, дзеці: React.PropTypes.element.isRequired}
08. Дадайце рэквізіт у дадатак
Вызначыўшы рэквізіт "дзяцей" па меры неабходнасці, вы можаце заўважыць, што браўзэр скардзіцца, што ён у цяперашні час не вызначаны. Хоць гэта не разаб'е прыкладанне, яно будзе працягваць памыляць нас, пакуль не будзе адсартавана.
Вярніцеся да App.js і дадайце загаловак у віджэт, які мы стварылі раней. Замест таго, каб прымусіць тэг самазачыняцца, адкрыйце яго і дадайце змест запаўняльніка, каб паказаць, што ён працуе.
Загаловак віджэта = "Усяго адкрыты білет"> p> Гэта некаторы змест / p> / Widget>
09. Адлюстраванне некаторых дадзеных
Кампанент NumberDisplay працуе падобна на толькі што створаны віджэт - ён адлюстроўвае нейкі тэкст выключна на рэквізіце, які мы ў яго перадаем. Мы можам кінуць яго туды, куды нам трэба, і мець пастаяннае адлюстраванне лікавых дадзеных.
Імпартуйце кампанент NumberDisplay уверсе і выкарыстоўвайце яго для замены змесціва запаўняльніка, якое вы толькі што дадалі ў віджэт.
імпартаваць NumberDisplay з '../components/NumberDisplay'; […] NumberDisplay max = {9} значэнне = {5} />
10. Пераўтварыць у NumberWidget
На дадзены момант існуе даволі шмат кода, які выкарыстоўваецца, каб паказаць тое, што не зменіцца ў розных віджэтах. Мы можам зрабіць спецыяльны кампанент, каб уключыць усё гэта. Такім чынам, нам трэба толькі імпартаваць NumberWidget.
Заменіце імпарт віджэтаў і NumberDisplay уверсе App.js на NumberWidget. Пераканайцеся ў тым, каб таксама замяніць іх у метадзе візуалізацыі.
імпартаваць NumberWidget з '../components/NumberWidget'; […] Загаловак NumberWidget = "Усяго адкрыты білет" max = {9} значэнне = {5} />
Наступная старонка: Запоўніце прыкладанне прыборнай панэлі ў React
