
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”
props
Objektum segítségével tetszőleges adatokat adhatunk át komponensünknek . A React minden összetevője megkapja ezt az props
objektumot.
Mielőtt megtanulnánk ennek az props
objektumnak 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 props
objektum 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 props
argumentumké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 name
fenti kódban található attribútum props.name
az Hello
összetevőnkbe kerül. Az attribútum age
lesz props.age
és így tovább.
Emlékezik! Egy React komponenst beágyazhat más React összetevőkbe.
Használjuk ezt a Hello
komponenst a codepen játszótérünkön. Cserélje ki a div
belső ReactDOM.render()
és a Hello
komponens, 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 Hello
komponens 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.Component
React 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 state
objektumot a komponens osztály konstruktorában, a következő módon.
Hasonlóképpen, az objektum props
segí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.

Original text

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 Babel
konvertá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 counter
komponenst í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.
- A JSX
camelCasing
ezért azbutton
attribútumotonClick
nemonclick
használja, ahogyan a HTML-ben használjuk. - Kötés szükséges
this
a 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.