React Competence Roadmap

Introduction

This is not a tutorial. This is a curriculum. I will not give you the code. I will give you the requirements, the theory, and the documentation links. You must build the solutions.

🚀 React Crash Course

State and Effects in a nutshell:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count is {count}
    </button>
  );
}

⚠️ Brutally Honest Expectations

Pace: Fast and aggressive.
Difficulty: You will get stuck. That is the point. If you copy-paste solutions, you will fail the interview.
Time Commitment: Expect to spend 2-4 hours per module if you are focused.
Prerequisites: You must be comfortable with ES6+ JavaScript. If you are unsure, start with Module 0: JS Prerequisites.

🎯 Expected Outcome

By the end of this guide, you will not just "know" React. You will be able to:

Scaffold and configure a production-ready Vite + TS environment.
Think in components and unidirectional data flow.
Distinguish Client State (Zustand) from Server State (React Query).
Write robust Unit and Integration tests with Vitest and MSW.
Handle side effects and API integrations cleanly.
Master Referential Equality to prevent performance bottlenecks.
Debug common React errors (rendering loops, stale closures).
Technical Mastery: Leverage the React toolkit, create data visualization tools, and optimize components for cross-browser compatibility.
SEO & Performance: Enhance SEO ratings and application performance through constant monitoring and optimization.
Professional Workflow: Translate business needs into technical requirements and maintain clear documentation.
Agile Collaboration: Participate in sprint planning, daily stand-ups, and retrospectives.
Code Quality: Conduct code reviews, ensure best practices, and improve codebase through refactoring.
Legacy Support: Maintain and migrate complex state in large applications using Redux 4.x.

INTRO-001 Methodology

The "Build-Break-Fix" Pedagogy

Concept

This guide is designed to prove competence, not just familiarity.

Phases

The Build (Construction): You are given requirements, not code. If you can build the feature from a blank file, you own the knowledge.
The Bug Hunt (Reverse Engineering): I intentionally ask you to break things or fix broken scenarios. You cannot fix a "Stale Closure" or a "Render Loop" by guessing.
The Capstone (Synthesis): The final project combines everything. The ultimate test is: "Can I build this entire app again, from scratch, without looking at my old code?"

How to use this guide

Read the Theory: I will provide keywords and concepts. You must read the official React docs linked.
The "No-Copy" Rule: Type every line of code. Do not copy-paste from documentation.
Complete the Challenge: Each module has a build requirement.
Bug Hunt: I will describe a common bug. You must reproduce it and fix it.