React esetében irgalmatlan mennyiségű anyag van a neten. Ha nekem kellene betanítani valakit, akkor alapvetően az alábbiakkal indítanám el (én ezeket találtam korábban magamnak, amik megfelelő minőségűek):
- A React saját dokumentációja elég olvasmányos, alapos, van benne egy csomó példa és javallat/ellenjavallat különböző esetekre:
Tutorial | Általános dokumentáció | Új általános dokumentáció (beta) - React-projekt gyors generálásához erősen ajánlatos (főleg az elején) a Create React App nevű csomag használata, ez beállít minden vackot, ami kellhet (vagy könnyebb úgy a fejlesztés):
Részletes dokumentáció példákkal - Példákkal ellátott hosszabb fejtegetések egy-egy témakörben #1:
Kent C. Dodds blogja | Ugyanő által kínált kurzus (nem olcsó, de itt is van egy halom ingyenes anyag) - Példákkal ellátott hosszabb fejtegetések egy-egy témakörben #2:
TkDodo blogja - Nagyon részletezős, "aljára nézős" fejtegetések (mi miért van úgy, ahogy stb.) az egyik core fejlesztő által:
Dan Abramov blogja
Ezek nagyrészt nem klasszikus oktatóanyagok, de egyrészt olvasmányosak, másrészt véleményem szerint a felsorolás sorrendjében átolvasgatva, közben kipróbálgatva a dolgokat eléggé jól el lehet benne mélyedni. :)
Szerk.: a nyitó posztban felvetett dolgokra néhány lehetséges megoldás Reacthoz kapcsolódóan:
- 2 (JSON): ha csak nagyon egyszerű megoldás kell, akkor nagyon egyszerűen be lehet drótozni az alap fetch() és JSON.parse() metódusokat, bár fetch esetén utóbbi nem is kell feltétlenül, mert a Response is támogatja a JSON-be parse-olást. Ha valami komolyabb API-t szeretnél elérni, arra már kismillió library és framework van (divatos kulcsszavak mostanában az OpenAPI és a Swagger, de ez nem React- v. JS-specifikus).
Szóval ehhez nem igazán kell React, de az alá is van több lib is, ami még a "ragasztókódot" is megspórolja vagy ad valami absztrakciót. - 3 (Videó): én eddig a projektjeimben a Video.js-t használtam (React-integrációhoz példák). Nem mondom, hogy nem volt néha fejvakarós, debuggolós feladatom, de végül mindent meg tudtam vele oldani, amit akartam. (Egyszerűbb esetekben itt is elég a "vanilla js" meg a HTMLMediaElement API, ld. Video and Audio APIs, Video and audio content, HTMLMediaElement.)
- 4 (Hang): dettó
- 5 (Slideshow, carousel): mint égen a csillag, annyi ilyen van, random google kereséssel: 14 Top React Carousel Components [2022] :)
- 6: ld. 2. pont
- 7 (formok): pl. React Hook Form (nekem néha kicsit nyakatekertnek tűnt a logikája, de sokat tud, az kétségtelen, és az alap esetekre elég egyszerűen használható - itt amire érdemes nagyon odafigyelni, az a "controlled components vs. uncontrolled components" témakör, ld. Uncontrolled Components, What are Controlled and Uncontrolled Components in React JS? Which one to use?)