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.