React JS

A React egy Javascript könyvtár, mely komponensekből épül fel és a felhasználói felület felépítésére használják.

Mi is pontosabban a ReactJS?

Egy JavaScript könyvtár, mely komponensekből épül fel, a felhasználói felület(UI) felépítésére használják, nagy erőssége a SEO (search engine optimalization – keresőmotor optimalizálása) és kifejezetten Single page applicationkéntírják meg.

Single-page application (SPA)

Az SPA lényege, hogy az oldal csak egyszer töltődik be és ha a felhasználó csinál valamit az oldalon, az dinamikusan írja át az aktuális oldalt az újratöltés helyett. Ma már szinte az összes nagyobb oldal ilyen alapon épül fel, köztük pl. a Facebook, Twitter, Gmail, Google Maps stb.

Napjainkban a népszerűbb, modern keresztrendszerek, mint pl. a React, már szinte mindegyik a SPA-t részesíti előnyben: csak egyszer tölti be az alkalmazáskódot (HTML, CSS, JavaScript), és amikor az alkalmazással kölcsönhatásba lép, akkor általában az történik, hogy a JavaScript megragadja a böngésző eseményeit, és ahelyett, hogy új kérést küldene a kiszolgálónak, amely új dokumentumot küld vissza, a kliens JSON-t kér, vagy műveletet hajt végre a kiszolgálón, de az a oldal, amelyet a felhasználó lát, soha nem tűnik el teljesen, leginkább úgy viselkedik, mint egy asztali alkalmazás.

A Single-page application-ok a JavaScript-ben (vagy legalábbis a JavaScript-be fordítva) épülnek be, és a böngészőben működnek. A technológia mindig ugyanaz, de az elmélet és néhány komponens, ahogy az alkalmazás működik, az változó.

React telepítése

Kétféleképpen tudjuk hozzáadni a projektünkhöz:

1. Létrehozunk egy React App-ot

Először is lekell tölteni a Node.js-t. Ha ezzel megvagyunk feltelepítjük, majd a parancssorba beírni a következőket:

npm i –g create-react-app
create-react-app *appnév*”(ez eltart pár percig)
cd *appnév*
npm start

Ha ez megvan, töröljük az összes fájlt a /src-n belül, kivéve az index.js és az index.css-t, ezek később kelleni fognak nekünk.

2. Hozzáadjuk a Reactot a weboldalunkhoz

Itt be kell húznunk a js file-okat, ide kattintva megtaláljuk őket. Ezután írhatjuk a React kódot Script tagek közé, vagy külön js file-ba. Ezt a módszert célszerűbb akkor használni, ha nem épül az egész projektünk a React-ra, csak egy-egy résznél használjuk benne.

Lifecycle metódusok

A Lifecycle metódusokkal lehetőségünk van arra, hogy bizonyos kód részek ne akkor fussanak le, amikor a kódban sor kerülne rájuk, hanem bizonyos pontoknál, ahova beállítottuk őket.

4 fajtája van:

shouldComponentUpdate: Lehetővé teszi a fejlesztő számára, hogy ne engedje a komponens szükségtelen újra renderelését. Ha nem szükséges az újra renderelés, return false-al megakadályozza azt.
componentDidMount metódus akkor hívódik meg, amikor a komponensünk bekerül a DOM-ba.
componentWillUnmount metódus akkor hívódik meg, amikor a komponensünk kikerül a DOM-ból.
render a legfontosabb Lifecycle metódus, amely minden komponensben kötelezően megvan hívva, ellentétben a többivel. Ez általában minden alkalommal meghívásra kerül, amikor a state állapota frissül, ami a felhasználói felület változásait tükrözi.

Jelentősebb funkciói

Egyoldalú adat átadás

A props adatokat átadjuk egy komponensnek a parent komponensből. A komponensek olyan értéket kapjanak, amelyeken nem kell változtatni, mert a props adatok mindig állandóak.

Stateful komponens

A state adatokat a props paraméterekkel tudjuk átadni a child komponenesnek. Ezek az adatok módosíthatóak a setState() függvénnyel.

Virtuális DOM

React egy memóriában tárolt adatszerkezeti gyorsítótárat hoz létre, kiszámítja az eredményül kapott különbségeket, majd frissíti a böngésző megjelenített DOM-ját.

Ez lehetővé teszi a programozó számára, hogy olyan kódot írjon, mintha az egész weboldalt minden változás után újra kéne tölteni, de közben csak a React könyvtárnak az a alkomponenese töltődik újra, ami tényleg változott.

JSX (JavaScript XML)

A JSX (JavaScript XML) a JavaScript nyelvszintaxis kiterjesztése, hasonló a megjelenése a HTML-hez. A JSX lehetőséget nyújt a komponensek megjelenítésére a sok fejlesztő számára ismert szintaxis használatával. A React komponenseket általában JSX segítségével írják, de nem szükséges, hogy azzal legyen (komponensek is írhatók tiszta JavaScript-ben).

Beágyazott elemek

Az ugyanazon a szinten lévő több elemet egyetlen tárolóelembe kell csomagolni, például a div elembe, vagy tömbként visszaküldve. Több elemet nem lehet egyszerre renderelni

React és az Injection

Az SQL injekció olyan kód injekciós technika, amelyet az adat-vezérelt alkalmazások támadására használnak, amelyben a rosszindulatú SQL utasítások beillesztésre kerülnek egy beviteli mezőbe a végrehajtáshoz. Az SQL-injekcióhoz ki kell használnia egy alkalmazás biztonsági programjának biztonsági rését, például ha a felhasználói input mezőt helytelenül szűrték le a karakterláncokhoz, azonban ha Reactot használunk, a JSX miatt nem lesz ezzel sok gondunk.

Alapértelmezés szerint a React DOM elhagyja a JSX-be beágyazott értékeket, mielőtt azokat megjelenítené. Így biztosítja, hogy soha ne kerüljön be semmi, aminek nem kifejezetten kell szerepelnie az alkalmazásban. Mindent egy karakterláncá alakítanak át, mielőtt megjelenítenénk. Ez segít megakadályozni az XSS (cross-site-scripting) támadásokat.