post header image

React fejlesztői élmény

Úgy éreztem, hogy pár gondolat kikívánkozik belőlem a React fejlesztésével kapcsolatosan és ennek eredményeként született ez a cikk. Az itt leírtak csupán az én személyes véleményemet tükrözik, a saját valóságomra reflektál, szóval érdemes kritikus szemmel olvasni, mert talán más React-es fejlesztőstársam ezeket teljesen máshogy éli meg.

Fejlesztőként az évek során lehetőségem volt több különböző JavaScript keretrendszerrel és könyvtárral dolgozni, de egyik sem kötötte le annyira a figyelmemet, mint a React.

Dolgok, amelyek örömmel töltenek el, amikor a React-el dolgozom

Ó, azok a komponensek!

Az egyik dolog, amit szeretek a React-ben, az a komponens alapú architektúra. Az összetett felhasználói felületek kisebb, újrafelhasználható darabokra bontása gyerekjáték. Valamilyen okból meg kell keresnem - "feature" keresés -, hogy a forráskódban az adott UI elem hol helyezkedik el, az pofon egyszerű. Könnyedén együttműködhetek más fejlesztőkkel is egy projekten. És ha mindez nem elég akkor kell arra gondolni, hogy hány és hány mások által írt csomaghoz és komponens könyvtárhoz nyúlhatok segítségért. A választás, hogy milyen eszközkészlettel dolgozunk magával von természetesen egy kis mérlegelést is, milyen értékeltsége, fenttartása, frissítési gyakorisága van a csomagnak és természetesen egyeznek-e a szükségleteimmel, amit az nyújtani képes.

A React fejlesztői közössége

A közösség aktív és segítőkész, és rengeteg dokumentáció és oktatóanyag áll rendelkezésre. Ráadásul a rengeteg harmadik féltől származó könyvtár és eszköz még élvezetesebbé teszi a React-tel történő munkavégzést. Nem ritkák a rendezvények, konferenciák a témában, melyeket nagy közönségfigyelem követ.

A szabadság

A szabadság melyet a React kínál, hogy nincs a kezem megkötve, hogy hogyan és pontosan milyen eszközökkel is oldjam meg az adott problémát egyenesen párját ritkítja. Nincs, hogy így kell, hogy működjön a routing, emígy csináld az adat lekérését, de a state management csak ekképpen jó, meg jaj az amúgy működhet csak... Hogy Te a Reactet csak önmagában szeretnéd használni, vagy igénybeveszel valamely React frameworköt is csak a fejlesztőn múlik, hogy hogyan ítéli meg ezt a kérdést a készítendő project ismeretében. Már kissé félve merem megemlíteni, hogy vanilla JS vagy Typescript használata is opcionális és e kérdést heves vita is övezi. A cikk írásakor elfogadott általános nézet szerint amennyiben nem TS-tel fejlesztesz React appot akkor nem vagy is vagy fejlesztő.

Sokan pontosan emiatt viseltetnek rossz érzésekkel a React irányában. Felteszik a kérdés, hogy mi a helyzet a nagy csapatok esetében, akik közös kódbázison dolgoznak, hogy milyen mappa struktúra, nevezéktan szerint készüljön a kód, mi a helyzet az enterprise appok építésével, etc..

Számomra nagy különbség van a között, hogy valamit kívülről rám erőltetnek, még ha az én érdekemet is szolgálják és a között, hogy én eldöntöttem, hogy ezt és ezt preferálom a másik megoldással szemben, mert ez az ami nekem és az appomnak a legjobb megoldásnak tűnik.

Amennyiben a React által nyújtott további előnyökről szeretnél olvasni ezt megteheted korábbi cikkemből.

Ám van, amikor savanyú a szőlő

Tanulási görbe

Nos, őszinte leszek, a React tanulási görbéje meglehetősen meredek lehet az abszolút kezdő szintet elhagyva, különösen, ha még a fejlesztő nem ismeri a JavaScript ökoszisztémát. Egy kezdőnek sok időt kellett töltenie a JSX és a React hookok megismerésével, de amint rákap az ember, minden azonnal sínre kerül.

