Az elmúlt néhány hónapban a React és a React-Native munkatársaival dolgoztam. Már kiadtam két alkalmazást a gyártásban, a Kiven Aa-t (React) és a Pollen Chat-et (React Native). Amikor elkezdtem megtanulni a React-et, valami olyasmit kerestem (blog, videó, tanfolyam, bármi), ami nem csak arra tanított meg, hogyan kell alkalmazásokat írni a React-ben. Azt is szerettem volna, hogy felkészítsen az interjúkra.

A legtöbb anyag, amelyet találtam, egyikre vagy másikra koncentrált. Tehát ez a bejegyzés azon közönségnek szól, aki az elmélet és a gyakorlati megoldások tökéletes keverékét keresi. Adok egy kis elméletet, hogy megértse, mi történik a motorháztető alatt, majd megmutatom, hogyan kell írni néhány React.js kódot.

Ha inkább a videót részesíted előnyben, akkor a YouTube-on is ezt az egész tanfolyamot tartom. Kérjük, nézze meg.

Merüljünk el…

A React.js egy felhasználói könyvtárak felépítésére szolgáló JavaScript könyvtár

Mindenféle egyoldalas alkalmazást készíthet. Például csevegő üzenetküldők és e-kereskedelmi portálok, ahol valós időben szeretné megjeleníteni a változásokat a felhasználói felületen.

Minden egy alkotóelem

A React alkalmazás komponensekből áll, sok közülük egymásba ágyazva. „De mik az alkatrészek?” - kérdezheti.

Az összetevő egy újrafelhasználható kóddarab, amely meghatározza, hogy bizonyos funkciók hogyan nézzenek ki és hogyan viselkedjenek a felhasználói felületen. Például egy gomb egy összetevő.

Nézzük meg a következő számológépet, amelyet akkor láthat a Google-on, amikor megpróbál kiszámolni valami 2 + 2 = 4 –1 = 3 értéket (gyors matematika!)

Amint a fenti képen látható, a számológépnek számos területe van - például az eredménymegjelenítő ablak és a számbillentyűzet . Mindezek lehetnek különálló alkatrészek vagy egy óriási komponens. Attól függ, mennyire kényelmes az ember a dolgok lebontásában és elvonatkoztatásában a React-ben

Az összes ilyen komponenshez külön-külön írja a kódot. Ezután egyesítse azokat egy konténer alatt, ami viszont maga a React komponens. Így újrafelhasználható összetevőket hozhat létre, és a végső alkalmazás különálló összetevők gyűjteménye lesz.

Az alábbiak szerint írhatjuk a fenti számológépet a React-be:

Igen! HTML kódnak tűnik, de nem az. A későbbi szakaszokban többet fogunk megtudni róla.

Játszótérünk felállítása

Ez az oktatóanyag a React alapjaira összpontosít. Nem elsősorban a React for Web vagy a React Native (mobilalkalmazások építéséhez) célokra irányul. Tehát egy online szerkesztőt fogunk használni, hogy elkerüljük a webes vagy natív specifikus konfigurációkat, mielőtt még megtanulnánk, mit tud a React.

Már létrehoztam egy környezetet az Ön számára a codepen.io oldalon. Csak kövesse a linket, és olvassa el az összes megjegyzést a HTML és a JavaScript (JS) lapokon.

Komponensek vezérlése

Megtudtuk, hogy a React alkalmazás különféle összetevők gyűjteménye, beágyazott fának felépítve. Ezért valamilyen mechanizmusra van szükségünk az adatok egyik komponensből a másikba továbbításához.

Írja be a „kellékeket”

propsObjektum segítségével tetszőleges adatokat adhatunk át komponensünknek . A React minden összetevője megkapja ezt az propsobjektumot.

Mielőtt megtanulnánk ennek az propsobjektumnak a használatát , ismerkedjünk meg a funkcionális összetevőkkel.

a) Funkcionális komponens

A React egy funkcionális összetevője tetszőleges adatokat fogyaszt, amelyeket az propsobjektum segítségével továbbít neki . Visszaad egy objektumot, amely leírja, hogy az UI React mit kell megjelenítenie. A funkcionális komponenseket hontalan komponensekként is ismerik .

Írjuk meg az első funkcionális komponensünket:

Ez ennyire egyszerű. Csak propsargumentumként adtunk át egy sima JavaScript függvénynek, és visszaadtuk, na, mi volt ez? Ez {props.name}i v> dolog! Ez JSX (JavaScript Extended). Egy későbbi szakaszban többet megtudunk róla.

Ez a fenti funkció a következő HTML-t jeleníti meg a böngészőben:

Olvassa el az alábbi részt a JSX-ről, ahol elmagyarázom, hogyan kapjuk meg ezt a HTML-t a JSX-kódunkból.

Hogyan használhatja ezt a funkcionális komponenst a React alkalmazásban? Örülök, hogy megkérdezte! Ez olyan egyszerű, mint a következő:

A namefenti kódban található attribútum props.nameaz Hello összetevőnkbe kerül. Az attribútum agelesz props.ageés így tovább.

Emlékezik! Egy React komponenst beágyazhat más React összetevőkbe.

Használjuk ezt a Hellokomponenst a codepen játszótérünkön. Cserélje ki a divbelső ReactDOM.render()és a Hellokomponens, az alábbiak szerint, ahol a változtatások az alsó ablakban.

De mi van akkor, ha a komponensének valamilyen belső állapota van? Például hasonlóan a következő számláló-komponenshez, amelynek van egy belső számlálóváltozója, amely a + és - gomb megnyomásakor változik.

b) Osztályalapú összetevő

Az osztályalapú összetevőnek van egy további tulajdonsága state, amelyet az összetevő magánadatainak tárolására használhat. Mi lehet átírni a Hellokomponens segítségével osztály jelölést a következők szerint. Mivel ezek a komponensek egy állam, ezek is ismert Állapottartó alkatrészek .

A React.ComponentReact könyvtár osztályát kibővítjük , hogy osztály-alapú komponenseket készítsünk a React-ben. Tudjon meg többet a JavaScript osztályokról itt.

A render()metódusnak jelen kell lennie az osztályában, amikor a React ezt a módszert keresi, hogy megtudja, milyen felhasználói felületet kell megjelenítenie a képernyőn.

Az ilyen belső állapot használatához először inicializálnunk kell az stateobjektumot a komponens osztály konstruktorában, a következő módon.

Hasonlóképpen, az objektum propssegítségével osztályalapú komponensünkön belül is elérhető this.props.

Az állapot beállításához használja a React.Component's parancsot setState(). Erre egy példát látunk a bemutató utolsó részében.

Tipp: Soha ne hívja a setState()belső render()funkciót, mert setState()az alkatrész újra megjelenik, és ez végtelen ciklust eredményez.

Eltekintve attól state, hogy egy osztály-alapú összetevő rendelkezik néhány életciklus-módszerrel, mint például componentWillMount().ezek, amelyek segítségével megteheti a dolgokat, például inicializálja a state és mindet, de ez nem tartozik a bejegyzés körébe.

JSX

A JSX a JavaScript Extended rövid formája, és így React komponenseket írhat . A JSX használatával megkapja a JavaScript teljes erejét az XML-hez hasonló címkékben.

A JavaScript kifejezéseket beletette {}. Az alábbiakban néhány érvényes JSX példát találunk.

Úgy működik, hogy JSX-t írsz, hogy leírd, hogyan kell kinézned a felhasználói felületeden. Egy hasonló transzpiler Babelkonvertálja a kódot egy csomó hívássá React.createElement(). A React könyvtár ezután felhasználja ezeket a React.createElement()hívásokat a DOM elemek (React for Web esetén) vagy a Native nézetek (React Native esetén) fa-szerű struktúrájának összeállításához, és a memóriában tartja.

Ezután a React kiszámítja, hogyan tudja utánozni ezt a fát a felhasználó számára megjelenített felhasználói felület memóriájában. Ezt a folyamatot megbékélésnek nevezik. A számítás elvégzése után a React elvégzi a tényleges felhasználói felület módosítását a képernyőn.

Használhatja a Babel online REPL-jét, hogy megnézze, mit hoz a React valójában, amikor JSX-t ír.

Mivel a JSX csak egy szintaktikus cukor a sima React.createElement()hívásokhoz képest, a React JSX nélkül is használható

Most minden koncepció megvan a helyén, így jó helyzetben vagyunk ahhoz, hogy olyan counterkomponenst írjunk , amelyet korábban GIF-nek láttunk.

A kód a következő, és remélem, hogy már tudja, hogyan kell ezt renderelni a játszótérünkön.

Az alábbiakban néhány kiemelt pontot találunk a fenti kóddal kapcsolatban.

1. A JSX camelCasingezért az buttonattribútumot onClicknem onclickhasználja, ahogyan a HTML-ben használjuk.
2. Kötés szükséges thisa visszahívásokhoz. Lásd a fenti kód 8. és 9. sorát.

A végső interaktív kód itt található.

Ezzel elértük a React összeomlási tanfolyamunk befejezését. Remélem, rávilágítottam arra, hogyan működik a React, és hogyan használhatja a React-et nagyobb alkalmazások készítéséhez, kisebb és újrafelhasználható összetevők felhasználásával.

Ha bármilyen kérdése van vagy kétségei vannak, írjon a Twitter @ rajat1saxena címre, vagy írjon nekem a [email protected] címre.

Kérjük, ajánlja ezt a bejegyzést, ha tetszett, és ossza meg hálózatával. Kövessen engem további, technikával kapcsolatos bejegyzésekért, és fontolja meg a Rayn Studios csatornám feliratkozását a YouTube-on. Nagyon köszönöm.