Training course · Claude Code · React & Front End

Claude Code for React and Front-End Developers

Agentic coding with Claude Code in the terminal and IDE: CLAUDE.md, subagents, hooks, MCP, CI pipelines and secure permissions.

Duration
2 days (14 hrs)
Format
Online or on-site
Language
German or English
Participants
open dates or exclusive for your team
Certificate
Certificate of attendance

Overview

This course connects Claude Code with the everyday processes of React & Front End. Participants work on realistic scenarios and leave with prompts, workflows and checklists they can use straight away.

Claude Code is Anthropic’s agentic coding assistant, working directly in your terminal and in popular IDEs. Rather than completing individual lines, it reads your repository, plans changes across multiple files, runs commands, executes tests and prepares commits. Over two days you will learn to use it with deliberate control: clear project instructions in CLAUDE.md, careful context management, and a workflow in which you set the direction as a developer and can trace every change the agent makes back to a clear intention.

The course is built around real engineering work: diagnosing bugs, delivering features, refactoring legacy code and filling gaps in test coverage. You will configure subagents for specialised tasks, enforce quality checks with hooks, connect external systems through the Model Context Protocol (MCP) and capture team knowledge as reusable skills. Finally, you will run Claude Code headless in CI pipelines and define permissions, sandboxing and approval rules so that its use remains defensible even in security-sensitive environments.

Front-end development today means component architectures, state management, server components, design systems, accessibility and performance budgets – often all at once. AI coding assistants and agents speed up exactly the work that eats time: deriving components from designs, converting class components to hooks, writing Storybook stories and Testing Library tests, fixing ARIA issues or tracking down unnecessary re-renders. Because front-end code thrives on conventions, context is everything: design tokens, folder structure, styling approach and preferred libraries must be known to the assistant. This course shows you how to set those guardrails and how to verify results reliably, both visually and technically.

The course is delivered live – either online in a virtual classroom or on-site in our training rooms in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run it exclusively for your team.

Who is this course for?

  • React developers in product teams and agencies
  • Front-end engineers working with Next.js, Vite or similar frameworks
  • Maintainers of design systems and component libraries
  • Full-stack developers with a front-end focus
  • UI engineers responsible for accessibility and performance

Typical challenges we address

  • Inconsistent components and styles despite an existing design system
  • Hard-to-trace re-renders, bloated bundles and weak Core Web Vitals
  • Accessibility gaps and growing pressure from legal requirements
  • Legacy code with class components, outdated patterns and missing tests

What you will be able to do

  • You use Claude Code for multi-step development tasks while keeping full control over every change.
  • You maintain a CLAUDE.md that effectively conveys project conventions, commands and architectural guidance to the agent.
  • You extend Claude Code with subagents, hooks, MCP servers and skills tailored to your team.
  • You integrate Claude Code into Git workflows and CI pipelines with traceable, test-backed results.
  • Have AI agents generate components, stories and tests that match your design system.
  • Use AI deliberately to improve accessibility, performance and legacy code in a systematic way.
  • Check generated front-end code visually, functionally and for maintainability before it ships.

Course outline

Day 1

Module 1 How Claude Code works
  • Installation, sign-in and use in the terminal, VS Code and JetBrains IDEs
  • Understanding the agentic loop: read, plan, act, verify
  • Using plan mode to agree on an approach before any code changes
  • Writing effective task briefs with goal, context and acceptance criteria
Module 2 Project context with CLAUDE.md and context management
  • Structuring CLAUDE.md at project, directory and user level
  • Documenting build, test and style conventions so the agent follows them reliably
  • Managing the context window with targeted file references, compaction and fresh sessions
  • Resuming sessions and breaking long tasks into manageable stages
Module 3 Extending Claude Code with subagents, hooks, MCP and skills
  • Defining subagents for code review, research or test generation
  • Using hooks to enforce formatting, linting or checks before and after tool calls
  • Connecting MCP servers for issue trackers, databases or internal documentation
  • Creating custom slash commands and skills for recurring team workflows
Module 4 Git workflows, testing and quality assurance
  • Creating branches, meaningful commits and pull requests with Claude Code
  • Test-first work: have tests written before the implementation
  • Reviewing diffs systematically and rejecting or refining changes
  • Organising parallel work with Git worktrees and multiple sessions

Day 2

Module 5 Headless operation, CI and security
  • Running Claude Code non-interactively in scripts and CI pipelines
  • Automated reviews and issue handling in GitHub or GitLab workflows
  • Configuring permission modes, allow and deny rules, and sandboxing
  • Handling secrets, prompt injection risks and organisation-wide policies
Module 6 Practice lab: React & Front End
  • Building components from designs
  • Testing Library tests
  • Auditing and improving accessibility
  • Modernising legacy code
  • Optimising performance
  • Forms and data fetching
Module 7 Data protection, quality & transfer to daily work
  • Under the European Accessibility Act and its national implementations, many digital services must be accessible, so generated UI code needs proper checks. Also watch the licences of reused components and icons, keep secrets out of the client bundle and make sure tracking and consent logic complies with GDPR and ePrivacy rules.
  • Ground rules for safe AI use in your team
  • Checking results: facts, sources, tests and the four-eyes principle
  • Personal action plan for the next 30 days
  • Open questions, outlook and resources for further learning

