React komponensek, gyakorlás

Ebben a tutorialban megnézzük, hogyan lehet egy hagyományos weboldalt komponensekre szétszedni.

Kiindulási alap: Kiadó nyaraló a Mátrában weboldal.

Feladat: a weblap fejlécét, törzsét és láblécét helyettük el külön-külön komponensekbe! A fejlécbe helyezzünk el egy gombot, ami random választ 4 db idézet közül!

Készítsünk egy új React projektet!

Az src mappába hozzunk létre egy components mappát, ebbe pedig a Footer.jsx, Main.jsx és Header.jsx üres fájlokat! Az assets mappába másold be a weblaphoz tartozó képeket!

Innen egész egyszerű: a <header> -ben található tartalmat másoljuk meg a Header.jsx-be. a <main> tartalmát a Main.jsx-be, a <footer> tartalmát a Footer.jsx-be! A <head> tartalmát, címet, meta adatokat az index.html fájlban tudjuk megadni. Tehát a fájlok tartalma:

Header.jsx

import React, { useState } from 'react';

const Header = () => {
  const [idezet, setIdezet] = useState('');

  const idezetek = [
    '„Aki ma hegyeket mozgat, egykor kavicsokkal kezdte.” — Konfuciusz',
    '„A hegyeket csak kanyargós ösvényeken lehet megmászni.” — Johann Wolfgang Goethe',
    '„Mindenki a hegy csúcsán szeretne élni, nem is sejtvén, hogy a valódi boldogság éppen abban rejlik, ahogyan oda feljutunk.” — Gabriel García Márquez',
    '„Soha ne értékeld egy hegy magasságát, mielőtt felérnél a csúcsra! Csak azután fogod látni, hogy milyen alacsony volt.” — Dag Hammarskjöld',
  ];

  const handleClick = () => {
    const randomIndex = Math.floor(Math.random() * idezetek.length);
    setIdezet(idezetek[randomIndex]);
  };

  return (
    <header>
      <h1>Kiadó nyaraló a Mátrában</h1>
      <h2>Mátraszentimre csendes részén, üdülőövezetben nyaraló kiadó.</h2>
      <button onClick={handleClick}>Mutass egy idézetet!</button>
      {idezet && <p style={{ marginTop: '1rem', fontStyle: 'italic' }}>{idezet}</p>}
    </header>
  );
};

export default Header;

import React, { useState } from 'react';

const Header = () => {

const [idezet, setIdezet] = useState('');

const idezetek = [

'„Aki ma hegyeket mozgat, egykor kavicsokkal kezdte.” — Konfuciusz',

'„A hegyeket csak kanyargós ösvényeken lehet megmászni.” — Johann Wolfgang Goethe',

'„Mindenki a hegy csúcsán szeretne élni, nem is sejtvén, hogy a valódi boldogság éppen abban rejlik, ahogyan oda feljutunk.” — Gabriel García Márquez',

'„Soha ne értékeld egy hegy magasságát, mielőtt felérnél a csúcsra! Csak azután fogod látni, hogy milyen alacsony volt.” — Dag Hammarskjöld',

];

const handleClick = () => {

const randomIndex = Math.floor(Math.random() * idezetek.length);

setIdezet(idezetek[randomIndex]);

};

return (

<h1>Kiadó nyaraló a Mátrában</h1>

<h2>Mátraszentimre csendes részén, üdülőövezetben nyaraló kiadó.</h2>

<button onClick={handleClick}>Mutass egy idézetet!</button>

{idezet && <p style={{ marginTop: '1rem', fontStyle: 'italic' }}>{idezet}</p>}

</header>

);

};

export default Header;

Main.jsx

import React from 'react';
import haz1 from '../assets/haz1.jpg';
import haz2 from '../assets/haz2.jpg';
import haz3 from '../assets/haz3.jpg';
import haz4 from '../assets/haz4.jpg';


const Main = () => (
  <main>
    <b>Jellemzők:</b>
    <ul>
      <li>350 négyszögöles parkosított kert</li>
      <li>téglaépítésű ház</li>
      <li>téliesített, gázkonvektoros fűtés</li>
      <li>négy darab kétágyas szoba</li>
      <li>nappali, étkező, konyha, fürdőszoba</li>
      <li>kocsibeálló négy autó részére</li>
    </ul>
    <p><b>Telefon:</b> +36 10 11-22-333</p>
    <p><b>e-mail:</b> kiado@matrai-haz.hu</p>
    <p><b>Részletes leírás és képek:</b></p>
    <p>
      A ház lenti részén találhatóak a közös helyiségek, és két szoba. Az
      emeleten helyezkedik el további két szoba. Minden szobában két ágy
      található. Ágyneműt és törölközőt biztosítunk. Az étkezőben 8 személyes
      asztal áll, a konyhában 8 fő részére található étkészlet.
    </p>
    <div id="kepek">
      <a href={haz1} target="_blank" rel="noopener noreferrer">
        <img src={haz1} width="150" height="120" alt="Haz 1" />
      </a>
      <a href={haz2} target="_blank" rel="noopener noreferrer">
        <img src={haz2} width="150" height="120" alt="Haz 2" />
      </a>
      <a href={haz3} target="_blank" rel="noopener noreferrer">
        <img src={haz3} width="150" height="120" alt="Haz 3" />
      </a>
      <a href={haz4} target="_blank" rel="noopener noreferrer">
        <img src={haz4} width="150" height="120" alt="Haz 4" />
      </a>
    </div>
    <p>
      A ház legalább két éjszakára foglalható, rövidebb időre nem! Áraink:
    </p>
    <div id="tablazat">
      <table>
        <thead>
          <tr>
            <th>Időtartam</th>
            <th>1-4 fő esetén</th>
            <th>5-8 fő esetén</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2 éjszakára</td>
            <td>48.000.- Ft</td>
            <td>64.000.- Ft</td>
          </tr>
          <tr>
            <td>3 éjszakára</td>
            <td>67.500.- Ft</td>
            <td>90.000.- Ft</td>
          </tr>
          <tr>
            <td>4 éjszakára</td>
            <td>84.000.- Ft</td>
            <td>112.000.- Ft</td>
          </tr>
          <tr>
            <td>5 éjszakára</td>
            <td>97.500.- Ft</td>
            <td>130.000.- Ft</td>
          </tr>
          <tr>
            <td>6 éjszakára</td>
            <td>108.000.- Ft</td>
            <td>144.000.- Ft</td>
          </tr>
          <tr>
            <td>7 éjszakára</td>
            <td>115.500.- Ft</td>
            <td>154.000.- Ft</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p>7 éjszakánál hosszabb tartózkodás esetén kérje egyedi ajánlatunkat!</p>
  </main>
);

