React basic

React je poměrně mladý framework, přesto se může chlubit nevídané popularitě. Stojí za ním facebook, který v něm má napsané velké množství aplikací a dále ho rozvijí. Pokud patříte mezi ty, kteří uvažují o nasazení Reactu ve všem projektu, určitě nebudete litovat. Na kurzu se seznámíte s filozofií Reactu a ukážeme si, proč je tak oblíbený. V rámci kurzu se naučíte navrhovat React.js komponenty, pochopíte principy frameworku a seznámíte se moderním javascriptovým ekosystémem. Dozvíte se, jak na Reactu postavit celou aplikaci, ale i jak React začlenit do již existující aplikace. Na praktických ukázkách si ukážeme, jak React funguje, jak v něm napsat aplikaci a nasadit ji na server. Po skončení kurzu budou účastníci schopni samostatně tvořit javascriptové single page aplikace ve frameworku React.js.

Programátorům, kteří chtějí začít tvořit aplikace za použití javascriptového frameworku React.

Introduction into React ecosystem

• Setup IDE
• Javascript & Typescript quick overview
• React introduction
• What is SPA and how does it work?

Package system and app scaffolding

• Vite - app scaffolding
• project folder structure
• using npm & yarn
• semantic versioning

React component system

• JSX
• differences between JSX and HTML
• React Fragment
• components - lifecycle, props
• component tree

Component state

• stateless, stateful components
• event handling
• component local state (useState)
• component lifecycle
• class components

Styling components

• conditional rendering
• applying styles
• CSS modules

Managing side effects

• useEffect
• Strict mode

Components

• creating own events
• children props

Creating forms

• controlled input

Making HTTP requests

• React Strict mode
• using third party library (axios)
• calling server via REST API
• writing custom hooks

Debugging & error logging

• debugger
• using console.log to analyze application flow
• using Google Chrome debugger
• using Google Chrome dev tools
• third party services

Advanced topics

• global application state using React Context
• accessing native element using useRef

Materiály jsou v elektronické podobě.