Jak utworzyć aplikację do pulpitu nawigacyjnego z reakcją

Feb 2, 2026
Jak

W tym samouczku przejdziemy Jak utworzyć aplikację za pomocą Reagować - Biblioteka JavaScript do budowy interfejsów użytkownika. To Narzędzie do projektowania stron internetowych. Jest szczególnie przydatny, jeśli chodzi o tworzenie komponentów, oferując znaczące korzyści nad czymś w rodzaju jQuery.

Zdolność do tworzenia samodzielnych, składowych wielokrotnego użytku oznacza, że ​​możesz zachować mniejszy i bardziej zorganizowany kod. Jeśli komponenty są ustawione wystarczająco dobrze, można je upuścić w razie potrzeby bez dodatkowej konfiguracji w ogóle.

W tym samouczku będziemy tworzyć aplikację do pulpitu nawigacyjnego, która utrzymuje oko na ważne metryki wsparcia. Ekran jest podzielony w siatkę, która może być dostosowana do pokazania różnych wizualizacji w zależności od danych, które musi pokazać.

Chcesz stworzyć witrynę, a nie aplikacji? Potrzebujesz naszych przewodników najlepiej Kreator strony internetowej i hosting usługa.

  • 19 genialnych wtyczek jquery

Produkując ogólny komponent widżetu, możemy posiekać i zmienić wyświetlacz bez wpływu na którykolwiek z kodu podstawowego. Zawijanie tych w komponencie pojemnikowym pozwala nam kontrolować źródło tych danych oddzielonych od jego wyświetlacza.

Wykorzystamy Siatka CSS. Aby wyświetlić zawartość w określonych blokach. Przeglądarki, które nie obsługują, wyświetli się w jednej kolumnie, podobnie jak przy użyciu mniejszego ekranu.

Pobierz pliki dla tego samouczka tutaj .

01. Pobierz zależności

Po uzyskaniu plików projektu (i oszczędzania ich magazyn w chmurze ) Musimy ciągnąć wszystkie wymagane pakiety, których potrzebujemy do projektu. Obejmują one pliki z "Create-React-APP", która dotyczy dla nas procesu budowania.

Musimy również uruchomić dwa serwery - jeden, który zapewnia gorące przeładowanie strony, a inny, który zapewnia pewne fałszywe dane do testowania.

Wprowadź następujące informacje w wierszu poleceń, podczas gdy w katalogu projektu: 

 / * w jednym oknie * /
& gt; Instalacja przędzy.
& gt; początek przędzy.
/ * w innym oknie * /
& gt; Przędza podawać

02. Dodaj pierwszy widget

react dashboard app

Zacznij od prostego składnika

Aby rozpocząć rzeczy, uczynimy prosty komponent na stronie. Z konfiguracją Babel możemy pisać komponenty za pomocą klas ES2015. Wszystko, co musimy zrobić, to importować je, gdy potrzebujemy i Babel z webpack zrobi resztę.

Otworzyć /src/components/app.js. i dodaj import na górę strony. Następnie wewnątrz funkcji renderowania umieść komponent wewnątrz pojemnika & lt; div & gt; . 

 Importuj widget z
  "../components/widget ';
[...]
& lt; div classname = "app" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Styl A Widget Box

react dashboard app

Podczas importowania CSS ze WebPack style mogą być zaskoczone tylko do danego komponentu, aby uniknąć ich wycieków do innych części strony

W tym projekcie WebPack jest ustawiony, aby odebrać import CSS. Oznacza to, że możemy importować pliki CSS, takie jak zrobiliśmy z JavaScript w poprzednim kroku, co pozwala nam tworzyć oddzielne pliki dla każdego komponentu. Dodaj następujący import do górnej części widget.js. Spowoduje to połączenie z nazwę klasy "widget" i będzie zasięgnąć stylów do tego składnika. 

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

04. Dodaj nagłówki i treści

