React & TypeScript

Content

Together, we incrementally build a modern React application with TypeScript, covering the most important concepts and best practices of current React development:

Positioning and Setup:

– Positioning React in the modern frontend framework landscape – Setting up Single Page Application projects:

• Modern toolchain with Vite
• TypeScript configuration and best practices
• Project structure and build process

React Components and Core Concepts:

– Creating React Components:

• Function Components and JSX
• Props and Component Composition
• Event handling and forms – Hooks and State Management:
• useState, useEffect, useContext
• useReducer, useMemo, useCallback
• Custom Hooks and Hook patterns – Rendering behavior and Lifecycle:
• Component lifecycle and side effects
• Rendering optimization
• Error Boundaries and Suspense

Architecture of Client-side React Applications:

– Client-side Routing:

• React Router and navigation
• Route parameters and nested routes
• Protected routes and navigation guards – Backend access and data management:
• Fetch API and HTTP communication
• Data management with TanStack Query (React Query)
• Caching and synchronization – State management strategies:
• Local vs. global state
• Context API for shared state
• State management patterns

Advanced Topics:

– Advanced Hook patterns:

• useRef and DOM manipulation
• useImperativeHandle and forwardRef
• Custom Hook libraries – Composition and code organization:
• Higher-Order Components
• Render Props pattern
• Compound Components

Performance Optimization:

– Performance techniques:

• Memoization with React.memo
• Performance Hooks (useMemo, useCallback)
• Code splitting and lazy loading – Profiling and debugging:
• React DevTools
• Performance profiling
• Debugging strategies

Outlook on Full-Stack React:

– Modern Full-Stack Frameworks:

• Next.js for Server-Side Rendering and Static Site Generation
• React Router with Loader/Action pattern
• TanStack Start as modern alternative
• Deployment and production best practices

You will not only get to know these concepts, but also implement them in practice.

The actual course content may differ from the above depending on the trainer, delivery, duration and the composition of participants.