React komponensek

Az alap React alkalmazásunkban az App komponens így nézett ki. Van egy App() füvvényünk, ami egy egyes szintű címsort jelenít meg. Ha nem akarunk semmit megjeleníteni, használhatjuk a null elemet a return-ben.

function App() {
  return <h1>Hello World</h1>
}

export default App

function App() {

return <h1>Hello World</h1>

}

export default App

Alapvetően ha több elemet is használni szeretnénk, akkor tegyük bele őket egy fragment-be (üres tag-be)! Használhatjuk konkrétan a <Fragment> taget is, de akkor importálni kell! Tehát sokkal egyszerűbb simán üres taget használni.

Hogyan lehet jsx-ben kommentet használni? Így: {/* Komment */}
import { Fragment } from ‘react’;

function App() {
  return (
    <>
      <h1>React komponensek használata</h1>
      <h2>Címsor kettő, jó ez a React</h2>
     {/* Komment */}
    </>
  )
}

export default App

function App() {

return (

<h1>React komponensek használata</h1>

<h2>Címsor kettő, jó ez a React</h2>

{/* Komment */}

</>

)

}

export default App

Hogyan jelenítsük meg a tartalmat az index.html-ben? Nem muszáj az App.jsx-et és a main.jsx-et is használni, beletehetnénk a tartalmunkat közvetlenül a main.jsx-be is! De ezt nem szoktuk, mert több komponens esetén átláthatatlan lesz a kód.

import React from 'react'
import ReactDOM from 'react-dom/client'

