Use when learning React development - comprehensive roadmap and resources for becoming a React developer
This skill provides a structured learning path for becoming a proficient React developer, covering fundamentals, advanced concepts, and the React ecosystem.
Use this skill when:
| Topic | Concepts |
|---|---|
| JSX | Syntax, expressions, rendering |
| Functional components, props |
| State | useState, state updates |
| Events | Event handling, synthetic events |
| Conditional Rendering | Ternary, &&, switch |
| Lists & Keys | Mapping, unique keys |
| Topic | Concepts |
|---|---|
| Hooks | useEffect, useContext, useReducer |
| Custom Hooks | Reusable logic extraction |
| Forms | Controlled/uncontrolled, validation |
| Refs | useRef, DOM access |
| Context API | Global state, providers |
| Performance | useMemo, useCallback, React.memo |
| Topic | Concepts |
|---|---|
| Advanced Hooks | useLayoutEffect, useImperativeHandle |
| Error Boundaries | Error handling, fallbacks |
| Portals | Rendering outside DOM hierarchy |
| Suspense & Lazy | Code splitting, loading states |
| Higher-Order Components | Component composition |
| Render Props | Component logic sharing |
| Topic | Technologies |
|---|---|
| Routing | React Router v6+ |
| State Management | Redux Toolkit, Zustand, Jotai |
| Data Fetching | React Query, SWR, Axios |
| Styling | Tailwind, Styled-components, CSS Modules |
| Testing | Jest, React Testing Library, Cypress |
| TypeScript | Types for props, hooks, events |
| Topic | Concepts |
|---|---|
| Next.js Basics | Pages, routing, layouts |
| Data Fetching | getStaticProps, getServerSideProps |
| API Routes | Backend in Next.js |
| App Router | Server components, streaming |
| Deployment | Vercel, optimization |
When helping with React learning:
// Custom Hook
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
// Component Pattern
function Component({ data, isLoading, error }) {
if (isLoading) return <LoadingSpinner />;
if (error) return <ErrorMessage error={error} />;
return <DataDisplay data={data} />;
}
developer-folio - React portfolio templategsap-animations-website - React animationsawesome-python - Full-stack with Python backendC:\Users\user\.qwen\skills\react-roadmap