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!