function App() {
  return <h1>React komponens példa</h1>
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import React from 'react'

import ReactDOM from 'react-dom/client'

function App() {

return <h1>React komponens példa</h1>

}

ReactDOM.createRoot(document.getElementById('root')).render(

<React.StrictMode>

<App />

</React.StrictMode>,

)

Több komponens használata

Készítsünk egy új fájlt az src mappában, TesztKomponensek.jsx néven! Ennek tartalmát kell importálni az app.jsx-be, majd a return-ben meghívni.

export default function TesztKonponensek() {
    return (
      <>
        <KomponensEgy />
        <KomponensKetto />
        <KomponensHarom />
      </>
    );
  }
  
  function KomponensEgy() {
    return <p> Első komponensünk.  </p>;
  }
  
  function KomponensKetto() {
    return <p> Második komponensünk. </p>;
  }
  
  function KomponensHarom() {
    return <p>Harmadik komponensünk.</p>;
  }

export default function TesztKonponensek() {

return (

</>

);

}

function KomponensEgy() {

return <p> Első komponensünk. </p>;

}

function KomponensKetto() {

return <p> Második komponensünk. </p>;

}

function KomponensHarom() {

return <p>Harmadik komponensünk.</p>;

}

Nézzük az app.jsx-et:

import TesztKomponensek from './TesztKomponensek.jsx';
function App() {
  return (
    <>
    <TesztKomponensek />
     {/* Komment */}
    </>
  )
}

export default App

import TesztKomponensek from './TesztKomponensek.jsx';

function App() {

return (

{/* Komment */}

</>

)

}

export default App

Változó, mint komponens

jsx-ben akár egy változó is lehet egy komponens!

function App() {
  const valtozo= <h1>Ilyet is lehet?</h1>
  return valtozo
}

function App() {

const valtozo= <h1>Ilyet is lehet?</h1>

return valtozo

}

Változó kiíratásánál { } zárójelet kell használni. pl: adjunk egy css osztályt az egyik bekezdésnek, amibe ráadásul egy változó tartalmát írjuk ki! Jsx-ben a class foglalt utasítás neve, ezért className-et használunk!

const lowercaseClass = 'text-lowercase';
const szoveg= 'Formázott szöveg';
const App = <p className={lowercaseClass}>{szoveg}</p>;

const lowercaseClass = 'text-lowercase';

const szoveg= 'Formázott szöveg';

const App = <p className={lowercaseClass}>{szoveg}</p>;

Nézzünk meg egy bonyolultabb példát! Jelenítsük meg egy listában egy tömb elemeit! A map függvényt hazsnáljuk, hogy végigmenjünk a tömb elemein. Minden elemnek szükséges adni egy kulcsot, amivel a React a gyermek elemeket azonosítani tudja. (ha később pl. szeretnénk egy lista elemet törölni, módosítani…)

function Dolgozoink() {
    const dolgozok = [
      { id: 1, nev: 'István', munkaKor: 'Web Developer' },
      { id: 2, nev: 'János', munkaKor: 'Web Designer' },
      { id: 3, nev: 'Elek', munkaKor: 'Team Leader' },
    ]
  
    return (
      <>
        <p>Munkatársaink:</p>
        <ul>
        {
          dolgozok.map(function(dolgozo, index){            
            return (
              <li key={index}> Név: {dolgozo.nev} munkakör: {dolgozo.munkaKor} </li>
            )
          })
        }
        </ul>
      </>
    )
  }

function Dolgozoink() {

const dolgozok = [

{ id: 1, nev: 'István', munkaKor: 'Web Developer' },

{ id: 2, nev: 'János', munkaKor: 'Web Designer' },

{ id: 3, nev: 'Elek', munkaKor: 'Team Leader' },

]

return (

<p>Munkatársaink:</p>

<ul>

{

dolgozok.map(function(dolgozo, index){

return (

<li key={index}> Név: {dolgozo.nev} munkakör: {dolgozo.munkaKor} </li>

)

})

}

</ul>

</>

)

}

Props (properties)

A React props a komponensek közötti adatátadásra szolgál. A props tartalmazhat adatokat, függvényeket is. Az első példában egy szülőkomponens adatokat ad át egy gyermekkomponensnek. Ezek az adatok csak olvashatók a gyermekkomponens számára, tehát nem módosíthatók. (immutable).

function SzuloKomponens() {
    return <GyermekKomponens uzenet="Helló, React!" />;
}
function GyermekKomponens(props) {
    return <h1>{props.uzenet}</h1>;
}

function SzuloKomponens() {

return <GyermekKomponens uzenet="Helló, React!" />;

}

function GyermekKomponens(props) {

return <h1>{props.uzenet}</h1>;

}

Ennek a kódnak az eredménye: Helló, React!

Olvashatóbb, áttekinthetőbb, ha destructuring-ot használunk:

function SzuloKomponens() {
    return <GyermekKomponens uzenet="Helló, React!" />;
}
function GyermekKomponens({ uzenet }) {
    return <h1>{uzenet}</h1>;
}

function SzuloKomponens() {

return <GyermekKomponens uzenet="Helló, React!" />;

}

function GyermekKomponens({ uzenet }) {

return <h1>{uzenet}</h1>;

}

Props, default (alapértelmezett) értékkel. Lehetőség van alapértelmezett értéket megadni. Tehát a SzuloKomponensben simán hívjuk meg, paraméter nélkül, akkor az alapértelmezett prop kerül kiírásra: Nincs üzenet.

function SzuloKomponens() {
    //return <GyermekKomponens uzenet="Helló, React!" />;
     return <GyermekKomponens />;
}

function GyermekKomponens({ uzenet }) {
    return <h1>{uzenet}</h1>;
}
GyermekKomponens.defaultProps = {
    uzenet: "Nincs üzenet",
};

function SzuloKomponens() {

//return <GyermekKomponens uzenet="Helló, React!" />;

return <GyermekKomponens />;

}

function GyermekKomponens({ uzenet }) {

return <h1>{uzenet}</h1>;

}

GyermekKomponens.defaultProps = {

uzenet: "Nincs üzenet",

};

Ha a props fügvény, akkor lehetőség van a gyermek komponensből a szülő kompponensnek eseményt visszaküldeni. Tehát itt a a szülő komponens eseménykezelője fut le:

function SzuloKomponens() {
    const kezelo = () => alert("Esemény történt!");
    return <GyermekKomponens onClick={kezelo} />;
}

function GyermekKomponens({ onClick }) {
    return <button onClick={onClick}>Kattints rám!</button>;
}

function SzuloKomponens() {

const kezelo = () => alert("Esemény történt!");

return <GyermekKomponens onClick={kezelo} />;

}

function GyermekKomponens({ onClick }) {

return <button onClick={onClick}>Kattints rám!</button>;

}

Komponens állapota – state

Egy komponensnek lehet állapota, képes pl. adatokat tárolni. Az állapot kezelésére a React useState() függvényét használjuk.

import { useState } from 'react'

function SzuloKomponens() {
  const [nev, setNev] = useState('János')
  return <h1>Hello {nev}</h1>
}

import { useState } from 'react'

function SzuloKomponens() {

const [nev, setNev] = useState('János')

return <h1>Hello {nev}</h1>

}

Egészítsük ki egy gombbal a kódot! A gomb lenyomására meghívjuk a setName() függvényt.

function Teszt() {
  const [nev, setNev] = useState('Elek')
  return (
    <>
      <h1>Hello {nev}</h1>
      <button onClick={() => setNev('Béla')}>Név csere!</button>
    </>
  )
}

function Teszt() {

const [nev, setNev] = useState('Elek')

return (

<h1>Hello {nev}</h1>

<button onClick={() => setNev('Béla')}>Név csere!</button>

</>

)

}

Nézzünk egy másik példát! Generáljunk gombnyomásra 1-100 közötti random számot! A random szám értékét a setVeletlenSzam állapot módosító függvénnyel tudjuk beállítani. Jsx-ben nyugodtan használhatunk inline css-t is, nézzünk is meg. Annyi a megkötés, hogy dupla kapcsos zárójelet kell használni hozzá!

import React, { useState } from 'react';

function RandomSzam() {
    // inicializálás, VeletlenSzam értéke 0
    const [VeletlenSzam, setVeletlenSzam] = useState(0);

    // Véletlenszám generáló függvény
    const szamGeneralas = () => {
        const szamUj = Math.floor(Math.random() * 100) + 1; // 1 és 100 között
        setVeletlenSzam(szamUj); // Állapot frissítése
    };

    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
            <h1>Véletlenszám: {VeletlenSzam}</h1>
            <button onClick={szamGeneralas} style={{ padding: '10px 20px', fontSize: '16px' }}>
                Generálj új számot
            </button>
        </div>
    );
}

export default RandomSzam;

import React, { useState } from 'react';

function RandomSzam() {

// inicializálás, VeletlenSzam értéke 0

const [VeletlenSzam, setVeletlenSzam] = useState(0);

// Véletlenszám generáló függvény

const szamGeneralas = () => {

const szamUj = Math.floor(Math.random() * 100) + 1; // 1 és 100 között

setVeletlenSzam(szamUj); // Állapot frissítése

};

return (

<h1>Véletlenszám: {VeletlenSzam}</h1>

Generálj új számot

</button>

</div>

);

}

export default RandomSzam;

Props (properties)

Komponens állapota – state

Kategóriák

Friss bejegyzések

Playwright teszt

Python Lista, szótár és halmaz értelmezés (list comprehension, dict/set comprehension)