React Development Guide
Expert assistant for React development following official React 19 documentation patterns and best practices.
What This Skill Does
This skill guides AI agents to write production-ready React code following official React patterns:
Component creation and compositionJSX markup and styling conventionsState management with hooks (`useState`, `useReducer`, `useContext`)Event handling and user interactionConditional rendering and list renderingEffect management and lifecycleCustom hooks for reusable logicComponent architecture and data flowInstructions
When working with React code, follow these principles:
1. Component Structure
Create components as JavaScript/TypeScript functions that return JSXAlways start component names with a capital letter (e.g., `MyButton`, `UserProfile`)Use lowercase for HTML tags, PascalCase for React componentsUse `export default` for the main component in a fileKeep components focused and single-purpose```jsx
function MyButton() {
return <button>I'm a button</button>;
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
```
2. JSX Rules
JSX is stricter than HTML - always close self-closing tags: `<br />`, `<img />`Components cannot return multiple JSX tags - wrap in `<div>...</div>` or `<>...</>` fragmentUse `className` instead of `class` for CSS classesEmbed JavaScript expressions in JSX with curly braces: `{user.name}`Use curly braces in attributes: `src={user.imageUrl}` not quotesThe `style` attribute accepts JavaScript objects: `style={{width: 100, color: 'red'}}````jsx
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}
```
3. Conditional Rendering
Use standard JavaScript patterns - no special React syntax:
`if/else` statements outside JSXTernary operator `? :` inside JSXLogical AND `&&` for single branch conditionals```jsx
// if/else approach
let content;
if (isLoggedIn) {
content = <AdminPanel />;
} else {
content = <LoginForm />;
}
return <div>{content}</div>;
// Ternary operator
return (
<div>
{isLoggedIn ? <AdminPanel /> : <LoginForm />}
</div>
);
// Logical AND
return (
<div>
{isLoggedIn && <AdminPanel />}
</div>
);
```
4. List Rendering
Use JavaScript `map()` to transform arrays into JSX elementsAlways provide a `key` prop with a unique identifier (usually from database ID)Keys help React track items for efficient updates```jsx
const products = [
{ title: 'Cabbage', id: 1 },
{ title: 'Garlic', id: 2 },
{ title: 'Apple', id: 3 },
];
function ShoppingList() {
const listItems = products.map(product => (
<li key={product.id}>{product.title}</li>
));
return <ul>{listItems}</ul>;
}
```
5. Event Handling
Declare event handler functions inside componentsPass function references to event props: `onClick={handleClick}`Do NOT call the function: `onClick={handleClick()}` is wrongReact will call the handler when the event occurs```jsx
function MyButton() {
function handleClick() {
alert('You clicked me!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
```
6. State Management with `useState`
Import: `import { useState } from 'react';`Declare state: `const [value, setValue] = useState(initialValue);`Naming convention: `[something, setSomething]`Call the setter function to update state: `setValue(newValue)`Each component instance has its own independent state```jsx
import { useState } from 'react';
function MyButton() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
Clicked {count} times
</button>
);
}
```
7. Sharing State (Lifting State Up)
Move shared state to the closest common parent componentPass state down as propsPass update functions down as propsChild components receive both data and handlers via props```jsx
export default function MyApp() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<h1>Counters that update together</h1>
<MyButton count={count} onClick={handleClick} />
<MyButton count={count} onClick={handleClick} />
</div>
);
}
function MyButton({ count, onClick }) {
return (
<button onClick={onClick}>
Clicked {count} times
</button>
);
}
```
8. Hooks Rules
Functions starting with `use` are Hooks (e.g., `useState`, `useEffect`, `useContext`)Only call Hooks at the top level of components or other custom HooksNever call Hooks inside conditions, loops, or nested functionsIf you need conditional Hook logic, extract a new component```jsx
// ✅ Correct
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
// ...
}
// ❌ Wrong
function MyComponent() {
if (condition) {
const [count, setCount] = useState(0); // Never do this!
}
}
```
9. Code Style and Conventions
Use functional components (not class components)Prefer arrow functions for inline callbacksUse destructuring for props: `function Button({ label, onClick }) { ... }`Keep component files focused - one main component per fileUse TypeScript interfaces/types for prop definitions when using TypeScriptFollow modern React patterns from React 19 documentation10. Effects and Side Effects
Use `useEffect` for side effects (data fetching, subscriptions, manual DOM manipulation)Consider if you actually need an effect - many scenarios don't require themSpecify dependencies array correctly to avoid stale closures or infinite loopsReturn cleanup functions for subscriptions and timers```jsx
import { useEffect, useState } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
let cancelled = false;
fetchUser(userId).then(data => {
if (!cancelled) setUser(data);
});
return () => { cancelled = true; };
}, [userId]);
return <div>{user?.name}</div>;
}
```
When to Use This Skill
Use this skill when:
Creating new React componentsRefactoring existing React code to follow best practicesImplementing state managementSetting up event handlers and user interactionsConverting designs or requirements into React JSXDebugging React-specific issues (hooks, rendering, state updates)Reviewing React code for pattern adherenceImportant Notes
This skill follows React 19 official documentation patternsFunctional components and hooks are the standard - avoid class componentsJSX is the recommended way to write React markup (not `React.createElement`)Always provide unique `key` props in listsState updates may be asynchronous - use functional updates when depending on previous state: `setCount(c => c + 1)`Keep the component tree clean - extract components when logic becomes complexRefer to the official React docs at react.dev for detailed API references