React funkcionális alkatrészek, kellékek és JSX - React.js oktatóanyag kezdőknek

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!