Creating an application using React

During the workshops, participants will not only learn the key concepts of React but will primarily learn how to build applications in accordance with the best market practices. Throughout the workshop, we will go through the entire process - from requirements analysis, through component architecture design, to functionality implementation and state management. Special emphasis will be placed on code organization, reusability, and performance optimization. After completing the training, participants will be ready to independently create complex user interfaces and make informed design decisions in new and existing React projects.

Training program

Introduction

  1. Characteristics and core principles of the library
  2. Environment and developer tools setup
  3. JavaScript / TypeScript in the context of React
  4. How the Virtual DOM works

React Fundamentals

  1. Introduction to JSX syntax
  2. Creating, configuring and rendering components
  3. State management and state sharing
  4. Event handling
  5. Component lifecycle
  6. Debugging and troubleshooting

React Hooks

  1. Overview of how hooks work under the hood
  2. Hook best practices and common pitfalls
  3. Immutable state management with useState and useReducer
  4. Correct patterns for using useEffect in StrictMode
  5. Working with mutable state via useRef — best practices
  6. Performance optimizations with hooks such as useMemo, useCallback, etc.

React in Practice

  1. Building complex views
  2. Styling — solution overview and theme implementation
  3. Working with forms
  4. Routing
  5. Best practices
  6. Communicating with the backend
  7. State management strategies

Advanced React

  1. Routing, meta-frameworks, and Next.js
  2. Form Hooks — form state and validation
  3. Server Components, Server Actions, and useOptimistic
  4. Memoization and advanced optimizations
  5. Suspense and lazy loading

Working with a Selected State Management Mechanism

  1. React Context: Creating context providers and consumers
  2. React Context: Optimization and best practices

Redux Toolkit Store (optional)

  1. Architectural principles
  2. Immutable state modeling, reducers
  3. Actions and action creators
  4. Integration with React, re-selectors
  5. When to choose Redux vs Context?
  6. Working with Redux DevTools

MobX Observable (optional)

  1. How MobX State Tree works
  2. Practical usage patterns
  3. Working with DevTools
  4. Overview of alternatives: Jotai vs Zustand vs Recoil

Testing (optional)

  1. Configuring jest/vitest with Testing Library
  2. Examples of using RTL selectors
  3. Mocking dependencies with jest
  4. When and what to test — discussion