Roles · Frontend Developer (React) · Junior

What a Junior } should know

26 core skills, 56 in total. Expectations per skill, and what changes at the next level.

This page lists what a Junior } is expected to know and do, skill by skill. Core skills are the ones a manager and peers assess in a review cycle; the rest count only in self-assessment. Main areas: Programming Fundamentals, Frontend Development, Cloud & Infrastructure.

26core skills
30additional skills
4skill areas
0%at Advanced or Expert
Assess myself as Junior Full role matrix

Core skills for a Junior

Grouped by area. The label on the right is the expected depth: Awareness, Working, Advanced or Expert.

Programming Fundamentals · 6

Understands basic O(n), O(1) complexity when working with arrays and lists in React components. Avoids nested loops when rendering lists through map(), uses key for optimizing React reconciliation algorithm.

Async Programming Awareness

Understands async/await and Promise for API work in React components. Uses useEffect for data loading, handles loading/error/success states in fetch requests, knows basic TanStack Query for response caching.

Follows configured ESLint and Prettier rules in React projects, writes clean functional components. Uses meaningful names for components, hooks and variables, separates components by responsibility, adds basic TypeScript types.

Data Structures Awareness

Works with arrays and objects in React component state, understands immutability when updating state through useState and Zustand. Correctly uses spread operator and array methods for UI updates.

Design Patterns Awareness

Applies basic React patterns: component composition, props drilling, conditional rendering. Understands the separation of presentational and container components, uses children and render props for logic reuse.

Uses basic TypeScript types in React components: interfaces for props, typing useState and events. Understands the difference between type and interface, applies React.FC, types event handlers onChange, onClick.

Frontend Development · 18

Understands the fundamentals of Bundle Optimization. Applies basic practices in daily work. Follows recommendations from the team and documentation.

Component Testing Awareness

Writes basic React component tests with React Testing Library and Vitest: rendering, checking text and elements through screen queries, basic user interactions (click, type). Follows the testing-library principle: test behavior, not implementation.

Core Web Vitals Awareness

Understands Core Web Vitals metrics (LCP, FID/INP, CLS) and their impact on React applications. Uses Lighthouse and React DevTools for basic performance analysis, applies Image component in Next.js for LCP optimization.

CSS-in-JS Awareness

Uses CSS-in-JS at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.

Data Fetching Awareness

Loads data in React components through TanStack Query: basic useQuery for GET requests, handling loading and error states. Understands caching and staleTime, uses fetch or axios for HTTP requests, displays skeletons during loading.

Uses ready-made design system components on Radix UI in React applications: buttons, forms, modals, navigation. Understands component composition principles, applies correct variants and sizes according to design guidelines.

Modern CSS Awareness

Proficient in modern CSS basics for React: flexbox and grid for layouts, CSS custom properties for variables, media queries for responsiveness. Applies CSS Modules or Tailwind CSS for style isolation in components.

Next.js Awareness

Uses Next.js at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.

Understands PWA concepts including service workers and manifest configuration in React apps. Uses Workbox with Create React App for basic caching strategies. Implements installability prompts and offline fallback pages.

React Core Awareness

Uses React Core at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.

Understands the difference between SSR, SSG and CSR in the Next.js context. Uses App Router for creating server and client components, applies generateStaticParams for static generation, understands use client and use server directives.

State Management Awareness

Manages local React component state through useState and useReducer. Uses Zustand for global state (theme, user, UI states), understands lifting state up and passing through props and React Context.

Tailwind CSS Awareness

Applies basic Tailwind CSS utility classes for styling React components: padding, colors, typography, flexbox. Uses responsive prefixes (sm:, md:, lg:) for adaptive layouts, understands tailwind.config.js structure.

Understands visual regression testing concepts for React components. Creates Storybook stories for main component states, runs basic visual diff tests through Chromatic or Percy for detecting unintended UI changes.

Works with basic Vite configuration for React projects: understands dev server with HMR, TypeScript and JSX support, path configuration through resolve.alias. Uses standard @vitejs/plugin-react plugins, understands dev/build mode differences.

Web Accessibility Awareness

Applies basic accessibility principles in React components: semantic HTML elements, alt for images, aria-label for interactive elements. Uses Radix UI for accessible UI primitives, checks basic keyboard navigation.

Web APIs Awareness

Uses basic Web APIs in React components: localStorage/sessionStorage for persistence, fetch for HTTP requests, DOM API through useRef. Understands subscription lifecycle in useEffect, correctly cleans up listeners on unmount.

Web Components Awareness

Understands Web Components standards (Custom Elements, Shadow DOM). Integrates third-party web components into React applications. Knows when to use native components vs React abstractions.

Cloud & Infrastructure · 1

Understands basic networking concepts for React web applications — HTTP/HTTPS requests with fetch/axios, CORS configuration, and SSR data fetching patterns. Follows team guidelines for configuring API clients, handling network errors, and debugging browser network activity.

Security · 1

Understands main OWASP Top 10 vulnerabilities in the React context: XSS prevention through automatic JSX escaping, dangerouslySetInnerHTML dangers, CSRF tokens. Uses Content Security Policy headers in Next.js, validates user input.

Additional skills

Not assessed by the team, but part of the self-assessment and the development plan.

Accessibility TestingAPI DocumentationAWSChatGPT / ClaudeCode ReviewCursor IDEDatabase IndexingDockerE2E TestingGit AdvancedGitHub Actions / GitLab CIGitHub CopilotGraphQL DesignIntegration TestingKubernetes CoreMicro FrontendsMultithreadingOOP & SOLID PrinciplesOpenTelemetryPerformance BudgetsPostgreSQLPrometheus & GrafanaPrompt Engineering for CodeRedisREST API DesignSecure Coding PracticesStructured LoggingSystem Design FundamentalsTerraformUnit Testing

What changes at Mid-level

56 skills get a higher expectation or become core when moving from Junior to Mid-level. The biggest jumps first.

See the Mid-level page →
Run this with your whole team
Self-assessment plus manager and peer reviews against the same matrix, gap analysis and next-level readiness for every engineer. Team Pro is free for 14 days; individual tools stay free forever.
Start a team trial (14 days free) Send to my manager

} in the open competency matrix: 56 skills across 5 levels. The matrix is free for individuals and stays free.