Kako izgraditi traku napretka s React

Ovaj je tutorial namijenjen svima koji su zainteresirani kako bi započeli izgradnju jednostavne trake napretka u React-u. Kako bih svima ovo bilo lijepo i jednostavno, izgradit ćemo naš primjer u Codepenu dok napredujemo kroz udžbenik. Na kraju će biti uključena veza do ispunjene verzije.

Pogledajte ostale moje članke

Molimo, provjerite ove osobe ako ste zainteresirani nakon čitanja trenutnog članka!

Planiranje komponente

Prije nego što započnemo s pisanjem koda, brzo razradimo kako bi izgledala naša React Progress Bar. Čini mi se da kao da su nam zaista potrebna samo dva elementa za izradu trake napretka. Ti elementi su:

  • Roditeljski div koji u sebi drži još jedan div. Omogućimo ovo ime ProgressBar.
  • Div koji djeluje kao punilo unutar roditeljskog div. Ovaj div će biti obojen bojom i ispunit će x postotak spremnika vodoravno i okomito. Omogućimo ovo ime.

Skele ProgressBar

U redu, idemo na kodiranje. Počnimo s izgradnjom skela trake napretka. U ovom tutorialu koristim ProgressBar kao funkcionalnu React Component. Postoji puno drugih načina da se to postigne, ali idemo samo s tim pristupom.

Ovo je roditeljski div o kojem sam govorio u odjeljku planiranja. Unutar nje samo trebamo dodati komponentu Filler. To još nismo izgradili, pa hajde da je gradimo!

Sjajno. Imamo dvije komponente. Postavljamo ih sve zajedno dodavanjem punila unutar ProgressBara.

Vau, ovo je nevjerojatno. Osim, apsolutno ne postoji styling niti jedne od ovih komponenti. Omogućimo vam brzo ovo oblikovanje!

Stilovi klase napretka u tijeku su prilično ravni. Sve što radim je da mu dam početnu visinu i širinu, obrub i neke zaobljene rubove pomoću obruba granice. Važno je primijetiti moju uporabu položaja: u odnosu na naprednu klasu trake, ovo je potrebno, jer ja klasi punila dodam visinu od 100%.

Za stilove punila, to je lako i razumljivo. Pozadinu punila sam postavila na tirkiznu plavo-ish boju (# 1DA598) i osigurala da visina mog punila odgovara njegovom roditelju, dajući mu visinu od 100%. Također želim da se polumjer granice podudara s roditeljem, pa sam ga postavio da naslijedi od roditelja.

Možda ćete biti znatiželjni zbog prijelaza koji sam dodao na punilo. To jednostavno čini prijelaz punila prirodnijim kada se povećava / smanjuje u veličini. Pogledajmo što trenutno imamo na traci napretka:

Dosadna, prazna traka napretka = (

To dosadnu traku napretka možemo popraviti dodavanjem nekih rekvizita. Učinimo to!

Dodavanje potrebnih rekvizita komponenti

Moramo osmisliti neku vrstu sustava koji omogućava da se sastojka za punjenje naše trake dinamički mijenja u širinu. Ovdje moramo započeti integrirati stanje i rekvizite značajke Reacta. Da bismo to učinili, dopustimo da izgradimo još jednu komponentu koja će nam omogućiti da testiramo i implementiramo te značajke.

Kao što vidite, inicijaliziram svojstvo na stanju zvanom postotak i dodijelim mu početnu vrijednost 0. Ovo je varijabla stanja koju ćemo koristiti za kontrolu širine našeg punila. Da bi ProgressBar bio svjestan ove vrijednosti, prosljeđujem ga kao pomoćnu opremu vezanu za komponentu.

Ipak postoji problem. Sjajno je to što vrijednost prenosimo kao pomoćnu opremu, ali komponenta ProgressBar još uvijek nema pojma kako se nositi s tim propitom. Da bismo to popravili, jednostavno možemo učiniti sljedeće:

Stvaranjem podupirača pričvršćenog za Filler, vrijednost možemo proslijediti dalje u Filler. Sve što sada trebamo učiniti je učiniti nešto s vrijednošću koju dobivamo unutar Fillera i to bismo trebali i učiniti.

Postavljanje širine punila

Posljednja stvar koju trebamo učiniti je uzeti vrijednost koju dobivamo kao propita u Filler i postaviti tu vrijednost na širinu Filler-a. To se lako može implementirati pomoću inline stylinga. Pogledajmo kako se to radi.

Dinamično postavljanje širine punila na temelju njegove vrijednosti prop

To je to! Samo za udarce, dopustite da promijenimo početno svojstvo ProgressBarExample u 60:

Sada pogledajte našu lijepu traku napretka u akciji!

Zamotavanje stvari

Sada znam da je ovo bio vrlo jednostavan primjer, ali uključio sam detaljniju verziju da se posvađate s Codepenom. Potpuno je interaktivan i nadamo se da vas nauči nečemu novom. Ako vam se svidio ovaj vodič, volio bih da me pratite na GitHub-u!

https://github.com/dzuz14

linkovi

Na YouTubeu naučite reagirati besplatno

Nakon što pročitate ovaj članak, volio bih da pogledate moj besplatni YouTube Tutorial na Reactu, gdje vam pokazujem kako od nule napraviti galeriju sličica. Slobodno mu dodajte oznaku prije nego što počnete čitati! =)

Primjer punog napretka na Codepenu

DanZuzevich.com