Link na stream: vexfalard - Twitch

Vysílání bude probíhat 4.5.. v 12:00

Obsah přednášky:

• Seznámení s Reactem
• Vytváření komponent
• Property
• Obsluha událostí
• Stav
• Lifecycle komponent
• React Hooks

Obsah cvičení

Konečně se vrátíme k frontendu. V této části budeme implementovat Messenger v Reactu. Nainstalujeme závislosti, rozdělíme náš layout na komponenty a vykreslíme je pomocí fiktivních dat.

Použijeme standardní create-react-app pomocí:

npx create-react-app messenger --template typescript --use-npm

Poznámka: Následující kroky jsou napsány pro začátečníka, aby během vývoje viděl alespoň nějaký pokrok. Pokud už React umíte, můžete je přeskočit a rovnou se pustit do kódění.

Vezměte layout, který jste vytvořili dříve, a přepracujte vše na komponenty React. 

Až budete hotovi, otestujte, zda vaše statická aplikace React funguje.

Tip: Použijte stejné rozdělení na komponenty jako v případě BEM. Poskytne vám to dobrý základní bod.

Poté vytvořte pole obsahující data. Z něj vykreslete poslední zprávy a aktivní konverzaci.

Na tlačítku odeslat nastavte funkci, která přidá do pole novou zprávu.

Napojení na API uděláme v příštím cvičení.