Każdy widget będzie potrzebował krótkiego opisu, jakie dane są wyświetlane. Aby utrudniać sprawy, przekazujemy to jako nieruchomość - lub "prop" - do komponentu, gdy go używamy.

Jeśli chodzi o treść, reaguj zareagować specjalne "rekwizyty dziecięce", które będą zawierać zawartość wprowadzoną między tagami otwierającymi i zamykającymi komponent.

Wymień symbol zastępczy & lt; p & gt; w funkcji renderowania z następującymi. Komponent ładowania wejdzie do gry później. 

 DivNameName = "Header" & GT;
  & lt; H2 & GT; {this.props.heading} & LT; / H2 & GT;
  {to.props.loading? & loading / & gt ;: ""}
& lt; / div & gt;
& lt; div classname = "treść" & gt;
  {to.props.children}
& lt; / div & gt;

05. Niech widget obejmuje siatkę

react dashboard app

Z specyfikacją sieci CSS, elementy układu takie jak rynny będą stosowane, niezależnie od dowolnej stylizacji zastosowanej do elementów dziecka

Oprócz arkuszy stylów importujemy, możemy również tworzyć style reagowania dynamicznie w oparciu o przesłanie rekwizytów.

Aby rozłączyć kolumny i wiersze z siatką CSS, użyj właściwości kolumny siatki i rzędów siatki. Możemy przejść przez rekwizyty "Colspan" i "RowsPlan", aby zmienić to na komponent w podobny sposób jak komórki stołowe działają w HTML.

Zastosuj style w konstruktorze widgetu i połącz je do pojemnika & lt; div & gt; . 

 IF (props.colspan! == 1) {
  to.spanstyles.gridcolumn.
  = `Span $ {Props.Colspan}`;
}
Jeśli (propesPlan! == 1) {
  to.spanstyles.gridrow.
  = `Span $ {props.Rowspan}`;
}
[...]
& lt; style div = {to.spanstyles}
  KlassName = "Widget" & GT;

06. Dostawa domyślnych rekwizytów

W tej chwili nasz widget jest pusty, ponieważ nie dostarczamy jeszcze żadnych rekwizytów. W takich przypadkach możemy dostarczyć domyślne rekwizyty do użycia.

Chyba powiedziano inaczej, siatki CSS zostaną domyślne, aby podjąć najmniejszą jednostkę, którą może, co w tym przypadku jest kwadratowy 1x1. Tuż przed eksportem widgetu dostarczamy niektóre domyślne rekwizyty w tym celu. 

 Widget.defaultProps = {
  Kierunek: "Widget nienazwany",
  Colspan: 1,
  RowsPlan: 1.
}

07. Egzekwowanie konkretnych rekwizytów

react dashboard app

Komponent NumberDisplay jest komponentem "prezentacyjnym", ponieważ nie ma stanu wewnętrznego i opiera się całkowicie na rekwizytach

Komponenty mogą dostarczyć wskazówki dotyczące tego, jaki rodzaj wartości powinny być wysyłane jako rekwizyty. Podczas opracowywania aplikacji każde nieprawidłowo przekazane rekwizyty pojawi się w konsoli jako ostrzeżenia, aby uniknąć błędów dalej w dół linii.

Tuż pod domyślnymi rekwizytami zdefiniuj, w jakich rekwizyt powinny lub muszą być przekazane, a jakie powinny być typ. 

 widget.proptypes = {
  Kierunek: react.proptypes.String,
  Colspan: React.Proptypes.Number,
  RowsPlan: react.proptypes.Number,
  dzieci:
    Reagować.proptypes.Element.isrequired.
}

08. Dodaj rekwizyty do aplikacji

Określając podpórkę "dzieci" zgodnie z wymaganiami, możesz zauważyć, że przeglądarka narzekająca jest obecnie niezdefiniowana. Chociaż nie będzie to złamać aplikacji, będzie nam przeszkadza, dopóki nie zostanie posortowany.

Wróć do app.js i dodaj rekwizycję nagłówku do widgetu, które stworzyliśmy wcześniej. Zamiast robić samozadowolenie znacznika, otwórz go i dodaj małą treścią zastępczą, aby pokazać, że działa. 

 Widget Heading = "Otwórz bilet całkowitą" & GT;
  & LT; P & GT; jest to trochę treści, a LT; / P & GT;
& LT; / Widget & GT;

09. Wyświetl kilka danych

react dashboard app

Możemy użyć składni @supports w CSS, aby wykryć, czy przeglądarka obsługuje układy siatki. Jeśli nie, domyślny do widoku pojedynczego kolumny

Komponent NumberDisplay działa podobnie jak widget, który właśnie stworzyliśmy - sprawia, że ​​niektóre tekst oparty wyłącznie na rekwizytach, które przekazujemy. Możemy go upuścić, gdzie musimy i mieć spójny wyświetlanie danych numerycznych.

Importuj komponent NumberDisplay na górze i użyj go, aby zastąpić treść zastępcza właśnie dodana w widgecie. 

 Importuj numeryzplaż z "../components/numberdisplay";
[...]
& LT; NumberDisplay max = {9} Wartość = {5} / & GT;

10. Konwertuj na NumerWidget

W tej chwili jest sporo kodu używanego do pokazania czegoś, co nie zmieni się przez widżety. Możemy dokonać specjalnego składnika do zamknięcia tego wszystkiego. W ten sposób musimy importować NumberWidget.

Wymień import Widget i NumberDisplay w górnej części app.js z NumberWidget. Upewnij się, że zastąpił również w metodzie renderowania. 

 Importuj NumberWidget z
  '../components/numberWidget';
[...]
& lt; Numberwidget
  Kierownik = "Otwórz bilet całkowitą"
max = {9} Value = {5} / & gt;

Następna strona: Ukończ aplikację Dashboard w Reaguj

  • 1.
  • 2.

Bieżąca strona: Zrób aplikację deski rozdzielczej w reakcji - kroki 1-10

Jak - Najpopularniejsze artykuły

Jak tworzyć cyfrowe obrazy Plein Powietrza

Jak Feb 2, 2026

Uzyskaj na zewnątrz, aby stworzyć wielką sztukę (Kredyt obrazu: Mike MC Cain) W dzisiejszych czasach ..

Jak zmienić czcionkę na swoim Twitterze Bio

Jak Feb 2, 2026

Jest wielu ludzi na Twitterze - 261 milionów kont Twittera ostatnio sprawdziliśmy. Oznacza to, że może być trudno wyróżni�..

10 Niesamowite rzeczy, które możesz zrobić z warstwami

Jak Feb 2, 2026

Warstwy są tym, co umożliwia budowanie projektu od wczesnych fundamentów do wykończenia. Trudno w to teraz uwierzyć, ale nie..

Samouczek PROCREATE: Nowe narzędzia badane

Jak Feb 2, 2026

Kiedy po raz pierwszy odkryłem ProCreee byłem oszołomiony przez pomysł posiadania przenośnego urządzenia, które umożliwi�..

Jak utworzyć lampę lawową z KeySHOT

Jak Feb 2, 2026

Jest coś dziwnie satysfakcjonującego o lampie lawy. Kojące, kolorowe światło i hipnotyzujące woskowe blobo podnoszące i ma..

Utwórz malarzalny charakter w swojej cyfrowej sztuce

Jak Feb 2, 2026

Cyfrowe malarstwo historycznie cierpiało na patrzenie zbyt sztuczne, ale z szeroką gamą dostępnych obecnie oprogramowania, je..

Utwórz interaktywne wykresy w jonowym 2

Jak Feb 2, 2026

Kiedy pracujesz w małym zespole, trudno jest napisać i utrzymywać oddzielny kod dla Androida, iOS i okien. Tam pojawiają się..

Przyspieszenie modelowania 3D

Jak Feb 2, 2026

Ten samouczek obejmuje proces budowy aktywów - w tym przypadku Projekt kosmiczny - z uczciwym stopniem złożono�..

Kategorie