Kuinka luoda kojelaudan sovellus reagoimaan

Sep 12, 2025
Miten tehdään

Tässä opetusohjelmassa kävelemme läpi Miten luoda sovellus käyttämällä Reagoida - JavaScript-kirjasto käyttöliittymien rakentamiseen. Tämä Web-suunnittelutyökalu on erityisen hyödyllinen, kun kyseessä on komponenttien luominen, mikä tarjoaa merkittäviä etuja jotain JQuerystä.

Kyky luoda itsenäisiä, uudelleenkäytettäviä komponentteja tarkoittaa, että voit pitää koodin pienempiä ja järjestettyjä. Jos komponentit ovat riittävän hyvin, ne voidaan pudottaa tarvittaessa ilman lisäasetusta.

Tässä opetusohjelmassa tehdään kojelaudan sovellus, joka pitää silmällä tärkeitä tukitiedostoja. Näyttö jaetaan ruudukkoon, joka voidaan räätälöidä näyttämään erilaiset visuaalit riippuen niiden tarpeiden mukaan.

Haluatko luoda sivuston, eikä sovelluksen? Tarvitset oppaat parhaiten Verkkosivuston rakentaja ja sivujen ylläpito Palvelu.

  • 19 Brilliant jquery-laajennukset

Tekemällä yleinen widgetikomponentti, voimme leikata ja muuttaa näytön vaikuttamatta mihinkään taustalla olevaan koodiin. Näiden pakkaaminen säiliökomponentissa antaa meille mahdollisuuden hallita kyseisten tietojen lähteen erillään sen näytöstä.

Käytämme CSS-verkko Voit näyttää sisällön määritellyissä lohkoissa. Selaimet, jotka eivät tue sitä näkyy yhdellä sarakkeella, aivan kuten pienempää näyttöä käytettäessä.

Lataa tämän opetusohjelman tiedostot tässä .

01. Lataa riippuvuudet

Hankittujen tiedostojen (ja tallentamisen jälkeen pilvivarasto ) Meidän on vedettävä kaikki tarvittavat paketit, joita tarvitsemme projektiin. Näihin kuuluvat tiedostoja "Luo-reagoivasta sovelluksesta", joka käsittelee meille rakennusprosessia.

Meidän on myös suoritettava kaksi palvelinta - se, joka tarjoaa sivulle kuuman uudelleenlastauksen ja toiseen, joka tarjoaa joitakin väärennettyjä tietoja testata.

Syötä seuraava komentorivillä projektin sisäpuolella: 

 / * Yhdessä ikkunassa * /
& gt; lankaasennus
& gt; lanka alkaa
/ * Toisessa ikkunassa * /
& gt; Lanka palvelee

02. Lisää ensimmäinen widget

react dashboard app

Aloita yksinkertaisella komponentilla

Aloita asiat pois, annamme yksinkertaisen komponentin sivulle. Babel perustaa, voimme kirjoittaa komponentteja ES2015-luokkien avulla. Kaikki mitä meidän on tehtävä, on tuoda heille, kun tarvitsemme ja Babel Webpack tekee loput.

Avata /src/components/app.js ja lisää tuonti sivun yläreunaan. Sitten sijoita tekijän toiminnon komponentti säiliön sisällä & lt; div & gt; . 

 Tuo widget
  '../components/widget';
[...]
& lt; div classname = "sovellus" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Tyyli widget-ruutu

react dashboard app

Kun tuonti CSS: llä WebPackilla, tyylit voidaan tiivistää vain kyseiseen osaan, jotta ne eivät vuotaa sivun muihin osiin

Tässä projektissa WebPack on asetettu poimia CSS-tuonti. Tämä tarkoittaa sitä, että voimme tuoda CSS-tiedostoja, kuten JavaScriptin kanssa edellisessä vaiheessa, jonka avulla voimme luoda erillisiä tiedostoja jokaiselle komponentille. Lisää seuraava tuonti widget.js. Tämä yhdistää "Widget" -luokan nimi ja soveltamisalaan tämän komponentin tyylit. 

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

04. Lisää otsikko ja sisältö

