React Developer Roadmap (2024)

A thorough React developer roadmap for 2024 that addresses all aspects of React and beyond.

0. Before you start React

You should know and be comfortable with all of the following:

• Basic HTML

  • HTML Elements, Attributes, Headings, Paragraphs, Colors & Styles
  • HTML Links, Images, Tables, Lists, Block & Inline, Div, Classes, Id
  • HTML Forms
  • HTML Layout, Responsiveness & Semantic

• Basic CSS

  • CSS Basics - Syntax, Selectors, Colors, Backgrounds, Borders, Margin, Padding, Height/Width, Box Model, Outline, Text, Fonts, Links etc.
  • CSS More - Lists, Tables, Display, Position, z-index, Overflow, Float, Inline Block, Align, Combinators, Pseudo-classes & elements, Opacity etc.
  • CSS Forms & Layouts
  • CSS Flexbox
  • CSS Grid
  • Advanced CSS - CSS Units, Shadows, Gradients, Transitions, Animations, Specificity etc.

• Basic Tailwind CSS

  • Tailwind Utilities
  • Responsive Variants
  • Hover, focus and other states
  • Dark Mode variant
  • Tailwind Directives
  • Tailwind Configurations
  • Theme Configurations
  • Tailwind cn() utility

• Document Object Model (DOM)

  • DOM Basics - Basics, Method, Document, Elements, Forms, CSS, Events, Navigation, Nodes and Collections
  • DOM Advanced

• Basic JavaScript

  • JS Basics - Statements, Expressions, Syntax, Variables, Operators, Data Types, Functions, Objects, Arrays, Events, Array and String Methods, Object Methods, Date, Conditionals, Error Handling, JavaScript OOP - classes and inheritance and Debugging
  • JS Web APIs - Forms, History, Geolocation, Storage, Worker and Fetch API
  • JS JSON

• JavaScript Advanced

  • Solid JS Concepts - Scope, Hosting, Execution Context, Closures, Prototype, Recursion, Primitive vs Reference Data Types, Currying, Intersection Observer, Memoization, Event Propagation, Debounce etc.
  • Asynchronous JavaScript - Callbacks, Promises and async-await

• Modern JavaScript

  • Different ES6+ JS Syntaxes and concepts eg. Arrow function, Truthy/Falsy values, Ternary Operator, Different Array methods like find, filter, map, reduce, slice, splice, push, pop, concat, different looping strategies, Spread & Rest Operator, Array and Object Destructuring, Imports/Exports syntax, Template Literals, Sorting etc.

• Git/GitHub

  • Basics of Git
  • Important Git Commands

1. React Fundamentals

You should know and be comfortable with all of the following:

• Getting Started with React

  • Introduction to React - Why React - Comparison with Vanilla JS
  • React Installation & Editor Setup with Vite
  • How React works - Virtual DOM
  • Basics of React Components
  • Basics of JSX: React's Markup
  • JavaScript in JSX
  • Passing Props to Components
  • Conditional Rendering
  • Rendering Lists
  • Pure Components
  • How to split larger components into smaller ones

• Adding Interactivity

  • Responding to Events - Event Handlers
  • Understanding States - React Component's Memory - useState
  • How State works in React
  • How Rendering works in React
  • Updating complex states immutably in React

• React State Management Deep Dive

  • Declarative vs Imperative UI
  • Thinking UI Declaratively
  • Finding & Structuring React States
  • Connecting Event Handlers to React
  • Sharing State between components
  • Lifting State up
  • Extracting State Logic into Reducers
  • useReducer Hook
  • How to use Immer with React for concised immutable State Update
  • Passing Data Deeply inside React Components
  • Avoiding Prop Drilling - Context API & useContext Hook
  • Combine context and reducer to write scalable code

2. Advanced React

• Referencing values with Refs - useRef hook
• Manipulating the DOM with Refs
• Synchronizing with Effects - useEffect hook
• Separating events from Effects
• Removing Effect Dependencies
• Performance optimization with useCallback and useMemo hook
• Reusing logic with Custom Hooks
• Calling APIs from Back-end with React

3. Advanced State Management

• Using Redux / Toolkit
• Using Zustand
• Using Jotai
• Using Recoil
• Using MobX

4. Styling Solutions

• Tailwind
• CSS Modules
• Styled Components
• React UI Component Library - Shadcn
• React UI Component Library - Keep React
• Material UI
• Chakra UI
• Ant Design

5. React Ecosystem & Use Cases

• React Router DOM

• API Request with Axios in React

• React Suspense & Error Boundaries

• React Lazy Load

• React Infinite Scroll

• Uncommon React Hooks - useDebugValue, useDeferredValue, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect and useTransition

• React Authentication

  • How to handle user sign in (email, password, JWT)
  • How to handle access tokens and token refreshes
  • Social sign in (Google, Facebook, GitHub, etc.)
  • Using Supabase
  • Using Firebase
  • Using Clerk

• Form Handling in React

  • How to validate user input in forms (emails, passwords, etc.)
  • How to send form data to server
  • How to handle file uploads
  • Using React Hook Form
  • Using Formik

• Accessibility

  • Understanding why accessibility is important
  • Using semantic HTML
  • How to implement keyboard navigation
  • How to add aria labels
  • Using React Aria

• Testing

  • How to implement unit tests
    • Using React Testing Library
    • Using Jest
  • How to implement e2e integration tests
    • Using Cypress
    • Using Playwright

6. React Frameworks

You should have worked with one of the following:

• Vite
  • How to run a simple React application
• Next.js
  • Understanding file-based routing
  • Understanding Next Auth
  • Understanding server components
  • Understanding server actions
• Remix

7. Beyond React

• Team player
  • How to work within a team
  • How to perform code reviews
  • How to give and receive feedback
• Efficiency
  • How to prioritise tasks
  • How to handle tech debt
  • How to meet deadlines and goals
• Continuous Learning
  • How to continuously learn and grow
  • How to stay up to date with your skills
• Networking & Communication - Going to meetups or events - Contributing to open source projects - Networking within the company you work in

Resources from Learn with MadhavanAR

Some free and paid resources from Learn with Sumit that might help you achieve your goal to become a React Developer

• Think in a React way: Free React Starter Course
• JavaScript Beginners Course
• DOM Course
• Think in a JavaScript way - Advanced Conceptual JavaScript Course
• Modern JavaScript Course
• CSS Grid
• CSS Flexbox
• Tailwind CSS Course
• Reactive Accelerator: React-Next.js Course
• Think in a Redux way - Redux paid course