Reagálja az 1. leckét, kódolt

Ebben a cikkben több témakörrel foglalkozunk, amelyeknek minimális ismerete szükséges az alkalmazások létrehozásához:

Mielőtt elkezdenénk

Annak érdekében, hogy világosan megértsük, mi a React, szeretnék javaslatot tenni egy ilyen lehetőségre:

Ez magában foglalja azt a koncepciót is, hogy a felhasználói felület olyan összetevőkre osztható, amelyek önálló részei, amelyek egyszerűen támogatják, kiterjesztik és alkalmazzák többször.

Reagálni tudunk, de használható építeni komponenseket a böngésző és a szerver oldalon, vagyis a végső HTML kerül kialakításra nem a kliens és a szerver, amely lehetővé teszi, hogy építsenek az úgynevezett izomorf + alkalmazás lehetővé teszi, hogy elkerülhető legyen a SEO rejlő egyoldalas alkalmazásokhoz. De ez nem minden, a React segítségével natív mobil interfészeket hozhat létre (React Native).

Mielőtt az Ajax megjelent volna bármely felhasználói művelethez, az egész weblapot újratöltették az új adatok megjelenítéséhez. Ami nem volt nagyon hatékony megoldás, ha csak egy részét kell frissíteni. Az Ajax megjelenésével lehetőség nyílt az oldalon lévő adatok részleges frissítésére. Az úgynevezett egyoldalas alkalmazások megjelentek, amikor csak egy oldalt töltöttek be, és az összes további kérés feldolgozása teljes oldali újratöltés nélkül történt.

Mivel a kapcsolódási pontok összetettebbé válnak, az alkalmazások állapotának kezelésének összetettsége nő. Sok könyvtár kétirányú adatkötést használ a felülethez, és közvetlenül manipulálja a DOM-fát. De ez a megközelítés a sebességgel veszít.

A reaktív megjelenítés könnyebb használni, mint a hagyományos adatmegkötés. Lehetővé teszi számunkra, hogy deklaratív stílussal írjunk, hogyan kell az elemek megjelenni és viselkedni. Ez nem változik a DOM fában, ha az adatok változása reagál egy könnyű példányát a DOM-fa, mely tartalmazza az aktuális állapotot. Ha változtatni az adatokat a virtuális DOM fát, hogy adja át a reagálnak összehasonlítása a valódi DOM és változások történnek csak akkor, ha szükség van rá. Mi teszi a React-ot nagyon gyorsan és hatékonyan?

A React-ban minden olyan alkatrészekből áll, amelyek önellátó építőelemek. Ez a szépség elveti a "megosztottság és a hódítás" elvét, amely alatt egyik rész sem lehet különösen nehéz. A kisebb összetevők közül könnyen létrehozhat összetett és többfunkciós komponenseket.

A dokumentummodell rugalmas absztrakciója

A React saját nézőpontja a felhasználói felületnek, amely kivonatolja az alapul szolgáló dokumentummodellt. A leginkább figyelemre méltó előnye ennek a módszernek, hogy lehetővé teszi, hogy ugyanazokat az elveket tétele HTML, így például a természetes és egyéni IOS és Android interfészeket. És ez a következő előnyökkel jár:

Az események minden böngészőben és eszközön megfelelnek az előírásoknak;

Az így létrejövő HTML React komponensek a kiszolgáló oldalára épülhetnek, így elkerülhetők a SEO problémái és izomorf alkalmazások építése;

Hello World on React

Hello World React

React - munkafolyamat

A munkafolyamat úgy néz ki, mint ez:

Az írás után a JSX automatikusan bekapcsolódik a JS-be

Írjon kódot modulként

Függőségek kezelése

Hozzon létre JS fájlokat és mappákat a hibakereséshez

A React projekt fő szerkezete:

Az összes JS modulot tartalmazó forrásmappát

package.json - egy szabványos NPM manifeszt fájl

Modulok projekt létrehozásához, amely segít a JSX JSX átalakításában. A modulok használata lehetővé teszi, hogy megszervezze a kódot úgy, hogy több fájlba osztja azokat, amelyek mindegyike saját függőségeket deklarál. Sok ilyen modul létezik. A Rect közösség elfogadta a Webpack-ot, mint a legmegfelelőbb megoldást a feladatok megoldására.

Ne felejtse el végrehajtani a parancsokat

Az első összetevő létrehozása

Függelék Kanban Testület

Ebben a leckében létrehozunk egy projekt menedzsment eszközt a Kanban stílusban. Az alkalmazás egy olyan fórum, amelynek területei a feladatok aktuális állapotának megfelelően vannak felosztva. Amikor a feladatállapot megváltozik, a megfelelő állapotba kerül egy új területre.

Végleges projektünk hasonlít az alábbi képre

A komponensek hierarchiája a jövőbeni alkalmazásunkban

Az összetevők elválasztásának alapelvei:

• Ne feledje, hogy az összetevők kicsiek és egy felelősségi területet tartalmaznak. Más szóval, az összetevőnek ideális esetben csak egy dolgot kell tennie. Ha a komponens növekszik, kisebb összetevőkre kell bontani.
• Elemezze a projekt elrendezését, és ezzel jelzi, hogyan oszthatja fel a komponensekbe.
• Figyeljen az adatmodellre. Próbálj bele összetevőkbe úgy, hogy az egyik összetevő pontosan az adatmodell egyik része.

Ha ezeket az ajánlásokat használja, akkor valószínűleg az alábbi ábrán látható komponensek összetételére kerülnek.

A követelmények az összetevők összetételében kulcsfontosságúak. Ezek a mechanizmusok, amelyeket a React-ban használnak az adatok szülőkről gyermekre történő átvitelére. A követelmények értékét nem lehet megváltoztatni azon gyermek komponensen belül, amelyhez át lettek adva.

Összetevők létrehozása
Miután meghatározta az összetevők hierarchiáját, ideje létrehozni őket. Az építőelemek két nyilvánvaló megközelítése van: felülről lefelé vagy alulról felfelé. Ahhoz, hogy képet kapjon a gyermekalkatrészekben használt összes kellékről, érdemes elkezdeni az elemek felépítését felülről lefelé.
Ezen túlmenően, hogy megkönnyítsük a projektünk támogatását, minden egyes komponens számára létrehozunk saját JS fájlt.

Ebben a szakaszban az A pp.js fájl nagyon egyszerű lesz. Ez csak az összetevők hierarchiáján átadott adatokat tartalmazza. Az adatokat magában egy helyi változó tárolja, de a jövőben megjavítjuk és az adatok a kiszolgáló API-ján keresztül jutnak el.