export default Main;

import React from 'react';

import haz1 from '../assets/haz1.jpg';

import haz2 from '../assets/haz2.jpg';

import haz3 from '../assets/haz3.jpg';

import haz4 from '../assets/haz4.jpg';

const Main = () => (

<main>

<b>Jellemzők:</b>

<ul>

<li>350 négyszögöles parkosított kert</li>

<li>téglaépítésű ház</li>

<li>téliesített, gázkonvektoros fűtés</li>

<li>négy darab kétágyas szoba</li>

<li>nappali, étkező, konyha, fürdőszoba</li>

<li>kocsibeálló négy autó részére</li>

</ul>

<p><b>Telefon:</b> +36 10 11-22-333</p>

<p><b>e-mail:</b> kiado@matrai-haz.hu</p>

<p><b>Részletes leírás és képek:</b></p>

<p>

A ház lenti részén találhatóak a közös helyiségek, és két szoba. Az

emeleten helyezkedik el további két szoba. Minden szobában két ágy

található. Ágyneműt és törölközőt biztosítunk. Az étkezőben 8 személyes

asztal áll, a konyhában 8 fő részére található étkészlet.

</p>

</a>

</a>

</a>

</a>

</div>

<p>

A ház legalább két éjszakára foglalható, rövidebb időre nem! Áraink:

</p>

<table>

<thead>

<tr>

<th>Időtartam</th>

<th>1-4 fő esetén</th>

<th>5-8 fő esetén</th>

</tr>

</thead>

<tbody>

<tr>

<td>2 éjszakára</td>

</tr>

<tr>

<td>3 éjszakára</td>

</tr>

<tr>

<td>4 éjszakára</td>

</tr>

<tr>

<td>5 éjszakára</td>

</tr>

<tr>

<td>6 éjszakára</td>

</tr>

<tr>

<td>7 éjszakára</td>

</tr>

</tbody>

</table>

</div>

<p>7 éjszakánál hosszabb tartózkodás esetén kérje egyedi ajánlatunkat!</p>

</main>

);

export default Main;

Footer.jsx

import React from 'react';
import kirandulas from '../assets/kirandulas.gif';

const Footer = () => (
  <footer>
    <div>
      <img src={kirandulas} width="160" alt="Programajánló" />
    </div>
    <div>
      <p>Programajánló:</p>
      <ol>
        <li>10 túra a Felső-Mátrában</li>
        <li>Kirándulástippek a Mátrában</li>
        <li>Adrenalin Park - Mátrafüred</li>
      </ol>
    </div>
  </footer>
);

export default Footer;

import React from 'react';

import kirandulas from '../assets/kirandulas.gif';

const Footer = () => (

<div>

</div>

<div>

<p>Programajánló:</p>

<ol>

<li>10 túra a Felső-Mátrában</li>

<li>Kirándulástippek a Mátrában</li>

<li>Adrenalin Park - Mátrafüred</li>

</ol>

</div>

</footer>

);

export default Footer;

App.jsx tartalma

Az App.jsx-be importáljuk a komponenseket, és itt kerülnek ‘meghívásra’ is, a div-ben. Szintén itt importáljuk az eredeti css-t.

import React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import './index.css';

const App = () => (
  <div id="tartalom">
    <Header />
    <Main />
    <Footer />
  </div>
);

// A renderelési logika itt történik
const rootElement = document.getElementById('root');
if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

export default App;

import React from 'react';

import { StrictMode } from 'react';

import { createRoot } from 'react-dom/client';

import Header from './components/Header';

import Main from './components/Main';

import Footer from './components/Footer';

import './index.css';

const App = () => (

</div>

);

// A renderelési logika itt történik

const rootElement = document.getElementById('root');

if (rootElement) {

createRoot(rootElement).render(

<App />

</StrictMode>

);

}

export default App;

Módosítsuk az index.html fájlt is!

index.html tartalma: itt tuladjdonképpen az App.jsx-et importáljuk, azon keresztül pedig a komponenseket. Az index.html-ben megadhatjuk az oldal címét, meta elemeket.

<!doctype html>
<html lang="hu">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mátrai nyaraló</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/App.jsx"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Mátrai nyaraló</title>

</head>

<body>

</body>

</html>

React komponensek, gyakorlás

Kategóriák

Friss bejegyzések

Playwright teszt

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