Cum se creează o aplicație de bord cu reacția

Jan 20, 2026
să

În acest tutorial, vom trece prin Cum se creează o aplicație folosind. Reacţiona - o bibliotecă JavaScript pentru construirea interfețelor utilizatorilor. Acest Instrumentul de design web Este utilă în special atunci când vine vorba de crearea componentelor, oferind beneficii semnificative față de ceva de genul jQuery.

Abilitatea de a crea componente auto-limitate, reutilizabile înseamnă că puteți păstra codul mai mic și mai organizat. Dacă componentele sunt configurate suficient de bine, ele pot fi abandonate acolo unde este necesar, fără nici un set suplimentar necesar.

În acest tutorial, vom face o aplicație de bord care păstrează un ochi pe valori importante de suport. Ecranul este împărțit într-o rețea, care poate fi personalizată pentru a afișa vizuale diferite în funcție de datele pe care trebuie să le arate.

Doriți să creați un site, mai degrabă decât o aplicație? Aveți nevoie de ghidurile noastre la cele mai bune Builder de site-uri web și web hosting serviciu.

  • 19 pluginuri de jQuery strălucitoare

Făcând o componentă de widget generică, putem tăia și schimba afișajul fără a afecta niciunul din codul de bază. Înfășurarea acesteia într-o componentă a recipientului ne permite să controlăm sursa acestor date separate de afișajul acestuia.

Vom folosi Grid CSS. pentru a afișa conținutul în blocuri definite. Browserele care nu acceptă acest lucru vor fi afișate într-o singură coloană, la fel ca atunci când utilizați un ecran mai mic.

Descărcați fișierele pentru acest tutorial Aici .

01. Descărcați dependențele

După obținerea fișierelor de proiect (și salvarea acestora Stocare in cloud ), trebuie să tragem în jos toate pachetele necesare de care avem nevoie pentru proiect. Acestea includ fișiere din "Create-React-App", care se ocupă de procesul de construire pentru noi.

De asemenea, trebuie să rulați două servere - una care oferă reîncărcare la cald pentru pagină și altul care oferă unele date false pentru a testa cu.

Introduceți următoarele pe linia de comandă în interiorul directorului proiectului: 

 / * într-o fereastră * /
& gt; Fire install.
& gt; Fire Start.
/ * într-o altă fereastră * /
& gt; fire servi

02. Adăugați primul widget

react dashboard app

Începeți cu o componentă simplă

Pentru a începe lucrurile, vom face o componentă simplă pe pagină. Cu Babel înființat, putem scrie componente folosind clasele ES2015. Tot ce trebuie să facem este să le importăm când avem nevoie și Babel cu Webpack va face restul.

Deschide /src/components/app.js. și adăugați importul în partea de sus a paginii. Apoi, în interiorul funcției de redare, plasați componenta în interiorul recipientului & Lt; div & gt; . 

 Import widget de la
  "../components/widget ';
[...]
& lt; div clasaname = "aplicație" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Stil O cutie de widget

react dashboard app

Când importați CSS cu Webpack, stilurile pot fi instruiți doar la componenta în cauză pentru a le evita scurgerea în alte părți ale paginii

Pe acest proiect, Webpack este configurat pentru a ridica importurile CSS. Aceasta înseamnă că putem importa fișiere CSS cum am făcut cu JavaScript în pasul anterior, ceea ce ne permite să creăm fișiere separate pentru fiecare componentă. Adăugați următoarea import în partea de sus a widget.js. Acest lucru se va lega cu numele de clasă "Widget" și va avea loc stilurile la acea componentă. 

 import "../styles/widget.css' ;

04. Adăugați rubrică și conținut

Fiecare widget va avea nevoie de o scurtă descriere a datelor pe care le afișează. Pentru a păstra lucrurile personalizabile, vom trece acest lucru ca proprietate - sau "Prop" - la componenta atunci când îl folosim.

În ceea ce privește conținutul, reacționează furnizează o "propulsie de copii" specială, care va conține conținutul introdus între etichetele de deschidere și închidere ale componentelor.

Înlocuiți substituentul & P & Gt; în funcția de redare cu următoarele. Componenta de încărcare va intra mai târziu în joc. 

 & lt; div clasaName = "antet" & gt;
  & lt; h2 & gt; {the the.props.heading} & lt; / h2 & gt;
  {this.props.loading? & lt; loading / & gt;: ""}
& lt; / div & gt;
& lt; div CLASSNAME = "Conținut" & GT;
  {the.props.Children}
& lt; / div & gt;

05. Lăsați widgetul să acopere grila

react dashboard app

Cu specificația GRID CSS, vor fi aplicate elemente de aspect, cum ar fi jgheaburile, indiferent de orice stil aplicat elementelor copilului

În plus față de stilurile pe care le importăm, putem crea, de asemenea, stiluri reacționate dinamic pe baza elementelor de recuzită.

Pentru a spana coloanele și rândurile cu grilă CSS, folosiți proprietățile coloanei de rețea și grilei. Putem trece prin recuzită "Colspan" și "Rowspan" pentru a modifica acest lucru pe componentă într-un mod similar cu modul în care celulele de masă funcționează în HTML.

Aplicați stiluri în constructorul de widget și le conectați la recipient & Lt; div & gt; . 

 Dacă (Props.colspan! == 1) {
  thes.Spanstyles.gridcolumn.
  = `span {props.colspan}`;
}
dacă (props.rowspan! == 1) {
  thes.Spanstyles.gridrow.
  = `span $ {props.rowspan}`;
}
[...]
& Lt; div Stil = {the.spanstyles}
  CLASSNAME = "WIDGET" & GT;

