Skip to content

Instantly share code, notes, and snippets.

@gippy
Created January 25, 2017 11:37
Show Gist options
  • Save gippy/1e6ec2fc4c0db349d228249bac42feed to your computer and use it in GitHub Desktop.
Save gippy/1e6ec2fc4c0db349d228249bac42feed to your computer and use it in GitHub Desktop.

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment