/react-dev-roadmap-2024

React Developer Roadmap - Beginners to Advanced - 2024

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)

  • 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

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
4. Styling Solutions
5. React Ecosystem & Use Cases
6. React Frameworks

You should have worked with one of the following:

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 Sumit

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