Hur man skapar en instrumentpanel med reagera

Sep 14, 2025
Hur

I den här handledningen går vi igenom Hur man skapar en app använder sig av Reagera - Ett JavaScript-bibliotek för att bygga användargränssnitt. Detta webbdesignverktyg Är speciellt användbart när det gäller komponentskapande, vilket ger betydande fördelar över något som jquery.

Möjligheten att skapa fristående, återanvändbara komponenter innebär att du kan hålla kod mindre och mer organiserad. Om komponenterna är tillräckligt bra, kan de tappas i om det behövs utan att det behövs ytterligare inställning.

I den här handledningen kommer vi att göra en instrumentpanelapplikation som håller ett öga på viktiga stödmått. Skärmen är uppdelad i ett rutnät, som kan anpassas för att visa olika visuella visuella beroende på de data som den behöver visa.

Vill du skapa en webbplats, snarare än en app? Du behöver våra guider till det bästa Website Builder och webbhotell service.

  • 19 briljanta jquery plugins

Genom att göra en generisk widgetkomponent kan vi hugga och ändra displayen utan att påverka någon av den underliggande koden. Omslagning Dessa i en behållarkomponent gör att vi kan styra källan till den data som är separat från dess display.

Vi kommer att använda oss Css galler för att visa innehåll i definierade block. Webbläsare som inte stöder den visas i en enda kolumn, mycket som när du använder en mindre skärm.

Ladda ner filerna för den här handledningen här .

01. Ladda ner beroenden

Efter att ha fått projektfilerna (och spara dem i molnlagring ), vi måste dra ner alla nödvändiga paket vi behöver för projektet. Dessa inkluderar filer från "Create-React-App", som behandlar byggprocessen för oss.

Vi måste också köra två servrar - en som ger varm omladdning för sidan och en annan som ger några falska data att testa med.

Ange följande på kommandoraden medan du är inuti projektkatalogen: 

 / * i ett fönster * /
& gt; garninstallation
& gt; garnstart
/ * i ett annat fönster * /
& gt; Garn tjäna

02. Lägg till den första widgeten

react dashboard app

Börja med en enkel komponent

För att starta saker, kommer vi att göra en enkel komponent på sidan. Med Babel Set Up kan vi skriva komponenter med ES2015-klasser. Allt vi behöver göra är att importera dem när vi behöver och Babel med webbhack kommer att göra resten.

Öppna /src/components/app.js och lägg till importen till början av sidan. Sedan placera komponenten inuti behållaren inuti renderfunktionen & lt; div & gt; . 

 Importera widget från
  '../components/widget';
[...]
& lt; div className = "app" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Stil en widget box

react dashboard app

När du importerar CSS med webbhack kan stilar scopas till bara den aktuella komponenten för att undvika att de läcker ut till andra delar av sidan

På det här projektet är WEBPACK inrättat för att hämta CSS-import. Det betyder att vi kan importera CSS-filer som vi gjorde med JavaScript i föregående steg, vilket gör det möjligt för oss att skapa separata filer för varje komponent. Lägg till följande import till toppen av widget.js. Detta kommer att länka upp med "widget" -klassnamnet och kommer att omfatta stilarna till den komponenten. 

 Import '../styles/widget.css' ;

04. Lägg till rubrik och innehåll

Varje widget behöver en kort beskrivning av vilka data det visar. För att hålla saker anpassningsbara, kommer vi att skicka detta i egenskap - eller "Prop" - till komponenten när vi använder den.

När det gäller innehållet, reagerar reaktion en speciell "barns prop, som innehåller innehållet som anges mellan en komponents öppnings- och stängningskoder.

Byt platshållaren & lt; P & GT; i renderfunktionen med följande. Lastkomponenten kommer att spela upp senare. 

 & lt; div className = "Header" & GT;
  & lt; H2 & GT; {This.Props.heading} & LT; / H2 & GT;
  {This.Props.loading? & lt; loading / & gt ;: ""}
& lt; / div & gt;
& lt; div className = "Innehåll" & GT;
  {This.Props.Children}
& lt; / div & gt;

05. Låt widgeten spänna av gallret

react dashboard app

Med CSS-gridspecifikationen kommer layoutelement som takrännor att tillämpas, oavsett vilken styling som tillämpas på barnelement

Förutom de stylesheets vi importerar kan vi också skapa reaktionsstilar dynamiskt baserat på rekvisita.

För att spänna kolumner och rader med CSS-rutnätet använd gitterkolonnen och nätet. Vi kan passera genom "Colspan" och "Rowspan" -program för att ändra detta per komponent på ett liknande sätt som tabellceller fungerar i HTML.

Applicera stilar i widgetkonstruktorn och länka dem till behållaren & lt; div & gt; . 

 Om (props.colspan! == 1) {
  this.spanstyles.gridcolumn
  = `span $ {props.colspan}`;
}
om (props.rowspan! == 1) {
  this.spanstyles.gridrow
  = `span $ {props.rowspan}`;
}
[...]
& lt; div stil = {this.spanstyles}
  ClassName = "Widget" & GT;

06. Leverera standardbesparingar

Just nu är vår widget tom eftersom vi inte levererar några rekvisita än. I dessa fall kan vi tillhandahålla standardprogram att använda istället.

Om inte annat sägs kommer CSS-nätna att vara standard för att ta upp den minsta enheten den, vilket i det här fallet är en 1x1-kvadrat. Strax innan vi exporterar widgeten, levererar du några standardprogram till den effekten. 

 widget.defaultProps = {
  Rubrik: "Namnlösa Widget",
  Colspan: 1,
  Rowspan: 1
}

07. Förbättra specifika rekvisita

react dashboard app

NummerDisplay-komponenten är en "presentation" -komponent, eftersom den inte har något internt tillstånd och är helt beroende av rekvisita

Komponenter kan ge tips om vilken typ av värden som ska skickas som PROPS. Samtidigt som man utvecklar en ansökan, kommer eventuella felaktigt passerade rekvisita att dyka upp i konsolen som varningar för att undvika buggar längre ner i linjen.

Bara under standardprogrammen, definiera vilka rekvisita eller behov som ska ges i, och vilken typ de ska vara. 

 widget.propertypes = {
  Rubrik: React.PropTypes.String,
  colspan: reagera.propertypes.number,
  Rowspan: reagera.propertypes.number,
  barn:
    Reaktion.propypes.element.isrequired
}

08. Lägg till rekvisita på appen

Genom att definiera "Barnens prop som krävs kan du märka att webbläsaren klagar den är för närvarande odefinierad. Även om det inte kommer att bryta appen, kommer den att fortsätta bugging oss tills den sorteras.

Gå tillbaka till app.js och lägg till en rubrik till den widget vi skapade tidigare. I stället för att göra taggen självstängning, öppna den och lägg till något platshållare innehåll för att visa att det fungerar. 

 & lt; widget rubrik = "Open Ticket Total" & GT;
  & lt; P & GT; Det här är något innehåll och lt; / P & GT;
& lt; / widget & gt;

09. Visa vissa data

react dashboard app

Vi kan använda @supports-syntaxen i CSS för att upptäcka om webbläsaren stöder rutnät. Om inte, standard för en-kolumnvyn

NummerDisplay-komponenten fungerar mycket som den widget som vi just skapade - det gör någon text baserad på rent på de rekvisita vi passerar in i den. Vi kan släppa det där vi behöver och har en konsekvent visning av numeriska data.

Importera numberDisplay-komponenten längst upp och använd den för att ersätta det innehållsinnehåll som du just har lagt till i widgeten. 

 Importera numberDisplay från '../components/NumberDisplay';
[...]
& lt; numberDisplay max = {9} värde = {5} / & gt;

10. Konvertera till NumberWidget

För närvarande finns det en hel del kod som används för att visa något som inte kommer att förändras över widgets. Vi kan göra en speciell komponent för att inkapsla allt. På det sättet behöver vi bara importera nummerwidget.

Byt ut widget och numberDisplay import på toppen av app.js med NumberWidget. Se till att du också ersätter dem i Render-metoden. 

 Importera nummerwidget från
  '../components/numberwidget';
[...]
& lt; numberwidget
  Rubrik = "Open Ticket Total"
max = {9} värde = {5} / & gt;

Nästa sida: Slutför din instrumentpanel i reagera

  • 1
  • 2

Nuvarande sida: Gör en instrumentpanel app i reagera - steg 1-10

Hur - Mest populära artiklar

22 Bästa UI-designverktyg

Hur Sep 14, 2025

(Bildkredit: Invion) Ett urval av de bästa UI-designverktygen hjälper till med nästan varje designprocess, och bö..

6 Snabba tips för att förbättra din penselpennritning

Hur Sep 14, 2025

(Bildkredit: Artem Solop) Jag har alltid strävat med att utveckla min personliga stil, en konstnärlig röst som tal..

En guide till Googles molnsyn

Hur Sep 14, 2025

Maskininlärning. Djup lärning. Naturlig språkbehandling. Datorsyn. Automatisering. Röstigenkänning. Du har nog hört alla de..

Skapa en animerad 3D-texteffekt

Hur Sep 14, 2025

Kärlek förlorad av Kanadas Jam3 Är en vackert mörk, mobil färdig interaktiv dikt med riktigt hjärta om de varaktiga..

Hur man simulerar explosioner i Maya

Hur Sep 14, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

Lägg till visuella signaler till din webbplats

Hur Sep 14, 2025

Det är irriterande för webbplatsanvändare att bara klicka på en länk för att finna att webbsidan inte är av intresse, slö..

Hur man blandar färgpennor

Hur Sep 14, 2025

Att lära sig att blanda färgpennor hjälper dig att få mer från dina verktyg. I stället för att förlita sig på individen, platt färg på varje penna, kan vi blanda dem tillsammans f�..

Skapa spel-färdiga texturer med hjälp av substansmålare

Hur Sep 14, 2025

Det senaste året har varit en spelväxlare för videospelindustrin och för oss konstnärer som har tur att tjäna sig från att..

Kategorier