Juhtpaneeli rakenduse loomine rakendusega React

Lehekülg 1/2: Juhtpaneeli rakenduse loomine rakenduses React - sammud 1–10

Selles õpetuses käime läbi kuidas rakendust luua kasutades Reageeri - JavaScripti teek kasutajaliideste loomiseks. See veebidisaini tööriist on eriti kasulik komponentide loomisel, pakkudes olulisi eeliseid jQuery sarnase ees.

Võimalus luua iseseisvaid ja korduvkasutatavaid komponente tähendab, et saate hoida koodi väiksema ja korrastatumana. Kui komponendid on piisavalt hästi seadistatud, saab need vajaduse korral sisse lasta ilma täiendava seadistamiseta.

Selles õpetuses teeme juhtpaneeli rakenduse, mis hoiab silma peal olulistel tugimõõdikutel. Ekraan on jaotatud ruudustikuks, mida saab kohandada erinevate visuaalide kuvamiseks sõltuvalt kuvatavatest andmetest.

Tehes üldise vidinakomponendi, saame hakkida ja muuta kuva, ilma et see mõjutaks ühtegi selle aluseks olevat koodi. Nende pakkimine konteinerkomponenti võimaldab meil kontrollida nende andmete allikat selle kuvamisest eraldi.

Me kasutame seda CSS Grid sisu kuvamiseks määratletud plokkides. Brauserid, mis seda ei toeta, kuvatakse ühes veerus, nagu väiksema ekraani kasutamisel.

Laadige selle õpetuse failid alla siin .

01. Laadige alla sõltuvused

Pärast projektifailide hankimist peame kõik projekti jaoks vajalikud paketid alla tõmbama. Nende hulka kuuluvad failid saidilt 'create-react-app', mis käsitleb meie jaoks koostamisprotsessi.

Samuti peame käima kaks serverit - üks, mis pakub lehe kiiret uuesti laadimist, ja teine, mis pakub testimiseks mõningaid võltsandmeid.

Projekti kataloogis olles sisestage käsurealt järgmine:

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

02. Lisage esimene vidin

armatuurlaua rakendus reageerida

Alustage lihtsa komponendiga

Alustuseks renderdame lehel lihtsa komponendi. Paabeli seadistamisega saame komponente kirjutada ES2015 klasside abil. Kõik, mida peame tegema, on need vajaduse korral importima ja ülejäänud osa teeb Babel koos Webpackiga.

Avama /src/components/App.js ja lisage import lehe ülaossa. Seejärel asetage renderdamisfunktsiooni sees komponent anumasse .

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

03. Stiilige vidinakast

armatuurlaua rakendus reageerida

Kui impordite WebS-iga CSS-i, saab stiilid ulatuda ainult kõnealuse komponendini, et vältida nende lekkimist lehe teistesse osadesse

Selle projekti jaoks on Webpack loodud CSS-i impordi kogumiseks. See tähendab, et saame importida CSS-faile nagu eelmises etapis JavaScripti abil, mis võimaldab meil luua iga komponendi jaoks eraldi failid. Lisage järgmine import Widget.js-i ülaossa. See ühendub 'Widget' className'iga ja hõlmab selle komponendi stiile.

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

04. Lisage pealkiri ja sisu

Iga vidin vajab lühikirjeldust selle kohta, milliseid andmeid see näitab. Asjade kohandatavuse tagamiseks edastame selle kasutamisel komponendile atribuudi või „rekvisiidi”.

Mis puutub sisusse, siis pakub React spetsiaalset „laste” rekvisiiti, mis sisaldab komponendi ava- ja sulgemissiltide vahele sisestatud sisu.

Asendage kohatäide

{this.props.heading}

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

05. Las vidin ulatub üle võrgu

armatuurlaua rakendus reageerida

CSS Gridi spetsifikatsiooniga rakendatakse paigutuselemente, näiteks vihmaveerenne, olenemata alamelementidele rakendatavast stiilist

Lisaks imporditavatele stiililehtedele saame läbitud rekvisiitide põhjal dünaamiliselt luua ka Reacti stiile.

Veergude ja ridade sirvimiseks CSS-võrguga kasutage ruudustiku-veeru ja ruudustiku-rea omadusi. Selle komponendi muutmiseks võime läbida 'colspan' ja 'rowspan' rekvisiidid sarnaselt sellele, kuidas tabelirakud HTML-is töötavad.

Rakendage stiilid vidina konstruktoris ja linkige need konteineriga .

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

06. Varustage vaikimisi rekvisiidid

Praegu on meie vidin tühi, kuna me ei paku veel ühtegi rekvisiiti. Nendel juhtudel saame selle asemel kasutada vaikimisi rekvisiite.

Kui pole öeldud teisiti, võtab CSS Grids vaikimisi kasutusele väikseima võimaliku üksuse, mis on antud juhul 1x1 ruut. Vahetult enne vidina eksportimist esitage selleks mõned vaikereklaamid.

Widget.defaultProps = { heading: 'Unnamed Widget', colspan: 1, rowspan: 1 }

07. Jõustada konkreetsed rekvisiidid

armatuurlaua rakendus reageerida

Komponent NumberDisplay on „esitlev” komponent, kuna sellel pole sisemist olekut ja see toetub täielikult talle edastatud rekvisiitidele

Komponendid võivad anda vihjeid selle kohta, millist tüüpi väärtusi tuleks rekvisiitidena saata. Rakenduse väljatöötamise ajal kuvatakse kõik valesti läbitud rekvisiidid konsoolis hoiatusena, mis aitab vältida vigu.

Vahetult vaikimisi rekvisiitide all määratlege, millised rekvisiidid peaksid olema või mida tuleb edasi anda ja mis tüüpi need peaksid olema.

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

08. Lisage rakendusse rekvisiidid

Defineerides „laste” rekvisiidi vastavalt vajadusele, võite märgata, et brauser kurdab, et see pole praegu määratletud. Kuigi see ei riku rakendust, lollitab ta meid seni, kuni see on sorteeritud.

Minge tagasi App.js-i ja lisage pealkirjapõhimõte varem loodud vidinale. Selle asemel, et muuta silt isesulguvaks, avage see ja lisage kohatäite sisu, et näidata, kas see töötab.

This is some content

09. Kuvage mõned andmed

armatuurlaua rakendus reageerida

Saame CSS-is kasutada süntaksit @supports, et tuvastada, kas brauser toetab võrgu paigutusi või mitte. Kui ei, siis vaikimisi kuvatakse ühe veeru vaade

Komponent NumberDisplay töötab sarnaselt äsja loodud vidinaga - see renderdab osa tekstist ainult nende rekvisiitide põhjal, mille me sinna anname. Saame selle paigutada sinna, kuhu vaja, ja kuvada arvandmeid järjepidevalt.

Importige ülaosas olev komponent NumberDisplay ja kasutage seda äsja vidinasse lisatud kohahoidja sisu asendamiseks.

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

10. Teisenda number-vidinaks

Praegu kasutatakse üsna palju koodi, et näidata midagi, mis vidinate lõikes ei muutu. Selle kõige kapseldamiseks saame teha spetsiaalse komponendi. Nii peame importima ainult NumberWidget.

Asendage rakenduse App.js ülaosas olev vidinate ja numbrite kuvamise import numbritega. Asendage need kindlasti ka renderdamismeetodis.

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

Järgmine leht: täitke juhtpaneeli rakendus rakenduses React

  • 1
  • kaks

Käesolev lehekülg: Juhtpaneeli rakenduse loomine rakenduses React - sammud 1–10

Järgmine leht Juhtpaneeli rakenduse loomine rakenduses React - sammud 11–21