Practical scenarios from your field

Building components from designs

From screenshots, design specs or Figma exports, the assistant produces typed React components that use your existing design tokens and libraries, and adds Storybook stories covering every state.

Testing Library tests

The AI writes user-centred component tests with React Testing Library and Vitest or Jest, simulates interactions, mocks API calls and covers loading, error and empty states.

Auditing and improving accessibility

The agent reviews components for semantic HTML, ARIA attributes, focus management and contrast, interprets axe results and fixes findings transparently against WCAG success criteria. Keyboard and screen reader behaviour is covered too.

Modernising legacy code

Class components are converted to function components with hooks, prop drilling is replaced by context or a proper state management approach and PropTypes give way to TypeScript types – with tests as a safety net.

Optimising performance

The AI pinpoints unnecessary re-renders, proposes memoisation, code splitting and lazy loading, analyses bundle reports and explains how each measure affects metrics such as LCP and INP.

Forms and data fetching

Complex forms with validation schemas, error messages and optimistic updates are generated alongside data-fetching logic with caching, retries and clean handling of loading and error states.

Possible hands-on projects

Interactive KPI dashboard

A React dashboard with charts, filters and a responsive layout that loads data from a REST API, built entirely by an AI agent from a short specification.

Component library with Storybook

A small, accessible component library with buttons, dialogs and form fields, including design tokens, Storybook documentation and automated tests. It forms the basis for consistent interfaces across several projects.

Accessibility checker for pull requests

A script that runs axe against Storybook stories automatically and turns the findings into a clear report attached to pull requests.

Prerequisites

You have hands-on programming experience in at least one language and are comfortable with Git and the command line. Hands-on experience with React and modern JavaScript or TypeScript, plus a working knowledge of CSS, npm and Git.

Technical requirements

Your own laptop with admin rights, Git, a Node.js runtime and an up-to-date editor; a Claude subscription or Anthropic API access is required for the exercises.

Data protection & compliance

Under the European Accessibility Act and its national implementations, many digital services must be accessible, so generated UI code needs proper checks. Also watch the licences of reused components and icons, keep secrets out of the client bundle and make sure tracking and consent logic complies with GDPR and ePrivacy rules.

Suggested dates

All dates are suggestions – your preferred date is always possible.

  • Thu, 26 November 2026 – Fri, 27 November 2026 Online Request
  • Mon, 7 December 2026 – Tue, 8 December 2026 Stuttgart Request
  • Wed, 20 January 2027 – Thu, 21 January 2027 Online Request
  • Thu, 4 February 2027 – Fri, 5 February 2027 Berlin Request
  • Tue, 16 February 2027 – Wed, 17 February 2027 Online Request
  • Wed, 3 March 2027 – Thu, 4 March 2027 Munich Request

Frequently asked questions

How is Claude Code different from traditional code completion?

Code completion suggests the next few lines, whereas Claude Code acts as an agent that handles whole tasks: it searches the repository, plans changes across several files, runs tests and commands, and corrects itself based on the results. You define the goal and review the outcome instead of steering every single line yourself.

Is Claude Code secure enough for enterprise use?

By default, Claude Code asks for approval before editing files or running commands. Permission rules, sandboxing, managed settings and hooks let you define precisely what the agent may do. During the course you learn to configure these mechanisms to match your security and data protection requirements and to assess risks such as prompt injection.

Does Claude Code work with my language and tech stack?

Yes. Claude Code is language-agnostic because it works with files, terminal commands and your existing build and test tooling. Whether you use Python, Java, TypeScript, Go, SAP-related code or infrastructure as code, what matters most is a well-written CLAUDE.md describing your commands and conventions. Each course variant adds the relevant domain focus.

Can AI implement designs pixel-perfectly?

AI assistants now translate layouts from screenshots or specs remarkably well, especially when they know your design tokens and components. Pixel-perfect results still come from iteration, though. On the course you learn to feed back visual deviations precisely and to use Storybook and visual tests as your control mechanism.

Does the framework I use matter?

The course centres on React, but the working methods transfer to Next.js, Remix or Vite-based setups. We show how to capture framework-specific rules such as server and client components or routing conventions in instruction files, so the assistant produces code that fits your stack.

How much does “Claude Code for React and Front-End Developers” cost?

The course costs a flat €949 plus VAT per participant – whether online or on-site. This includes 2 training day(s) with a live trainer, course materials, a lab environment and a certificate of attendance.

Can I suggest my own date?

Yes. Our suggested dates are just a guide. In the request form you can always describe your preferred date or period in free text – we check availability and confirm within one working day.

Is the course online or on-site?

Both are possible: live online in a virtual classroom or on-site in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart or Kaiserslautern. We can also run the course exclusively for your team.

More courses for React and Front-End Developers

More Claude Code courses

All 77 Claude Code courses

Claude Code · MunichClaude Code · SalzburgClaude Code · BerlinClaude Code · AugsburgClaude Code · HanoverClaude Code · BremenClaude Code · StuttgartClaude Code · KaiserslauternClaude Code · Online