Helló, világ!
A legkisebb React példa így néz ki:
ReactDOM.render(
<h1>Helló, világ!</h1>,
document.getElementById('root')
);Ez egy címsort jelenít meg “Helló, világ!” szöveggel a weboldalon.
Kattints a fenti hivatkozásra az online szerkesztő megnyitásához. Bátran végezz változtatásokat, és figyeld meg hogyan befolyásolják a kimenetet. Az útmutató legtöbb oldala ehhez hasonló szerkeszthető példákat tartalmaz.
Hogyan használd helyesen az útmutatót
Ebben az útmutatóban a React alkalmazások építőkockáit fogjuk megvizsgálni: elemeket és komponenseket. Miután elsajátítottad használatukat, összetett alkalmazásokat tudsz majd létrehozni kis újrafelhasználható részekből.
Tipp
Ez az útmutató azok számára készült, akik előnyben részesítik a koncepciók lépésről lépésre történő tanulását. Ha jobban szereted gyakorlati példák közben megszerezni a tudást, nézd meg a gyakorlati tutoriált. Ezt az útmutatót és a tutoriált egymás kiegészítésének is tekintheted.
Ez az első fejezet lépésről lépésre vezet végig a React alapvető fogalmain. A navigációs oldalsávon megtalálhatod az összes fejezet listáját. Ha ezt mobilkészülékről olvasod, akkor a képernyő jobb alsó sarkában található gomb megnyomásával érheted el a navigációt.
Az útmutató minden fejezete a korábbi fejezetekben megszerzett tudásra épít. A React nagy részét meg tudod tanulni azzal, ha elolvasod a “Fő fogalmak” című útmutató fejezeteit az oldalsávban megjelenő sorrendben. Például a következő fejezet a “Bevezetés a JSX-be” ez után.
Feltételezett tudásszint
A React egy JavaScript könyvtár, ezért feltételezzük, hogy van alapvető ismereted a JavaScript programozási nyelvből. Ha nem érzed magabiztosnak magad nézd át a JavaScript tutoriált, hogy ellenőrizd a tudásszinted és hogy biztosan haladni tudj az útmutató olvasása közben anélkül, hogy elakadnál. Ez körübelül 30 perc és egy óra közötti időtartamot vesz igénybe, de utána nem fogod úgy érezni, mintha egyszerre kell megtanulnod a React-et és a JavaScript nyelvet is.
Megjegyzés
Ez az útmutató esetenként újabb JavaScript szintaxist használ a példákban. Ha az elmúlt években nem foglalkoztál a JavaScript nyelvvel, ez a három pont segíteni fog eligazodni.
Lássunk neki!
Folytasd a görgetést lefelé, és a hivatkozás az útmutató következő fejezetéhez közvetlenül a honlap lábléce előtt lesz megtalálható.