Skip to content
Kezdőlap » React komponensek dizájnolása – 1.

React komponensek dizájnolása – 1.

A React komponensek dizájnolásának többféle módja is van.

Bármelyiket is legyen a szerencsés kiválasztott, a végén mindegyik mögött a CSS rejtőzik. A különbséget én abban találtam, hogy a csinosítást végezhetjük közvetlenül CSS-el, JavaScripttel (React), vagy valamilyen React-es csomag (library) felhasználásával.

Egyik sem nehéz. Most a „legalapabb” megközelítéssel kezdem, ha lehet ezt így mondani. Ez pedig az, amikor egyszerűen CSS fájl(ok)ba pakoljuk a stílusokat.

CSS + ReactJS

„HTML” a komponensben

Okés, ez igazából nem is HTML! Ez JavaScript, amit a React JSX-nek nevez. A JSX-ről bővebben itt találsz információt.

Ebben nincsen semmi hókuszpókusz. Van egy App komponensünk, ami valamit csinál. Például simán kiír valamit a böngészőbe:

function App() {
  return (
    <main>
      <div>
        <p>Hello <span className="world">World</span>!</p> 
      </div>
    </main>
  );
}

Látszik, hogy a return-on belüli JSX tartalmaz egy külső main elemet. Azon belül van egy div, ezen belül egy p és egy span. Én ez utóbbival le is spanoltam :), mert adtam neki egy className attribútumot. Vigyázat! Nem class-t! Ugyanis a class a JavaScriptben egy foglalt szó, amivel (ES6-ban bevezetett) osztályt lehet létrehozni. Mivel a JSX-ben JavaScript kódot írunk, ezért nem használhattam a class-t.

Az első fontos dolog tehát, amit meg kell jegyezni, hogy a React-ben egy „HTML” elemnek a className attribútummal adunk css osztályt.

Saját stíluslap a komponensnek: CSS

Példámban a komponenssel megegyezőkönyvtárban van egy App.css fájl, ami az App komponenssel kapcsolatos formázásokat tartalmazza. Ezt a stíluslapot bárminek elnevezhettem volna, de célszerű ugyanazt a nevet adni neki, mint amit a komponensnek is választottunk.

Ezt a fájlt a komponenshez tartozó fájlban importáljuk be:

import './App.css';

Ilyen egyszerű. Az elérési útban a ./ jelenti azt, hogy ugyanabból a könyvtárból akarom importálni a stílust, ahol a komponens is van.

Magában a stílus fájlban (a példában App.css) vannak a CSS utasítások, konkrétan most ez:

main {
  text-align: center;
  vertical-align: center;
  line-height: 100vh
}

main > div {
  color: red;
}

.world {
  font-weight: bold;
}

Itt sincs semmi trükk. Ez tiszta CSS. Meg lett adva valamilyen stílus a main elemnek, az azon belül levő div elemnek is. Illetve a „.world” névre keresztelt elemnek is megadtam egy kis formázást. Ennyi.

Működő példa

A könnyebb megértés érdekében itt található a működő példa.

Eredmény a böngészőben

A böngészőben megnézve egy teljesen középre igazított piros színű Hello World! fog köszönteni minket, amiben a World szó vastaggal van szedve.

Látható tehát, hogy egy abszolút érthető és faék egyszerűségű megoldása ez annak, hogy ne csak unalmas, szürke komponenseket bambuljunk a képernyőn, hanem szépen dizájnoltakat.

Címkék: