Előzmények: a react telepítésén már túl vagyunk, úgyhogy innen tudjuk folytatni az ismerkedést, akár úgy, hogy a Laravel-lel együtt használjuk, akár úgy, hogy egy új React projektet hozunk létre (itt most ez utóbbi történik majd meg).

Új kiindulási (nem Laravel alapú) projekt

https://github.com/gludovatza/my-first-react-app

Ez egy úgynevezett Single-Page Application (SPA), amit lehet akár clone-ozni is, mert ebben fogjuk elvégezni az alábbi (és közeljövőbeli) fejlesztéseket. Aki kicsit jobban át szeretné látni, hogy mi is a különbség a hagyományos webes alkalmazások és az SPA-k között, annak ezt a videót ajánlom:

Ezekután indítsuk is el az alkalmazásunkat:

npm start

Ezután, ha bármilyen módosítást hajtunk majd végre a fájljainkban és mentjük őket, akkor egyből frissülni is fog a böngészőben a http://localhost:3000-es webcímen a projektünk. A böngészőben ezt kell látnunk:

Mi is az a komponens?

A komponensek lehetővé teszik számunkra, hogy a felhasználó által látott felület egyes elemeit újra felhasználhassuk, és segítik, hogy ezeket külön, a többitől elzártan tudjuk kezelni. Alapvetően a komponensek úgy működnek, mint a Javascript függvények. Lehet nekik bemenetként (input) adatokat adni, melyeket "prop"-nak (ezekről a jövőben lesz szó) hívunk és a React a "függvényből" egy leírást ad vissza, hogy mi jelenjen meg a képernyőn.

Komponenst létrehozni két módon is lehetséges: function és class formában is. Elsőnek megnézzük, hogy is néz ki maga a komponens létrehozása mind a két megoldással.

Function formában az alábbi módon hozható létre egy olyan komponens, mely még statikus, azaz a megjelenítéséhez nem kell külső adat és így nem is függ tőlük:

function first(){
  return (
    <div>
      Üdvözöllek az első komponensednél
    </div>
  )
}

export default first

Ugyanez a komponens megoldása class formában az alábbi módon valósítható meg:

class First extends React.Component {
  render() {
    return (
      <h1>
        Én vagyok az első komponensed!
      </h1>
    );
  }
}

A React fejlesztők a lehető legtöbb esetben a function komponens formáját használják a jövőben tanulandó Hook-ok és State-ek miatt. Így a jövőben előszeretettel használjuk ezt mi is. Viszont nem mehetünk el a két módszer összehasonlítása mellett sem, így az alábbi táblázatba összeszedtem egyszerűsítve a különbségeket nektek.

Hasznos kiegészítő VSCode-hoz

Mielőtt belekezdenénk a React-os munkába, előtte érdemes telepítenünk ezt a kiegészítőt a VSCode-hoz, mert megkönnyítheti a munkánkat: ES7+ React/Redux/React-Native snippets (több mint 5 millióan telepítették már).

Néhány példa

Bevezetőnek hoztam egy egyszerű példát a statikus komponens létrehozására. Hozzunk létre egy egyszerű "kártya" komponenst, amely üdvözöl az oldalon. Első lépésként hozzunk létre egy JSX fájl-t a src/components mappában. Ezt az alábbi módon tehetjük meg:

Legyen a neve: card.jsx (ha szükséges, hozzuk létre előtte az src mappában a components mappát is).

Ha a fájlon belül a "rafce" szöveget beírjuk és egy TAB-ot nyomunk a program legenerálja nekünk az alap function alapú komponens-t. Majd az alább kódot írjuk meg:

import React from 'react'

const Card = () => {
  return (
    <div>
      <h1>Statikus komponens</h1>
      <span>Én vagyok az első komponensed! </span>
      <button>Komponens gombja</button>
    </div>
  )
}

export default Card

Itt látható, hogy az összes HTML tudást fel lehet használni, amelyet már ismerünk.

Egyelőre még nem jelenik meg az oldalon mentés után, mivel nem importáltuk be a fő fájlba (src/App.js), és nem adtuk hozzá a return metódushoz a Card koponenst.

Ezt az alábbi módon tudjuk megtenni:

import Card from './components/card'

function App() {
  return (
    <div className="App">
      <Card/>
    </div>
  );
}

export default App;

Az eredmény a weboldalon:

Ezt a komponens beszúrást akár többször is megismételhetjük és látjuk, hogy az oldalon valóban többször jelenik meg a komponens.

import Card from './components/card'

function App() {
  return (
    <div className="App">
      <Card/>
      <Card/>
      <Card/>
      <Card/>
    </div>
  );
}

export default App;

Így még nem tűnik viszont annyira szépnek az oldal egyelőre, így adjunk hozzá CSS-t.

React-ban a komponensek, illetve a különböző HTML tag-ek class nevet tudnak csak kapni, melyet className="class neve" módon kell megadni nekik.

Hozzunk létre a CSS fájloknak az átláthatóság kedvéért egy css mappát az src-n belül.

Itt hozzuk létre a card.css fájlt, majd másoljuk bele az alábbi kódot minimális "design"-nak:

.card {
    text-align: center;
}
.gomb{
    background-color:green;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:5px;
}

Ilyenkor az alábbi fájlt relatív címzéssel érjük el az aktuális komponens fájljában, illetve a fentebb említett módon érjük el a class-okat (figyeljünk a div és a button tag-ek className attribútumára):

import React from 'react';
import '../css/card.css';

const Card = () => {
  return (
    <div className="card">
      <h1>Statikus komponens</h1>
      <span>Én vagyok az első komponensed! </span>
      <button className="gomb">Komponens gombja</button>
    </div>
  )
}

export default Card

Nagyszerű, már tudunk saját statikus komponenst létrehozni, és kedvünk szerint design-olni, amelyet bármennyiszer, bárhol meg tudunk jeleníteni!

Nincs más hátra, mint akár saját ötlet alapján pár feladatot megvalósítani a következő blog bejegyzésig, ahol már a dinamikus komponensek létrehozását (külső adatok megjelenítése egy-egy komponensben) fogjuk átvenni... tartsatok velünk!

Az itteni módosítások ebben a Github commit-ben érhetők el.