React

JavaScript könyvtár felhasználói felületek létrehozásához

Deklaratív

A React segítségével könnyen készíthetsz interaktív felhasználói felületeket. Tervezz egyszerű nézeteket az applikáció minden egyes állapotához, és a React gondoskodik arról, hogy adatváltozáskor csak a megfelelő komponensek frissüljenek és legyenek újrarenderelve.

A deklaratív nézetek kiszámíthatóbbá teszik a kódot, valamint megkönnyítik a hibakeresést is.

Komponens alapú

Hogy komplex felhasználói felületeket tudj létrehozni, építs egységbefoglalt komponenseket amik gondoskodnak a saját állapotukról és kombináld őket.

Mivel a komponens logikáját sémák helyett JavaScriptben írod, könnyedén tudsz adatot mozgatni az alkalmazásban, és így az állapotok a DOM-on kívül maradnak.

Tanuld meg egyszer, használd mindenhol

Mi nem feltételezünk semmit a technológiai stack-ed többi részéről, szóval nyugodtan fejleszthetsz új funkciókat a Reactben anélkül, hogy a meglévő kódot módosítanod kellene.

A Reacttel szerver oldalon is renderelhetsz Node-dal, és mobilalkalmazásokat is írhatsz a React Native-ben.


Egyszerű komponens

A React komponensek azt mutatják, ami a render() metódusban visszatér, beviteli adattól függően. Ez a példa JSX-t használ, aminek a szintaxisa az XML-re hasonlít. A komponens beviteli adata le van küldve a komponensnek, amihez a render() metódus a this.props segítségével fér hozzá.

A JSX szintaxis használata nem kötelező a Reactben. Hogy lásd a nyers JavaScript kódot amit a JSX fordítása generál, próbáld ki a Babel REPL-t.

Kódpélda betöltése...

Állapot-teljes komponens

A beviteli adaton kívül (ami this.props-ként érhető el), egy komponens a saját belső állapotát is kezelni tudja (ez this.state-ként érhető el). Ha egy komponens állapota megváltozik, a renderelt tartalom frissítve lesz a render() metódus újrahívásával.

Kódpélda betöltése...

Alkalmazás

A props és state segítségével össze tudunk rakni egy kis Teendők alkalmazást. Ez a példa a state állapotot használja a jelenlegi listaelemek és a felhasználó beviteli inputjának a nyomonkövetésére. Annak ellenére hogy az esemény kezelők helyben vannak renderelve, azok össze lesznek gyűjtve, és esemély továbbítással lesznek implementálva.

Kódpélda betöltése...

Külső bővítményt használó komponens

A React lehetővé teszi, hogy más könyvtárakkal és keretrendszerekkel kommunikálj. Ez a példa a remarkable-t használja, ami egy külső Markdown könyvtár, mely a <textarea> értékét valós időben konvertálja.

Kódpélda betöltése...