Tak tohle je přesně to místo, kde začít, když chceš dělat frontend u nás v Holly. Najdeš tu:

• Klasický sample TODO list za použití přesně těch principů a technologií, které používáme.
• Seznam dokumentace, se kterou je dobré se seznámit a kde hledat, pokud něco není jasné.

• Poslední verzi Node.js
• Poslední verzi Yarn

yarn install
yarn start

yarn install
yarn build

Výsledek buildu je ve složce build.

V src/__tests__ jsou ukázky třech typů testů:

• Smoke.test.tsx způsob jak zjistit, jestli se nám vůbec podaří komponentu inicializovat.
• Snapshot.test.tsx testy, které nám řeknou, jestli se v našich UI komponentách něco změnilo (to, jestli to byla změna k lepšímu, už zkontrolujeme sami).
• Unit.test.ts klasický unit test.

Jak spustit testy:

yarn test

MobX DevTools jsou skvělý pomocník, pokud jde o vizualizaci toho, kdy a co se na obrazovce překresluje.

Jak je zapnout:

1. Otevřít soubor src/App.tsx.
2. Změnit konstantu enableDevTools na true.

1. Zeptej se někoho z nás.
2. Nikoho z nás neznáš. Nevadí, dej nám vědet na twitteru @HollySolutions nebo třeba na mail [email protected].
3. A jestli je něco fakt blbě, máme na gitlabu otevřené issues. Zpětná vazba je pro nás fakt důležitá.

Je třeba načíst pouze základní principy fungování:

• Dokumentace
  • Introducing JSX
  • Rendering Elements
  • Components and Props
  • Conditional Rendering
  • Lists and Keys

Zkusit si jednoduché příklady v sandboxech a trochu si s nimi pohrát:

• Hello, world!
• Simple List
• List Add/Remove

Prosvištět dokumentaci:

• Dokumentace
  • Basic Types
  • Variable Declarations
  • Interfaces
  • Classes
  • Functions
  • Enums
  • JSX

Na vyzkoušení Reactu s Typescriptem dohromady je nejlepší zkusit si rozjet Hello World s React create app s podporou TS: https://github.com/wmonk/create-react-app-typescript

Jen v návodu místo npm zkus použít Yarn. Stačí mít yarn nainstalován, a tam, kde je v postupu npm, tak nahradit použitím yarnu.

A nebo tuhle část preskočit a rozvalit hned náš TODO list sample.

MobX není třeba znát uplně detailně, ale pro zbežné seznámení stačí mrknout sem:

• The gist of MobX
• Concepts & Principles

A pohrát si třeba s tímto příkladem: https://codesandbox.io/s/v3v0my2370

Pro vývoj používáme VSCode, ale klidně použij WebStorm nebo cokoliv ti sedí. Pro VSCode pak doporučuji následující rozšíření:

• TSLint
• Markdown All in One
• IntelliJ IDEA Keybindings
• Debugger for Chrome
• Atom One Dark Theme