Jak utworzyć aplikację do pulpitu nawigacyjnego z reakcją

Sep 14, 2025
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

Zacznij od Artrage

Jak Sep 14, 2025

(Kredyt obrazu: Steve Goad) Zacznij od artrage 01. Ustal się w Artrage ..

Zbuduj ChatBot AI

Jak Sep 14, 2025

Sztuczna inteligencja (AI) pozwala nam tworzyć nowe sposoby patrzenia na istniejące problemy, od przemyślenia strategii środo..

Jak ukryć kod JavaScript z View Source

Jak Sep 14, 2025

Jeśli nie podejmujesz środków ostrożności z kodem JavaScript, ułatwia życie dla każdego, kto chce go sklonować. Ale jeś..

Naucz się modelować osobę 3D w Zbrush i Maya

Jak Sep 14, 2025

Strona 1 z 2: Strona 1 Strona 1 Strona 2..

Zacznij od rozproszenia

Jak Sep 14, 2025

Jeden z najprostszych sposobów, aby przynieść dodatkowe życie do dowolnego kawałka 3d art. ma do niego dodać kolor i teksturę. Istnieje wiele nazw danych w tym procesie,..

Jak prototypować aplikację mobilną z Adobe XD

Jak Sep 14, 2025

Ten samouczek pokazujący, jak wykonać prototyp aplikacji mobilnych w Adobe XD, został użyty Adobe XD C..

Pomaluj portret jak starych mistrzów

Jak Sep 14, 2025

W tym samouczku zajmiemy się dogłębnym spojrzeniem na korzyści z kopiowania starego malowania mistrza. Wybrałem do skopiowan..

Jak zaprojektować animowany bohater

Jak Sep 14, 2025

Poniższe wskazówki przerywają mój proces do animowania brodawki na nadchodzącą serię WWW ERIC Miller animation Animation Studios. BINK to ciekawe małe stworzenie morskie, które zosta..

Kategorie