A React az egyik legnépszerűbb JavaScript könyvtár a felhasználói felületek felépítéséhez.
Ha front-end fejlesztővé akar válni, vagy webfejlesztő munkát szeretne találni, valószínűleg hasznot húzna a React alapos elsajátításából.
Ebben a bejegyzésben megtanulja a React néhány alapját, például egy összetevő létrehozását, a JSX szintaxist és a kellékeket. Ha nincs vagy csak kevés tapasztalata van a React-nal kapcsolatban, ez a bejegyzés az Ön számára.
Kezdőknek itt olvashatja el a React telepítését.
Mi a JSX?
Az első dolog, amire rá fog jönni az első React projekt telepítése után, az az, hogy a JavaScript funkció néhány HTML kódot ad vissza:
function App() { return ( Edit src/App.js
and save to reload.
); }
Ez egy speciális és érvényes szintaxis kiterjesztés a React számára, amelyet JSX-nek (JavaScript XML) hívnak. A frontendhez kapcsolódó projektekben általában a HTML, CSS és JavaScript kódokat külön fájlokban tartjuk. A React-ben azonban ez 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 számunkra a HTML és a JavaScript együttes írását ugyanabba a fájlba, mint a fenti példában. A CSS-t azonban elkülönítheti egy másik fájlban.
Kezdetben a JSX kissé furcsának tűnhet. De ne aggódj, megszokod.
A JSX nagyon praktikus, mert bármilyen HTML kódot (logikát, függvényt, változót és így tovább) a HTML-ben közvetlenül is végrehajthatunk göndör zárójelek {} használatával, például:
function App() { const text = 'Hello World'; return ( {text}
); }
HTML-címkéket is rendelhet a JavaScript-változókhoz:
const message = React is cool!
;
Vagy visszaküldheti a HTML-t a JavaScript logikájába (például if-else esetek):
render() { if(true) { return YES
; } else { return NO
; } }
Nem térek ki a JSX további részleteire, de mindenképpen vegye figyelembe a következő szabályokat a JSX írásakor:
- A HTML és az összetevő címkéknek mindig zárva kell lenniük
- Egyes attribútumok, mint a „class” vált „className” (mert osztály utal JavaScript osztályokat), „Tabindex” válik „Tabindex” és kell írni teveEsetnek
- Egynél több HTML-elemet nem adhatunk vissza, ezért feltétlenül csomagolja be őket egy szülőcímkébe:
return ( Hello
World
);
- vagy alternatív megoldásként üres címkékkel csomagolhatja őket:
return ( Hello
World
);
Megtekintheti a React for Beginners oktatóanyagomat is:
Mik azok a funkcionális és osztályú alkatrészek?
Miután megszokta a JSX szintaxist, a következő megértendő dolog a React komponens alapú felépítése.
Ha újra meglátogatja a bejegyzés tetején található példakódot, látni fogja, hogy a JSX kódot egy függvény adja vissza. De az App () függvény nem hétköznapi függvény - valójában egy összetevő. Mi tehát az alkatrész?
Mi az alkotóelem?
Az összetevő egy független, újrafelhasználható kódblokk, amely az UI-t kisebb darabokra osztja. Például, ha a Twitter felhasználói felületét a React-lel készítenénk:

Ahelyett, hogy a teljes felhasználói felületet egyetlen fájl alá építenénk, az összes (pirosal jelölt) szakaszt fel tudjuk osztani, és el kell osztanunk kisebb, független darabokra. Más szavakkal, ezek komponensek.
A React kétféle összetevővel rendelkezik: funkcionálisés osztály. Nézzük meg most mindegyiket részletesebben.
Funkcionális alkatrészek
A React első és ajánlott komponens típusa 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 dokumentumai szerint az alábbi funkció érvényes funkcionális komponens:
function Welcome(props) { return Hello, {props.name}
; }
Alternatív megoldásként létrehozhat egy funkcionális komponenst a nyílfüggvény-meghatározással:
const Welcome = (props) => { return Hello, {props.name}
; }
Ez a függvény egy érvényes React komponens, mert egyetlen „props” (ami a tulajdonságokat jelöl) objektum argumentumot fogad el adatokkal, és egy React elemet ad vissza. -
reactjs.org
Az összetevők későbbi használatához először exportálnia kell, hogy máshova importálja:
function Welcome(props) { return Hello, {props.name}
; } export default Welcome;
Az importálás után meghívhatja az összetevőt, mint ebben a példában:
import Welcome from './Welcome'; function App() { return ( ); }
Tehát egy funkcionális komponens a React-ben:
- egy JavaScript / ES6 függvény
- vissza kell adnia egy React elemet (JSX)
- mindig nagybetűvel kezdődik (elnevezési szokás)
- szükség esetén a kellékeket veszi paraméterként
Mik az osztály alkotóelemei?
A második komponenstípus az osztálykomponens. Az osztálykomponensek olyan ES6 osztályok, amelyek JSX-t adnak vissza. Az alábbiakban ugyanazt a Welcome funkciót láthatja, ezúttal osztálykomponensként:
class Welcome extends React.Component { render() { return Hello, {this.props.name}
; } }
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 érdemes használni az osztály alkotóelemeit?
Az "állapot" miatt osztálykomponenseket használtunk. A React régebbi verzióiban (<16.8 verzió) a funkcionális összetevők belsejében nem lehetett állapotot használni.
Ezért funkcionális összetevőkre volt szükségünk csak a felhasználói felület megjelenítéséhez, míg osztálykomponenseket használtunk az adatkezeléshez és néhány további művelethez (például az életciklus-módszerekhez).
Ez megváltozott a React Hook bevezetésével, és most már funkcionális komponensekben is használhatunk állapotokat. (A következő bejegyzéseimben az állapotot és a horgokat fogom ismertetni, ezért egyelőre ne bánja őket).
Egy osztály alkotóeleme:
- egy ES6 osztály, akkor egy komponens lesz, ha „kiterjeszti” a React komponenst.
- ha szükséges, elveszi a Propst (a konstruktorban)
- renderrel kell rendelkeznie ()módszer a JSX visszaadására
Mik a kellékek a React-ben?
A komponensek másik fontos fogalma a kommunikáció módja. A React-nek van egy speciális objektuma, az úgynevezett prop (tulajdonképpeni tulajdonság), amelyet az adatok egyik komponensből a másikba történő továbbítására használunk.
De légy óvatos - csak egyirányú áramlásban támogatja az adatokat (csak a szülőtől a gyermekig terjedő összetevőkből). A rekvizitumok segítségével nem lehet adatokat továbbítani a gyermektől a szülőhöz vagy az azonos szintű összetevőkhöz.
Nézzük át a fenti App () függvényt, hogy lássuk, hogyan továbbíthatunk adatokat a kellékekkel.
Először meg kell határoznunk egy támaszt az üdvözlő komponensen, és hozzá kell rendelnünk egy értéket:
import Welcome from './Welcome'; function App() { return ( ); }
A támaszok egyéni értékek, és dinamikusabbá teszik az összetevőket is. Mivel a Welcome komponens itt a gyermek, meg kell határoznunk a kellékeket a szülőjén (App), így átadhatjuk az értékeket és az eredményt egyszerűen elérhetjük a prop "név" elérésével:
function Welcome(props) { return Hello, {props.name}
; }

A React kellékek valóban hasznosak
Tehát a React fejlesztői támaszokat használnak az adatok továbbításához, és hasznosak ehhez a munkához. De mi a helyzet az adatok kezelésével? A támaszokat az adatok továbbítására, nem pedig manipulálására használják. Az adatkezelést a React segítségével fogom kitérni a jövőbeni bejegyzéseimre, itt a freeCodeCamp-on.
Addig is, ha többet szeretne megtudni a React & Web fejlesztésről, iratkozzon fel nyugodtan a YouTube-csatornámra.
Köszönöm, hogy elolvasta!