A React az egyik legnépszerűbb JavaScript könyvtár felhasználói felületek építésére.
Ha front-end fejlesztővé szeretnél válni vagy webfejlesztői állást találni, akkor valószínűleg hasznodra válna a React alapos megismerése.
Ebben a bejegyzésben a React néhány alapját fogod megtanulni, mint például a komponensek létrehozása, a JSX szintaxis és a Props. Ha nincs vagy csak kevés tapasztalata van a React-tel kapcsolatban, akkor ez a bejegyzés Önnek szól.
Kezdésnek itt van, hogyan telepítheti a Reactot.
Mi az a JSX?
Az első dolog, amire rájön az első React projekt telepítése után, hogy egy JavaScript függvény valamilyen HTML kódot ad vissza:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Ez egy speciális és érvényes szintaxiskiterjesztés a React számára, amit JSX-nek (JavaScript XML) hívnak. Általában a frontenddel kapcsolatos projektekben a HTML, CSS és JavaScript kódot külön fájlokban tartjuk. A Reactban azonban ez egy kicsit másképp működik.
A React projektekben nem hozunk létre külön HTML fájlokat, mert a JSX lehetővé teszi, hogy a HTML-t és a JavaScriptet kombináltan írjuk egy fájlba, mint a fenti példában. A CSS-t azonban elkülöníthetjük egy másik fájlban.
A JSX kezdetben egy kicsit furcsának tűnhet. De ne aggódj, majd megszokod.
A JSX nagyon praktikus, mert bármilyen JavaScript kódot (logikát, függvényeket, változókat stb.) közvetlenül a HTML-en belül is végre tudunk hajtani, ha csavart zárójeleket használunk { }, például így:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Ezeken kívül a JavaScript változókhoz HTML tageket is rendelhetünk:
const message = <h1>React is cool!</h1>;Vagy a JavaScript-logikán belül (például if-else esetekben) adhatja vissza a HTML-t:
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}A JSX további részleteibe nem megyek bele, de a JSX írásakor mindenképpen vegye figyelembe a következő szabályokat:
- A HTML és komponens tageket mindig le kell zárni < />
- Egyes attribútumok, mint például a “class” “className”-re változik (mert a class a JavaScript osztályokra utal), a “tabindex” “tabIndex”-re változik és camelCase
- Egynél több HTML elemet nem adhatunk vissza egyszerre, ezért ügyeljünk arra, hogy egy szülő tagbe csomagoljuk őket:
return ( <div> <p>Hello</p> <p>World</p> </div>);- vagy alternatívaként becsomagolhatjuk őket üres címkékkel:
return ( <> <p>Hello</p> <p>World</p> </>);A további információkért megnézheted a React for Beginners bemutatómat is:
Mi a funkcionális & osztálykomponensek?
A JSX szintaxis megszokása után a következő dolog, amit meg kell értened, a React komponens alapú felépítése.
Ha újra megnézed a bejegyzés elején található példakódot, látni fogod, hogy a JSX kódot egy függvény adja vissza. De az App( ) függvény nem egy közönséges függvény – ez valójában egy komponens. Mi is az a komponens?
Mi az a komponens?
A komponens egy független, újrafelhasználható kódblokk, amely a felhasználói felületet kisebb darabokra osztja. Például, ha a Twitter felhasználói felületét építenénk React segítségével:
Ahelyett, hogy az egész felhasználói felületet egyetlen fájl alá építenénk, az összes (pirossal jelölt) részt kisebb független darabokra oszthatjuk és oszthatjuk is. Más szóval ezek a komponensek.
A React kétféle komponenssel rendelkezik: funkcionális és osztály komponensekkel. Nézzük meg most mindegyiket részletesebben.
Funkcionális komponensek
A React első és ajánlott komponenstípusa a funkcionális komponensek. A funkcionális komponens alapvetően egy JavaScript/ES6 függvény, amely egy React elemet (JSX) ad vissza. A React hivatalos dokumentációja szerint az alábbi függvény egy érvényes funkcionális komponens:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternatívaként létrehozhatunk egy funkcionális komponenst az arrow függvénydefinícióval is:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Ez a függvény egy érvényes React komponens, mivel egyetlen “props” (ami a tulajdonságokat jelenti) objektum argumentumot fogad el adatokkal, és egy React elemet ad vissza. – reactjs.org
Hogy később használni tudjunk egy komponenst, először exportálnunk kell, hogy máshová importálhassuk:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Az importálás után meghívhatjuk a komponenst, mint ebben a példában:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Tehát egy funkcionális komponens a React:
- egy JavaScript/ES6 függvény
- vissza kell adnia egy React elemet (JSX)
- mindig nagybetűvel kezdődik (elnevezési konvenció)
- szükség esetén paraméterként fogad kellékeket
Mi az osztálykomponens?
A komponensek második típusa az osztálykomponens. Az osztálykomponensek olyan ES6 osztályok, amelyek JSX-et adnak vissza. Alább látható ugyanaz a Welcome függvényünk, ezúttal osztálykomponensként:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}A funkcionális komponensektől eltérően az osztálykomponenseknek rendelkezniük kell egy további render( ) metódussal a JSX visszaadásához.
Miért használunk osztálykomponenseket?
Az “állapot” miatt használtunk osztálykomponenseket. A React régebbi verzióiban (< 16.8-as verzió) nem lehetett állapotot használni funkcionális komponenseken belül.
Ezért funkcionális komponensekre csak az UI renderelésére volt szükségünk, míg az adatkezeléshez és néhány további művelethez (mint például az életciklus metódusok) osztálykomponenseket használtunk.
A React Hooks bevezetésével ez megváltozott, és most már funkcionális komponensekben is használhatunk állapotokat. (Az állapotokkal és a horgokkal a következő bejegyzéseimben fogok foglalkozni, úgyhogy egyelőre ne törődjetek velük).
Egy osztálykomponens:
- Egy ES6 osztály, akkor lesz komponens, ha “kiterjeszti” egy React komponenst.
- felveszi a Props-ot (a konstruktorban), ha szükséges
- nak kell rendelkeznie egy render( ) metódussal a JSX visszaadására
Mi a Props a Reactban?
A komponensek másik fontos fogalma, hogy hogyan kommunikálnak. A React rendelkezik egy speciális objektummal, amit prop-nak (a prop a property rövidítése) hívunk, és amit arra használunk, hogy adatokat szállítsunk egyik komponensből a másikba.
De vigyázzunk – a prop-ok csak egyirányú adatáramlásban (csak a szülőktől a gyermek komponensek felé) szállítanak adatokat. A kellékekkel nem lehetséges adatokat továbbítani gyermekről szülőre, vagy azonos szintű komponensek között.
Nézzük meg újra a fenti App( ) függvényt, hogy lássuk, hogyan adhatunk át adatokat kellékekkel.
Először is definiálnunk kell egy propot a Welcome komponensen, és hozzá kell rendelnünk egy értéket:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}A propok egyéni értékek, és dinamikusabbá teszik a komponenseket is. Mivel itt a Welcome komponens a gyermek, ezért a szülőjén (App) kell propsokat definiálnunk, így átadhatjuk az értékeket, és az eredményt egyszerűen a “name” prop elérésével kaphatjuk meg:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
A React fejlesztők tehát propsokat használnak az adatok átadására, és ezek hasznosak erre a feladatra. De mi a helyzet az adatok kezelésével? A kellékeket adatok átadására használják, nem pedig azok manipulálására. A jövőbeni bejegyzéseimben itt a freeCodeCamp-en foglalkozni fogok az adatok kezelésével a React segítségével.
Addig is, ha többet szeretnél megtudni a React & webfejlesztésről, nyugodtan iratkozz fel a YouTube csatornámra.
Köszönöm, hogy olvastál!