I denne opplæringen går vi gjennom
Slik lager du en app
ved hjelp av
Reagere
- Et JavaScript-bibliotek for å bygge brukergrensesnitt. Dette
Web Design Tool.
er spesielt nyttig når det gjelder komponentopprettelse, og gir betydelige fordeler over noe som jquery.
Evnen til å skape selvforsynte, gjenbrukbare komponenter betyr at du kan holde koden mindre og mer organisert. Hvis komponenter er satt opp godt nok, kan de slippes inn når det er nødvendig uten ekstra oppsett som kreves i det hele tatt.
I denne opplæringen skal vi lage et dashbordprogram som holder øye med viktige støttefordeler. Skjermen er delt opp i et rutenett, som kan tilpasses for å vise forskjellige visuelle, avhengig av dataene den trenger å vise.
Vil du lage et nettsted, i stedet for en app? Du trenger våre guider til det beste
Nettstedbygger
og
Web Hosting.
service.
19 Brilliant Jquery plugins
Ved å lage en generisk widgetkomponent, kan vi hogge og endre skjermen uten å påvirke noen av den underliggende koden. Innpakning av disse i en beholderkomponent lar oss styre kilden til dataene som er skilt fra skjermen.
Vi vil gjøre bruk av
CSS GRID
å vise innhold i definerte blokker. Nettlesere som ikke støtter den vil vises i en enkelt kolonne, som når du bruker en mindre skjerm.
Etter å ha fått prosjektfilene (og lagret dem i
skylagring
), Vi må trekke ned alle nødvendige pakkene vi trenger for prosjektet. Disse inkluderer filer fra 'Create-React-App', som omhandler byggeprosessen for oss.
Vi må også kjøre to servere - en som gir Hot Reloading for siden og en annen som gir noen falske data for å teste med.
Skriv inn følgende på kommandolinjen mens du er inne i prosjektkatalogen:
/ * i ett vindu * /
& gt; garn installere
& gt; garn start
/ * i et annet vindu * /
& gt; Garn serverer
02. Legg til den første widgeten
Start med en enkel komponent
For å starte ting av, vil vi gjøre en enkel komponent på siden. Med Babel satt opp, kan vi skrive komponenter ved hjelp av ES2015-klasser. Alt vi trenger å gjøre er å importere dem når vi trenger og Babel med WebPack vil gjøre resten.
Åpne opp
/src/components/app.js.
og legg til importen til toppen av siden. Deretter plasserer du komponenten i beholderen inne i beholderen i beholderen
& lt; div & gt;
.
Importer widget fra
'../components/widget';
[...]
& lt; div classname = "app" & gt;
& lt; widget / & gt;
& lt; / div & gt;
03. Stil en widget boks
Når du importerer CSS med webpack, kan stiler scoped til bare komponenten i spørsmålet for å unngå at de lekker til andre deler av siden
På dette prosjektet er WebPack satt opp for å hente CSS-import. Dette betyr at vi kan importere CSS-filer som vi gjorde med JavaScript i forrige trinn, som lar oss lage separate filer for hver komponent. Legg til følgende import til toppen av widget.js. Dette vil koble opp med "widget" klassen og vil omfatte stilene til den komponenten.
import '../styles/widget.css';
04. Legg til overskrift og innhold
Hver widget vil trenge en kort beskrivelse av hvilke data som vises. For å holde ting tilpasses, vil vi sende dette inn som en eiendom - eller "prop" - til komponenten når vi bruker den.
Når det gjelder innholdet, reagerer reagerer en spesiell "barnes proper, som vil inneholde innholdet som er angitt mellom en komponents åpning og lukkekoder.
Bytt plassholderen
& lt; p & gt;
i den gjengitte funksjonen med følgende. Lastekomponenten kommer til å spille senere.
Med CSS-rutenettspesifikasjonen vil layoutelementer som jenta bli anvendt, uavhengig av styling på barnelementer
I tillegg til stilarkene vi importerer, kan vi også skape reagensstiler dynamisk basert på rekvisitter passert gjennom.
For å spenne kolonner og rader med CSS-rutenett, bruk grid-kolonnen og grid-radegenskapene. Vi kan passere gjennom 'Colspan' og 'Rowpan' rekvisitter for å endre dette per komponent på en lignende måte å hvordan tabellceller fungerer i HTML.
Påfør stiler i widgetkonstruktøren og koble dem til beholderen
& lt; div & gt;
.
Hvis (Props.colspan! == 1) {
this.spanstyles.gridcolumn.
= `SPAN $ {PROPS.COLSPAN}`;
}
hvis (props.Rowspan! == 1) {
this.spanstyles.gridrow.
= `SPAN $ {PROPS.ROWSPAN}`;
}
[...]
& lt; div stil = {this.spanstyles}
klassenavn = "widget" & gt;
06. Tilførselsstandardrops
Akkurat nå er vår widget blank som vi ikke leverer noen rekvisitter ennå. I disse tilfellene kan vi levere standard rekvisitter til å bruke i stedet.
Med mindre annet er fortalt, vil CSS-gridene misligholde den minste enheten den kan, som i dette tilfellet er en 1x1-firkant. Like før vi eksporterer widgeten, leverer du noen standard rekvisitter til den effekten.
Nummerdisplay-komponenten er en "presentasjonell" -komponent, da den ikke har noen intern stat og stoler helt på rekvisitter passert til den
Komponenter kan gi hint om hvilken type verdier som skal sendes som rekvisitter. Mens du utvikler en applikasjon, vil eventuelle feilpassede rekvisitter vises i konsollen som advarsler for å unngå bugs lenger nedover linjen.
Bare under standard rekvisitter, definere hva rekvisitter bør eller må sendes inn, og hvilken type de burde være.
Ved å definere "barnes produkt som kreves, kan du merke nettleseren som klager den er udefinert. Mens dette ikke vil bryte appen, vil den fortsette å bugge oss til det er sortert.
Gå tilbake til app.js og legg til en overskriftsrop til widgeten vi opprettet tidligere. I stedet for å gjøre taggen selvlukkende, åpne den opp og legge til litt plassholderinnhold for å vise det fungerer.
& lt; widget heading = "Open Total Total" & GT;
& lt; p & gt; dette er noe innhold & lt; / p & gt;
& lt; / widget & gt;
09. Vis noen data
Vi kan bruke @Supports-syntaksen i CSS for å oppdage om nettleseren støtter nettleser eller ikke. Hvis ikke, er vi standard til single-column-visningen
Nummerdisplay-komponenten fungerer mye som widgeten vi nettopp har opprettet - det gjør litt tekst basert på rekvisitter vi passerer inn i den. Vi kan slippe den inn der vi trenger og ha en konsekvent visning av numeriske data.
Importer nummerdisplay-komponenten øverst og bruk den til å erstatte stedholderinnholdet du nettopp har lagt til i widgeten.
Importer nummerdisplay fra '../components/numberdisplay';
[...]
& lt; nummerdisplay max = {9} verdi = {5} / & gt;
10. Konverter til Numberwidget
For øyeblikket er det ganske mye kode som brukes til å vise noe som ikke vil endres over widgets. Vi kan lage en spesiell komponent for å inkapslere alt av det. På den måten trenger vi bare å importere Numberwidget.
Bytt ut widgeten og nummerdisplayimporten på toppen av App.js med Numberwidget. Pass på at du også erstatter dem i gjengivelsesmetoden.
Importer nummerwidget fra
'../components/numberwidget';
[...]
& lt; Numberwidget
Overskrift = "Open Ticket Total"
max = {9} verdi = {5} / & gt;
Neste side: Fullfør Dashboard-appen din i Reaging
1
2.
Nåværende side:
Lag en Dashboard-app i Reakt - Trinn 1-10
Neste side
Lag en Dashboard-app i Reakt - Trinn 11-21
Pixate lar deg raskt prototype interaktive mobile mockups som kan forhåndsvises på Android og iOS-enheter. I denne opplæringen skal vi bruke den til å bygge en flytende handlingsknapp (FA..
