Nyní si ukážeme jak vytvořit jednoduchou fotogalerii pomocí knihovny React.
Uživatelská rozhraní eshopů, instagramu atd. nejsou vytvářena tak, jako například malé webové stránky firmy, kdy se data vapisují do sémantických html značek. Tento postup by byl velmi zdlouhavý. Namísto toho se data (text, cesty k obrázkům) zapisují do JSON objektu. Data z JSON objektu jsou do prohlížeče vyrenderována pomocí javascriptu.
App and JSON data definition
App class
Tato třída vyrenderuje data z objektu JSON.
Tiles class
Tato třída rozšíří tř. App
Tile class
Tato třída rozšíří tř. App a naváže properties k jednotlivým třídám.
Tile class - render method
Definice stylů (co se stane se styly dlaždic, pokud se stav(state) změní na open (dlaždice se zvětší)
6 Class tile return
Vyrenderování el. <div> a obrázku (el. <img>). Elementu img přiřadíme po akci onClick akci event handler _mouseEnter, který způsobí změnu stavu (setState): ...... this.setState({ open:true }); ........ A jelikož jsme v renderovací funkci uvedli jaké styly budou použity při změně stavu na "open", dlaždice se zvětší. ........ if (this.state.open) { tileStyle = { width:'62vw', height:'62vw', ...............