React programozás tanfolyam

A Facebook által fejlesztett React jelenleg az egyik legmodernebb browseres alkalmazások kialakítására létrehozott keretrendszer. Minden aspektusában kihasználja a JavaScript által nyújtott funkcionális programozói paradigmát, így biztosítva komplex JavaScript alapú SPA (Single-Page-Application) weboldalak könnyű kialakítását. A deklaratív programozásra támaszkodó, optimalizált végrehajtási mechanizmusának köszönhetően az így létrehozott oldalak gyorsak, teljesítményoptimalizáltak lesznek.

Tanfolyamunkon a résztvevők megismerkednek a React legfontosabb funkcióival az alapoktól a haladó szintig. Rengeteg gyakorlati feladaton keresztül mutatjuk be a React használatát. A tanfolyam során bemutatott best-practice példák tisztázzák a felmerülő kérdéseket is. Tanfolyamunkat elvégezve résztvevőink átfogó képet kapnak a React programozásról és a mindennapokban is használható gyakorlati tudásra tesznek szert, így már biztos tudással láthatnak neki éles React alkalmazások kivitelezésének.

Tananyagunk követi a React legújabb verziói által nyújtott funkciókat.

Tanfolyamunkat ajánljuk mindazoknak, akik szeretnék elsajátítani a JavaScriptre épülő React keretrendszer használatát és céljuk a gyors, webes alkalmazásfejlesztés a technológia alkalmazásával.

Az alábbi ábrán összefoglaltuk a JavaScript programozás tanulási útvonalát. Képezd magad tovább és válj JavaScript webfejlesztővé! Programozási ismeretekkel nem rendelkező érdeklődőinknek először a Programozási alapok (MFPROG1) tanfolyamunkat ajánljuk. Természetesen lehetőség van köztes ponton is bekapcsolódni a tanulási útvonalba, amennyiben rendelkezel az elvárt ismeretekkel. Nézd meg a képzések adatlapjait és válaszd a neked legmegfelelőbb képzést!

Alapszintű JavaScript, HTML és CSS ismeretek. Funkcionális programozási ismeretek (lambda kifejezés).

Tematika:

1. BEVEZETÉS

1.1. React koncepció, verziók, történet

1.2. Előnyei, hátrányai

1.3. React projekt létrehozása, felépítése

1.4. Csomagkezelők (NPM, Yarn)

1.5. ESLint szintaktikai elemző

2. JAVASCRIPT LEGÚJABB FUNKCIÓI (ES6)

2.1. Függvények

2.2. Lambda kifejezés (függvény, mint paraméter)

2.3. let, var, const

2.4. Template sztring

2.5. Tömbök és tömb műveletek

2.6. Objektumok

2.7. Osztályok

2.8. Spread operátor

2.9. JavaScript modulrendszer

3. JSX ÉS RENDERELÉS

3.1. JavaScript XML (JSX) szintaxis

3.2. Babel fordító

3.3. Fragment elem

3.4. Virtual DOM

3.5. Statikus tartalmak (HTML, CSS, képek, stb.)

4. REACT KOMPONENSEK

4.1. React komponens deklaráció

4.2. Egyirányú adatáramlás (props)

4.3. Típusok, default értékek

4.4. Stateless/stateful komponensek

4.5. setState metódus

5. ESEMÉNYKEZELÉS

5.1. Eseménykezelés – SyntheticEvent

5.2. React vs. DOM eseménykezelés

5.3. preventDefault(), stopPropagation()

5.4. Esemény perzisztálása

6. ÉLETCIKLUS ESEMÉNYEK

6.1. Reconciliation folyamat

6.2. Mounting

6.3. Módosítás, shouldComponentUpdate

6.4. Unmounting

7. HOOK

7.1. Hook, mint új React feature

7.2. State Hook

7.3. Effect Hook

7.4. Hook szabályok

7.5. Saját hook készítése

8. REACT FORMOK

8.1. Form kialakítása: text, textarea, select, radio, …

8.2. Controlled/uncontrolled komponensek

8.3. DOM/React referencia

8.4. useRef hook

9. ÚTVONALVÁLASZTÁS (ROUTING)

9.1. Kliens oldali routing

9.2. react-router modul ismertetése

9.3. Route komponens

9.4. Switch komponens

9.5. Link komponens

9.6. Programozott navigálás

9.7. Prompt komponens

10. ADATOK BETÖLTÉSE

10.1. REST alapok ismertetése

10.2. Fetch API

10.3. Spinner kivitelezése

10.4. Lazy betöltés

10.5. Lista elemek kulcsai

11. CONTEXT

11.1. Context használata, mire jó?

11.2. Provider, Consumer komponens

11.3. useContext hook

12. HALADÓ SZINTŰ TERVEZÉSI TECHNIKÁK

12.1. High-Order komponensek

12.2. Render Props

12.3. Kompozíció vs. öröklődés

12.4. Hol tároljuk az állapotot?

13. REACT FEJLESZTŐESZKÖZÖK

13.1. Firefox/Chrome böngészőkiterjesztések

13.2. Konfigurációs beállítások

13.3. Debugging

13.4. Hibakezelés – Hiba határok (Error Boundary)

14. TELJESÍTMÉNY OPTIMALIZÁLÁSA

14.1. Éles build

14.2. shouldComponentUpdate a felesleges renderelés kiszűrésére

14.3. PureComponent

14.4. Teljesítmény elemzés Profiler használatával