06. Propune implicită de furnizare

Chiar acum widgetul nostru este necompletat, deoarece nu furnizăm încă recuzită. În aceste cazuri, putem furniza în schimb elemente de recuzită implicite.

Cu excepția cazului în care se spune altfel, grilele CSS vor fi implicite pentru a prelua cea mai mică unitate pe care o poate, care în acest caz este un pătrat 1x1. Chiar înainte de exportarea widgetului, furnizați câteva recuzită implicită în acest sens. 

 widget.defaultprops = {
  Rubrica: "Widget annamental",
  Colspan: 1,
  Rowspan: 1
}

07. Aplicați propunuri specifice

react dashboard app

Componenta numerdisplay este o componentă "prezentă", deoarece nu are nici o stare internă și se bazează în întregime pe recuzită la ea

Componentele pot oferi sugestii în ceea ce privește tipul de valori care ar trebui trimise ca recuzită. În timp ce elaborarea unei aplicații, orice recuzită incorect adoptată va apărea în consola ca avertismente pentru a ajuta la evitarea bug-urilor în continuare pe linie.

Doar sub recuzita implicită, definiți ce recuzită ar trebui sau trebuie să fie transmisă și ce tip ar trebui să fie. 

 widget.proptypes = {
  Reading: reaction.proptypes.string,
  Colspan: reaction.proptypes.number,
  Rowspan: reaction.proptypes.number,
  Copii:
    Reaction.proptypes.element.Ivrecționat
}

08. Adăugați recuzită la aplicație

Prin definirea propunerii "copiilor", conform cerințelor, puteți observa că browserul se plâng că este în prezent nedefinit. În timp ce acest lucru nu va rupe aplicația, va continua să ne bugging până când este sortat.

Înapoi la App.js și adăugați o poziție de poziție la widget pe care am creat-o mai devreme. În loc de a face eticheta de auto-închidere, deschideți-l și adăugați un conținut de substituent pentru a arăta că funcționează. 

 & lt; widget titlu = "Open Bilet Total" & GT;
  & lt; p & gt; acesta este un conținut și lt; / p & gt;
& lt; / widget & gt;

09. Afișați câteva date

react dashboard app

Putem folosi sintaxa @supports în CSS pentru a detecta dacă browserul acceptă sau nu layout-urile de rețea. Dacă nu, ne-am implicit în vizualizarea cu un singur coloană

Componenta numerdisplay funcționează la fel ca widget-ul pe care tocmai l-am creat - îi face pe un text bazat exclusiv pe recuzită pe care o trecem în ea. Putem renunța la locul în care avem nevoie și avem o afișare consistentă a datelor numerice.

Importați componenta numerdisplay în partea de sus și utilizați-o pentru a înlocui conținutul de substituent pe care tocmai l-ați adăugat în widget. 

 importați numberdisplay de la "../components/numberdisplay ';
[...]
& numberdisplay max = {9} valoare = {5} / & gt;

10. Conversia la numereWidget

În prezent, există destul de multe coduri folosite pentru a arăta ceva care nu se va schimba peste widget-uri. Putem face o componentă specială pentru a încapsula toate acestea. În acest fel, trebuie doar să importăm numere.

Înlocuiți importurile de widget și numberdisplay în partea de sus a aplicației cu numerele. Asigurați-vă că le înlocuiți și în metoda de redare. 

 Importați numere de la
  "../components/numberwidget ';
[...]
& lt; numereWidget
  Heading = "Open Bilet Total"
Max = {9} Valoare = {5} / & Gt;

Pagina următoare: Finalizați aplicația dvs. de bord în reacție

  • 1.
  • 2.

Pagina curenta: Efectuați o aplicație de bord în reacția - pașii 1-10

să - Cele mai populare articole

Foi de caractere pentru modelatori 3D: 15 sfaturi de top

să Jan 20, 2026

(Credit de imagine: Dahlia Khodur) Foi de caractere sunt ordinea zilei în acest tutorial, care acoperă modul de a c..

Cum se creează textul glitch și efectele imaginii în CSS

să Jan 20, 2026

În acest tutorial, vă vom arăta cum să creați un efect de text de glitch. Efectele speciale și animațiile pot ajuta site-urile să iasă în evidență, creând un impact imediat asupr..

Faceți aplicația dvs. de lucru offline cu lucrătorii de servicii

să Jan 20, 2026

Pagina 1 din 2: Pagina 1: Încărcarea mai rapidă Pagina 1: Încărcarea..

Designer de afinitate: Cum să utilizați Pixel Persona

să Jan 20, 2026

Affinity Designer este un instrument popular de editare a vectorilor pentru Mac, Windows și Acum iPad. . Aplicaț..

Nivelul VR Art

să Jan 20, 2026

Am început să folosesc Cinema 4D la câteva luni după ce am primit setul cu cască VR cu un an în urmă. Până atunci am fol..

Speed ​​sculpt o creatură în zbrush

să Jan 20, 2026

Când concepeți creaturi în Zbrush, prezentarea ideii dvs. ca o piesă de greoaie, nemulțumită 3D Art. poate f..

Ghidul final pentru compozitarea imaginilor în Photoshop

să Jan 20, 2026

Dintre toate proiectele Photoshop, compozitarea imaginilor într-un cadru fantastic este probabil cea mai plăcută și mai creat..

Geometria complexă de modelare: 5 sfaturi de top

să Jan 20, 2026

De-a lungul anilor mei de experiență, care lucrează în jocurile de studio și predarea jocurilor video 3D Art. ..

Categorii