React with Copilot

Environment Setup

• VS Code + GitHub Copilot + Copilot Chat
• Installation, activation, integration with the repository
• Working with prompts in the context of a file, folder, project
• Safe use of Copilot: testing, linting, quality control

AI Work Principles

• Prompt engineering and context engineering
• Vibe coding – not a replacement, but collaboration with AI as a partner
• AI-driven process: draft → refine → verify → integrate
• Pillars of working with Copilot: consistency, quality, safety

Copilot and Copilot Chat in Practice

• How Copilot works (contextual model, autocompletion, agent)
• Copilot Chat – working in the context of code, repository, terminal
• Working with Agents and Model Context Protocol tools
• Types of prompts: Implement, Explain, Refactor, Add tests, Improve performance
• Generating code, tests, and documentation with Copilot
• Refactoring and verifying code with the help of Copilot Chat

Configuration and Environment

• Node.js and NPM – versioning, running scripts
• EcmaScript 2015+ (ES6+) and key constructs
• TypeScript in the context of React
  • Typing props, state, functions, and hooks
  • Unions, generic types, mapped types in practice
  • Generating and inferring types
• Automatic generation of project configuration and structure
• React and Virtual DOM – architecture and rendering principles
• JSX – syntax, interpolation rules, and typing JSX elements

Components

• Mental model of application composition, component division
• Component properties and their typing
• Consistent styling for Copilot (CSS Modules, Utility First, Tokens)
• Conditional rendering and type narrowing
• Handling and typing user events
• Component local state and derived state
• Communication between components – passing events and data
• Component lifecycle and its mapping in hooks
• Data visualization in React – diagrams, charts, etc.

React Hooks

• What hooks are and how they work – reactive model
• useState – local state, immutability, and rerendering
• useEffect – side effects and cleanup
• useMemo, useCallback – rendering optimization
• useRef – references to mutable elements and DOM
• Custom hooks – refactoring logic outside the component
• Common pitfalls and best practices
• Linters and prompts for verifying hook correctness

Server Communication

• Asynchronous model and Promises (async/await)
• Fetching data from JSON REST API
• API typing, type generation (e.g., FastAPI Swagger)
• Error handling and loading states
• Authentication and authorization (tokens, headers, interceptors)
• Limiting requests with debounce and AbortController
• Contexts and centralized query management with React Query
• Custom hook for API communication
• Contexts, prompts, and templates for working with API

SPA Navigation

• Principles of SPA (Single Page Application) operation
• Installation and configuration of React Router
• Components: Router, Link, Outlet, Navigate
• HashRouter vs BrowserRouter (pushState API)
• Passing parameters and state between routes
• React Router hooks: useNavigate, useParams, useLocation
• Best practices for navigation and routing organization
• Generating navigation structure

Application Deployment

• Build – generating production package
• Environments – differences between development and production builds
• Factors affecting performance and loading time
• Package size optimization: code splitting, lazy loading
• AI-assisted deployment automation – introduction to CI/CD
• Summary