菜单
General React fundamentals - components and JSX, props and state, the core hooks (useState/useEffect/useRef/useMemo/useCallback/useContext), composition, conditional and list rendering, and controlled inputs. The canonical "depends on React" reference.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill react-core命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | react-core |
| description | General React fundamentals - components and JSX, props and state, the core hooks (useState/useEffect/useRef/useMemo/useCallback/useContext), composition, conditional and list rendering, and controlled inputs. The canonical "depends on React" reference. |
| user-invocable | false |
| disable-model-invocation | true |
| version | 1.0.1 |
| category | toolchain |
| author | Claude MPM Team |
| license | MIT |
| progressive_disclosure | {"entry_point":{"summary":"React fundamentals: components, JSX, props/state, core hooks, composition, conditional/list rendering, controlled inputs","when_to_use":"Building any React UI, or as the baseline dependency for React-ecosystem skills that require core React knowledge","quick_start":"1. Write a function component returning JSX 2. Hold state with useState 3. Run effects with useEffect 4. Compose via children and props"}} |
| context_limit | 700 |
| tags | ["react","components","jsx","hooks","useState","useEffect","props","state","composition","controlled-inputs"] |
| requires_tools | [] |
The canonical reference for general React fundamentals. This skill covers the building blocks every React application shares: components and JSX, props and state, the core hooks, composition patterns, conditional and list rendering, and controlled inputs. It is the baseline "depends on React" target for ecosystem skills (styling, data fetching, state management, deployment) that assume core React knowledge.
Keep this skill focused on fundamentals. For advanced hook composition (SWR-backed custom hooks, debounced contexts, memoized providers), use the sibling react-hooks-composition skill. For explicit finite-state-machine modeling of complex UI flows, use the sibling react-state-machine skill.
Reach for this skill when:
A React component is a function that returns JSX. Name components in PascalCase. Return a single root node, or wrap siblings in a fragment (<>...</>).
type GreetingProps = {
name: string;
};
function Greeting({ name }: GreetingProps) {
return (
<>
<h1>Hello, {name}</h1>
<p>Welcome back.</p>
</>
);
}
JSX embeds expressions inside {}. Attributes use camelCase (className, onClick, htmlFor). JSX returns a description of the UI; React reconciles it against the DOM.
Props pass data down from parent to child and are read-only inside the child. State holds data a component owns and mutates over time.
import { useState } from 'react';
function Counter({ step = 1 }: { step?: number }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount((prev) => prev + step)}>
Count: {count}
</button>
);
}
Treat props and state as immutable. Update state through the setter, and prefer the functional updater (setCount(prev => prev + 1)) when the next value derives from the previous one.
Call hooks only at the top level of a component or custom hook, never inside conditionals, loops, or nested functions. This rule keeps hook call order stable across renders.
Holds a value and a setter. Re-renders the component when the value changes.
const [open, setOpen] = useState(false);
Runs after render to perform side effects: subscriptions, timers, data fetching, manual DOM work. The dependency array controls when the effect re-runs. Return a cleanup function to tear down subscriptions.
import { useEffect, useState } from 'react';
function WindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []); // empty deps: subscribe once on mount, clean up on unmount
return <span>{width}px</span>;
}
Stores a mutable value without triggering re-renders. Common uses: referencing a DOM node, or holding a value across renders (timer ids, previous values).
import { useRef, useEffect } from 'react';
function AutoFocusInput() {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => inputRef.current?.focus(), []);
return <input ref={inputRef} />;
}
Recomputes a value only when its dependencies change. Apply it for genuinely expensive calculations or to stabilize reference identity passed to memoized children.
const sorted = useMemo(() => items.slice().sort(compare), [items]);
Returns the same function instance across renders while dependencies stay equal. Pass stable callbacks to memoized children or to effect dependency arrays.
const handleSelect = useCallback((id: string) => onSelect(id), [onSelect]);
Reads the current value of a context provided higher in the tree.
import { createContext, useContext } from 'react';
const ThemeContext = createContext<'light' | 'dark'>('light');
function ThemedLabel() {
const theme = useContext(ThemeContext);
return <span className={theme}>Themed</span>;
}
For memoized provider patterns that prevent unnecessary consumer re-renders, see react-hooks-composition.
Favor composition over configuration. Pass content through children and pass behavior through props.
function Card({ title, children }: { title: string; children: React.ReactNode }) {
return (
<section className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</section>
);
}
// Usage
<Card title="Profile">
<Avatar />
<p>Bio text</p>
</Card>;
Extract shared logic into custom hooks (useSomething) rather than copying it between components. Keep components small and single-purpose.
Render conditionally with && for presence or a ternary for either/or. Render lists with map, and give each item a stable key derived from its identity (not the array index where order can change).
function TodoList({ todos }: { todos: { id: string; text: string; done: boolean }[] }) {
if (todos.length === 0) return <p>No todos yet.</p>;
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.done ? <s>{todo.text}</s> : todo.text}
</li>
))}
</ul>
);
}
A controlled input derives its value from state and reports changes through onChange. State is the single source of truth.
import { useState } from 'react';
function NameField() {
const [name, setName] = useState('');
return (
<label>
Name
<input
value={name}
onChange={(event) => setName(event.target.value)}
/>
</label>
);
}
Direct mutation skips the setter, so React does not re-render.
// BAD: mutates the array in place; React sees the same reference
function addItem(items: string[], next: string) {
items.push(next);
setItems(items);
}
// GOOD: create a new array so the reference changes
function addItem(items: string[], next: string) {
setItems([...items, next]);
}
Conditional hook calls break the stable call order React relies on.
// BAD: hook call order changes between renders
function Profile({ id }: { id?: string }) {
if (id) {
const data = useUser(id); // conditional hook call
return <span>{data.name}</span>;
}
return null;
}
// GOOD: call the hook unconditionally; branch on its result
function Profile({ id }: { id?: string }) {
const data = useUser(id); // useUser must accept an undefined id (no fetch / returns null) so the hook is always called
if (!id || !data) return null;
return <span>{data.name}</span>;
}
Index keys cause React to misattribute state when items move.
// BAD: index key breaks on reorder/insert/delete
{items.map((item, i) => <Row key={i} item={item} />)}
// GOOD: stable identity key
{items.map((item) => <Row key={item.id} item={item} />)}
react-hooks-composition: advanced custom-hook composition — SWR-backed data fetching, debounced search with dual loading states, memoized context providers, and reusable async state hooks.react-state-machine: explicit finite-state-machine modeling with XState v5 for complex flows (multi-step forms, media players, modals with animations) where impossible states must be unrepresentable.react-advanced: React 19 platform features and rendering architecture — the React Compiler (auto-memoization), concurrent rendering, the use() hook, Actions, virtualization, code-splitting, and the RSC boundary.基于 SOC 职业分类
