fullstack

Co by měl fullstack React.JS programátor umět
=================================

HTML5
----------

 - Běžně používané HTML tagy, jejich attributy a jejich použití
 - Běžně používané meta tagy
 - Vědět proč a kam vkládat **link** a **script** tagy

CSS - CSS3 + preprocessory (SCSS/LESS)
---------------------------------------------------------

 - Zakladni CSS3 styly a jejich vhodné použití
 - Jednotky velikostí - px / em / **rem**
 - Selektory čím podrobněji tím lépe, ale pro začátek stačí selektory podle třídy, attributu (**[attribute=value]**), stavu (**:active**) a pořadí ve struktuře (**:nth-child**)
 - Pozicování elementů (static, relative, absolute, fixed, float) vědět jaké následky má která volba.
	 - absolutní pozicovaní je relativní k nejbližšímu nadřazenému elementu s position relative a ne jen ke stránce
	 - pokud element napozicuji s pomocí float nebo position absolute/fixed, tak je vytržen z kontextu stránky a jeho nadřazený element už nepočítá s jeho výškou
 - Animace, transformace a transitions (alespoň základy)
 - Media queries a jejich použití pro stylování obsahu pro různá zařízení (podle velikosti, pro tisk a podobně)
 - Preprocessory jako jsou SCSS nebo LESS
	 - Proměnné a jejich proužití pro rychlejší změny v rámci celé aplikace
	 - Zanoření stylů pro přehlednější kód
	 - Autoprefixing, umožňující neřešit browser prefixy pro běžně používané styly (např. **opacity** nebo **transform**)
	 - Mixiny pro sdílení stylů, zjednodušení kódu a odstranění copy/paste chyb
	 - Některé užitečné funkce jako **lighten** / **darken** pro úpravy barvy
 - Webové fonty a jak a proč je používat lokálně na místo tahání z jiných stránek

Javascript - ES6 + Immutability
-------------------------------------------

 - Perfektní znalost základů JS, není potřeba znát jak se jmenuje která
   funkce, to jde vždy dohledat, ale je nutné vědět jak se píšou
   proměnné, podmínky, switche, cykly a funkce, a jak se
   používají objekty a pole.
 - Porovnávání proměnných
	 - rozdíl mezi **===** a **==**
	 - jak porovnávat objekty a pole
	 - jak zjistit jestli je proměnná null
	 - jak zjistit má proměnná nějaký typ (operátor **typeof**)
 - Jak procházet objekt jako pole (funkce **Object.keys(objekt)**)
 - verze **ES6** a co přináší javascriptu
	 - **const** a **let** operátory pro definování constant a proměnných
	 - bloky a jak ovlivňují proměnné
		 - dát pozor na zanoření definice proměnné do bloku, jelikož pak není možné ji použít mimo daný blok
	 - arrow funkce pro zjednošení psaní funkcí
		 - dát pozor na to jak arrow funkce řeší klíčové slovo **this** a předává kontext
	 - defaultní hodnoty pro parametry funkcí
	 - dekonstrukce proměnných a parametrů
		 - operátor **...** a jeho použití pro rozpad objektů a polí
		 - vytažení proměnných z objektu
	 - importování a exportování modulů
		 - použití **import ... from '...'**
		 - použití **export** a **export default**
	 - tvorba řetězců - používání `` `${neco} je krasne` `` namisto `neco + ' je krasne'`
	 - třídy a definování funkcí třídy (důležité pro react)
 - **Async**/**Await** a jeho použití s **Promise** pro vyčistění kódu od zanořených callbacků v asynchronním javascriptu
 - **Immutability** a rozdíl mezi úpravou objektu/pole vs vytvoření nového objektu/pole s novými údaji a kdy je lepší použít kterou variantu
	 - funkce **Object.assign()** pro tvorbu nových objektů
	 - knihovna **Immutable** pro práci s immutable typy
	 - rozdíl mezi Array(List), Map a Set

React
--------

 - Stateless funkcionalní komponenta
	 - Jak a kdy ji použít a jaké má výhody a nevýhody
 - Klasická komponenta a její lifecycle
	 - Proč použít klasickou komponentu třídou místo stateless funkce
	 - Jaké lifecyclové metody má komponenta kdy je použít např.:
		 - **componentWillMount** vs **ComponentDidMount**
		 - **componentWillReceiveNewProps** vs **componentWillUpdate**
		 - **render**
 - Zanořování komponent a předávání proměnných (**props**)
	 - Změna vzhledu komponenty předáním proměnné v prop
	 - Předání dat komponentě pro jejich zobrazení, například tabulka předávající data jednotlivým řádkům, které tyto data zobrazují
	 - Úskalí spojená s použítím props pro předání informace o změně stavu komponenty
	 - Zobrazení různých komponent na základě podmínky, například zobrazení komponenty pouze pokud pro ni máme data
 - Stav komponenty, rozdíl mezi **state** a **props** a v jakých metodách měnit stav
	 - Důležité hlavně vědět proč v metodách render, componentWillReceiveNewProps a componentWillUpdate neměnit stav komponent, jelikož hrozí riziko zacyklení
 - Eventy v React komponentách
	 - jak zpracovávat eventy, měnit stav komponenty na základě událostí a podobné
	 - dávat pozor na to, že metodám komponenty volaných v rámci zpracování události je potřeba předat kontext (např. pomocí bind funkce, více v dokumentu coding guidelines react)
 - Routing a práce s URL (react-router)
	 - zobrazení komponenty na základě aktuálního URL
	 - Přesměrování (**`<Redirect />`**) v rámci aplikace bez refreshe prohlížeče
	 - **Link** a klikatelné odkazy
	 - router v kontextu a metoda **router.transitionTo()**
 - Animování React komponent
 - Použití JS knihoven nedělaných pro React

Node - express, mongoose a další
-----------------------------------------------

 - Tvorba webového serveru pro zpracování požadavků vracení obsahu s pomoci Express.JS
	 - Inicializace serveru a tvorba route a funkcí pro zpracování požadavků
	 - REST a využití http metod **GET**/**POST**/**PUT**/**DELETE**
	 - Odpovědi, vracení **JSON** obsahu a HTTP stavy (200, 204, 400, 403, 404, 500)
	 - Requesty a zpracování dat příchozích z prohlíče (**QUERY** vs **BODY**)
	 - Validace a čištění dat
 - Mongoose a práce s MongoDB (případně jinými databázemi)
	 - Co je MongoDB a jaký je rozdíl mezi **SQL** a **NoSQL** databází
	 - Tvorba modelů
	 - Ukládání dat
	 - Vyhledávání - **find**, **findOne** a **findById**
	 - Agregace dat pro statistiky
 - GM (ImageMagic) a práce s obrázky
 - NodeMailer a odesílání emailů

Redux
---------

 - proč udržovat stav aplikace na jednom místě
 - akce aplikace a jejich bindování(kontext) a vyvolání
 - reducery měnící stav aplikace na základě akcí
 - Immutable v reduxu a proč je důležité
 - payload akce a předávání dat reduceru
 - asynchroní akce a jejich zpracování
 - react-redux a napojení React component na Redux pomocí **connect**
 - redux dev tools pro sledování stavu aplikace a toho jak akce mění její stav