State management kérdéskör

Másik nehézkesebb téma amikor a kezdő fejlesztő szembe találkozik a state management kérdéskörével. Igényel egy nagyobb levegővételt és dedikáltságot, hogy ezt a lécet megugorva képessé váljon teljesértékű fejlesztőként tevékenykedni az alkalmazáson.

Régi patternek, megoldások

Tegyül fel, hogy ha 2023-as évben a fejlesztő segítséget keresgél a neten, akkor találkozik a class componentekkel, lifecycle methodokkal (amelyeken a React nyugszik, a mai napig használhatók, csak kikoptak a hookoknak köszönhetően) és jogosan teheti fel hirtelen a kérdést, hogy ezek kik és mik? Pedig még alig telt egy pár év és, hogy ezek léteztek kizárólagosan (bocsi a kitekintésért).

És még akkor nem is beszéltünk másik misztikus múltba burkolózó render props meg a higher order component kérdésekről. Vannak dolgok, amelyeket jobb nem is bolygatni, hiszen semmi jó sem származhat belőle.

DOM versus Virtual DOM

Hát nehéz időket él meg a fejlesztő amikor először kell neki a React appjába D3.js-t vagy hasonlót intergrálnia. Amikor rájön a fejlesztő, hogy mekkora kalamajkába keveredett! Hogy én, hogy néztem magam elé anno, hogy mi is történik, az külön megér egy misét. Hogy a D3.js az a DOMot változtatja, az ő React appja pedig erről mit sem tud, mert az meg figyel a Virtual DOMra (props, state, parent változásoktól re-renderelődik a komponens).

const TestComponent = () => {
    const [backgroundColor, setBackgroundColor] = useState('')

    const handleColorChange = () => {
        setBackgroundColor('red')
    }

    const handleD3Change = () => {
        d3.select("#myID").style("background-color", "green")
    }

    return (
        <div id="myID" style={{ backgroundColor }}>
            <button
                type='button'
                onClick={handleColorChange}
            >
                Változzon vörösre a háttér
            </button>
            <button
                type='button'
                onClick={handleD3Change}
            >
                Változzon zöldre a háttér D3-at használva
            </button>
            <div>
                Hello World!
            </div>
        </div>
    )
}
  1. Változtassuk a hátteret vörösre
  2. Változtassuk a hátteret zöldre a DOMot módosítva, D3-al
  3. Változtassuk a hátteret vörösre ismét a rendes Reactes utat járva
  4. És jöhet az értetlenkedés

Áthidaló megoldások természetesen léteznek, de hogy azok nem adják magukat az is biztos és nem képezik ezen cikk témáját, hogy ezeket megadja.

Gyorsan változó ökoszisztéma

Egy dolgot szem előtt kell tartani, hogy a React egy gyorsan változó ökoszisztéma. Fejlesztőként naprakésznek kell lenned a legújabb frissítésekkel és ajánlott eljárásokkal kapcsolatban. Azt tapasztaltam, hogy ez egy igazi kihívás lehet, különösen nagy és összetett projekteknél, de végül természetesen megéri a belefeccelt időt energiát.

Összefoglaló

Összefoglalva, azt mondanám fejlesztőként, hogy amikor a React megérkezett, az életemben egy igazi game changernek bizonyult. A komponensalapú architektúra, a virtuális DOM és az aktív közösség hatékonyabbá és élvezetesebbé tette a webalkalmazások készítését. Azt persze nem állítom, hogy mentes a kihívásoktól, de az általa kínált előnyök megérik ezt az erőfeszítést, hogy az ember úgy menjen be dolgozni, hogy vidám, hogy ismét valamit klasszat készíthet ezen eszköz segítségével.

COPYRIGHT © 1999 - 2025 | SKYLINE-COMPUTER KFT.MINDEN JOG FENNTARTVA