Jokainen widget tarvitsee lyhyen kuvauksen siitä, mitä tietoja se näyttää. Pidä asiat muokattavissa, välitämme tämän omaisuudeksi - tai "prop" - komponenttiksi, kun käytämme sitä.

Sisällön osalta reagoi tarkkaa erityisiä "lasten prop, joka sisältää komponentin avautumisen ja sulkemisen välisen sisällön.

Vaihda paikkamerkki & lt; p & gt; Render-toiminnossa seuraavista. Lastauskomponentti tulee toistoon myöhemmin. 

 & lt; div classname = "otsikko" & gt;
  & lt; h2 & gt; {this.props.heading} & lt; / h2 & gt;
  {this.props.loading? & lt; loading / & gt;: ""}
& lt; / div & gt;
& lt; div classname = "Sisältö" & gt;
  {this.props.children}
& lt; / div & gt;

05. Anna widget kallistaa verkkoon

react dashboard app

CSS-verkkomäärittelyn avulla levitetään ulkoasuelementtejä, kuten gutters, riippumatta siitä, mistä tahansa muotoilusta sovelletaan lapsielementteihin

Tuonnimme tyylitaulujen lisäksi voimme myös luoda reagoivia tyylejä dynaamisesti, joka perustuu läpi.

Suunnittelevat sarakkeet ja rivit CSS-verkkoon käyttävät ruudukko-sarakkeita ja ruudukko-rivi-ominaisuuksia. Voimme kulkea "Colspan" ja "ROWSPAN" -valmisteen muuttamiseksi, jotta voisimme muuttaa tätä komponenttia vastaavalla tavalla, miten pöytäsolut toimivat HTML: ssä.

Levitä tyylejä widget-konstruktorissa ja liitä ne säiliöön & lt; div & gt; . 

 Jos (Props.colspan! == 1) {
  tämä.spapstyles.gridcolumn
  = `span $ {props.colspan}`;
}
Jos (Props.Rowspan! == 1) {
  tämä.spapstyles.gridrow
  = `span $ {props.rowspan}};
}
[...]
& lt; div style = {this.spanstyles}
  classname = "widget" & gt;

06. Toimittaa oletuksena rekvisiitta

Juuri nyt widget on tyhjä, koska emme toimi vielä rekvisiitta. Näissä tapauksissa voimme toimittaa sen sijaan oletusarvot.

Ellei toisin kerro, CSS-verkkot ovat oletusarvoisia pienimmän yksikön käyttöönottoon, joka tässä tapauksessa on 1x1 neliö. Juuri ennen kuin viemme widgetin, toimittaa joitakin oletusarvoisia rekvisiitta. 

 widget.defaultProps = {
  Otsikko: "Nimeämätön Widget",
  Colspan: 1,
  ROWSPAN: 1
}

07. Tee erityisiä rekvisiitta

react dashboard app

NumberDisplay -komponentti on "Presentional" -komponentti, sillä sillä ei ole sisäistä tilaa ja luopua siihen, että se on kokonaan

Komponentit voivat antaa vinkkejä siitä, millaisia ​​arvoja on lähetettävä rekvisiittaina. Kehittäessään sovellusta, kaikki virheellisesti kulkevat rekvisiittaukset näkyvät konsolissa varoituksina, jotta vältät vikoja alaspäin.

Vain oletuspalkkien alapuolella määritä, mitä rekvisiittaisi tai täytyy siirtää, ja millaista niiden pitäisi olla. 

 widget.proptyypes = {
  Otsikko: reagoi.proptyypes.string,
  Colspan: React.proptyypes.Number,
  ROWSPAN: REACE.PROPTYPES.NUMBER,
  Lapset:
    Reagoida.proptyypes.element.isrequired
}

08. Lisää profiilit sovellukseen

Määrittelemällä "lasten prop tarvittaessa saatat huomata selaimen valituksen, se on tällä hetkellä määrittelemätön. Vaikka tämä ei rikkoa sovellusta, se pitää bugging meitä, kunnes se on lajiteltu.

Päätä takaisin App.JS: hen ja lisää otsikkoon, jonka olemme luoneet aiemmin luomamme widget. Sen sijaan, että tunnisteen itse sulkeminen, avaa se ja lisää paikkamerkin sisältöä, jotta se toimii. 

 & lt; widget heading = "Avaa lippu yhteensä" & gt;
  & lt; p & gt; tämä on jotain sisältöä & lt; / p & gt;
& lt; / widget & gt;

09. Näytä joitain tietoja

react dashboard app

Voimme käyttää CSS: ssä @supports-syntaksia havaitsemaan, onko selainta tukeva verkkoasema. Jos ei, oletusarvoamme yhden sarakkeen näkymä

NumberDisplay -komponentti toimii paljon kuin juuri luomamme widget - se tekee joitakin tekstiä, jotka perustuvat pelkästään rekvisiittaisivat siihen. Voimme pudottaa sen missä me tarvitsemme ja jolla on johdonmukainen näyttö numeeristen tietojen.

Tuo NumberDisplay -komponentti yläreunaan ja käytä sitä korvaamaan paikkamerkin, jonka juuri lisäsi widgetin sisällä. 

 Tuonumerondistus "../components/numberdisplay";
[...]
& lt; numberdisplay max = {9} arvo = {5} / & gt;

10. Muunna NumberWidget

Tällä hetkellä on melko paljon koodia, jota käytetään osoittamaan jotain, joka ei muutu widgeteihin. Voimme tehdä erityisen komponentin kapselemaan kaiken. Tällä tavoin meidän on vain tuoda numerointwidget.

Vaihda widget ja numeroDisplay-tuonti App.JS: n yläosassa numerolla. Varmista myös korvata ne myös Render-menetelmällä. 

 Tuo numberwidget
  '../components/Numberwidget';
[...]
& lt; numberwidget
  Otsikko = "Avaa lippu yhteensä"
Max = {9} arvo = {5} / & gt;

Seuraava sivu: Suorita kojelaudan sovellus reagoi

  • 1
  • 2

Tämänhetkinen sivu: Tee kojelaudan sovellus reagoida - vaiheet 1-10

Miten tehdään - Suosituimmat artikkelit

Kuinka käyttää vertailukuvia: 13 Essential Vinkkejä taiteilijoille

Miten tehdään Sep 12, 2025

(Kuva luotto: Jonathan Hostety) Sivu 1/2: Sivu 1 Sivu 1 ..

Kuinka veistää ihmisen nenä Zbrush: 4 Helppo vaiheet

Miten tehdään Sep 12, 2025

Ihmisen nenkit tulevat kaikkiin muotoihin ja kokoihin. Kuitenkin on tärkeää tietää anatomian perusteet veistää uskottavan ..

Luo dynaaminen liike koostumuksessa

Miten tehdään Sep 12, 2025

Ennen piirustuksen aloittamista on tärkeää päättää, millaista liikettä haluat kaapata. Yritä pitää se yksinkertaisena ..

Kuinka maalata unelmaista fantasiametsää kohtaus

Miten tehdään Sep 12, 2025

1800-luvulla Rococo-maalarit käytti mielikuvitusta, unelmoista paletteja, romanttista tunnelmaa ja vilkas harjatyötä luomaan i..

Kuinka lisätä videota interaktiivisille PDF-tiedostoille

Miten tehdään Sep 12, 2025

Kuva on tuhannen sanan arvoinen, ja video on miljoonan arvoinen. Video voi välittää enemmän tietoa nopeammin kuin tulostaa tai staattisia kuvia. Se voi muulla tavoin staid-asiakirjoja. Yo..

Luo mukautettu tarraharja Artrage

Miten tehdään Sep 12, 2025

Käytän tarra-spray Artrage - Fabulous Taidetyökalu, varsinkin jos teet omat harjan päät siihen. Vaikka se tun..

Kuinka käyttää varastossa valokuvaus luovasti suunnittelussa

Miten tehdään Sep 12, 2025

Sen sijaan, että olisit viimeinen keino, säilytyskuvesi voi ja pitäisi muodostaa olennainen osa luovaa arsenalia. Varastossa V..

Kuinka tehdä joustavan nauhan rig

Miten tehdään Sep 12, 2025

Ribbon-laitteet ovat melko yleisiä 3D-taide Tuotantolaitteet. Heillä on samanlainen käyttäytyminen Spline IK-a..

Luokat