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.
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.
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 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.
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.
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.
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.
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.
Uses CSS-in-JS at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- Micro Frontends: Awareness → Working · becomes core
- Algorithms & Complexity: Awareness → Working
- Async Programming: Awareness → Working
- Bundle Optimization: Awareness → Working
- Code Quality & Refactoring: Awareness → Working
- Component Testing: Awareness → Working
- Core Web Vitals: Awareness → Working
- CSS-in-JS: Awareness → Working
- Data Fetching: Awareness → Working
- Data Structures: Awareness → Working
} in the open competency matrix: 56 skills across 5 levels. The matrix is free for individuals and stays free.