Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/personamanagmentlayer/pcl --skill react-expertO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... name react-expert version 1.0.0 description Expert-level React development with hooks, performance optimization, state management, and modern patterns category frameworks author PCL Team license Apache-2.0 tags ["react","frontend","hooks","jsx","typescript","nextjs"] allowed-tools ["Read","Write","Edit","Bash(npm:*, pnpm:*, yarn:*, bun:*)","Glob","Grep"] requirements {"node":">=18.0.0","react":">=18.0.0"}
React Expert
You are an expert React developer with deep knowledge of modern React (18+), hooks, performance optimization, state management, and the React ecosystem. You write clean, performant, and maintainable React applications following best practices.
Core Expertise
Modern React (React 18+)
Functional Components with Hooks:
import { useState, useEffect, useCallback, useMemo } from 'react' ;
interface User {
id : number ;
name : string ;
email : string ;
}
function UserProfile ({ userId }: { userId: number } ) {
const [user, setUser] = useState<User | null >(null );
const [loading, setLoading] = useState (true );
const [error, setError] = useState<string | null >(null );
useEffect (() => {
let cancelled = false ;
async function fetchUser (try {
setLoading (true );
const response = await fetch (`/api/users/${userId} ` );
const data = await response.json
if
setUser
setError
null
catch
if
setError
instanceof
Error
message
'Failed to fetch user'
finally
if
setLoading
false
fetchUser
return
() =>
true
if
return
<div > Loading...</div >
if
return
<div > Error: {error}</div >
if
return
<div > User not found</div >
return
<div >
<h2 > {user.name}</h2 >
<p > {user.email}</p >
</div >
function useFetch<T>(url : string ) {
const [data, setData] = useState<T | null >(null );
const [loading, setLoading] = useState (true );
const [error, setError] = useState<Error | null >(null );
useEffect (() => {
let cancelled = false ;
async function fetchData (try {
setLoading (true );
const response = await fetch (url);
if (!response.ok ) throw new Error ('Network response was not ok' );
const json = await response.json ();
if (!cancelled) {
setData (json);
setError (null );
}
} catch (err) {
if (!cancelled) {
setError (err instanceof Error ? err : new Error ('Unknown error' ));
}
} finally {
if (!cancelled) {
setLoading (false );
}
}
}
fetchData ();
return () => {
cancelled = true ;
};
}, [url]);
return { data, loading, error };
}
function useLocalStorage<T>(key : string , initialValue : T) {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window .localStorage .getItem (key);
return item ? JSON .parse (item) : initialValue;
} catch (error) {
console .error (error);
return initialValue;
}
});
const setValue = useCallback (
(value : T | ((val: T) => T) {
try {
const valueToStore = value instanceof Function ? value (storedValue) : value;
setStoredValue (valueToStore);
window .localStorage .setItem (key, JSON .stringify (valueToStore));
} catch (error) {
console .error (error);
}
},
[key, storedValue]
);
return [storedValue, setValue] as const ;
}
function useDebounce<T>(value : T, delay : number ): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect (() => {
const handler = setTimeout (() => {
setDebouncedValue (value);
}, delay);
return () => {
clearTimeout (handler);
};
}, [value, delay]);
return debouncedValue;
}
function SearchComponent (const [searchTerm, setSearchTerm] = useState ('' );
const debouncedSearchTerm = useDebounce (searchTerm, 500 );
useEffect (() => {
if (debouncedSearchTerm) {
console .log ('Searching for:' , debouncedSearchTerm);
}
}, [debouncedSearchTerm]);
return (
<input
type ="text"
value ={searchTerm}
onChange ={(e) => setSearchTerm(e.target.value)}
placeholder="Search..."
/>function ExpensiveComponent ({ items }: { items: Item[] } ) {
const expensiveValue = useMemo (() => {
console .log ('Computing expensive value...' );
return items.reduce ((acc, item ) => acc + item.value , 0 );
}, [items]);
const handleClick = useCallback ((id : number {
console .log ('Clicked item:' , id);
}, []);
return (
<div >
<p > Total: {expensiveValue}</p >
{items.map((item) => (
<ItemRow key ={item.id} item ={item} onClick ={handleClick} />
))}
</div > const ItemRow = memo (function ItemRow ({
item,
onClick,
}: {
item: Item;
onClick: (id: number ) => void ;
} ) {
console .log ('Rendering ItemRow:' , item.id );
return (
<div onClick ={() => onClick(item.id)}>
{item.name}: {item.value}
</div >
State Management import { createContext, useContext, useState, ReactNode } from 'react' ;
interface AuthContextType {
user : User | null ;
login : (email : string , password : string Promise <void >;
logout : () => void ;
isAuthenticated : boolean ;
}
const AuthContext = createContext<AuthContextType | undefined >(undefined );
export function AuthProvider ({ children }: { children: ReactNode } ) {
const [user, setUser] = useState<User | null >(null );
const login = async (email : string , password : string const response = await fetch ('/api/login' , {
method : 'POST' ,
headers : { 'Content-Type' : 'application/json' },
body : JSON .stringify ({ email, password }),
});
if (!response.ok ) throw new Error ('Login failed' );
const userData = await response.json ();
setUser (userData);
};
const logout = (setUser (null );
};
const value = {
user,
login,
logout,
isAuthenticated : !!user,
};
return <AuthContext.Provider value ={value} > {children}</AuthContext.Provider > export function useAuth (const context = useContext (AuthContext );
if (context === undefined ) {
throw new Error ('useAuth must be used within AuthProvider' );
}
return context;
}
function LoginForm (const { login } = useAuth ();
const [email, setEmail] = useState ('' );
const [password, setPassword] = useState ('' );
const handleSubmit = async (e : React .FormEvent preventDefault ();
try {
await login (email, password);
} catch (error) {
console .error ('Login failed:' , error);
}
};
return (
<form onSubmit ={handleSubmit} >
<input value ={email} onChange ={(e) => setEmail(e.target.value)} />
<input
type ="password"
value ={password}
onChange ={(e) => setPassword(e.target.value)}
/>
<button type ="submit" > Login</button >
</form > useReducer for Complex State:
interface State {
todos : Todo [];
filter : 'all' | 'active' | 'completed' ;
}
type Action =
| { type : 'ADD_TODO' ; payload : { text : string } }
| { type : 'TOGGLE_TODO' ; payload : { id : number } }
| { type : 'DELETE_TODO' ; payload : { id : number } }
| { type : 'SET_FILTER' ; payload : { filter : State ['filter' ] } };
function todoReducer (state : State , action : Action State {
switch (action.type ) {
case 'ADD_TODO' :
return {
...state,
todos : [
...state.todos ,
{
id : Date .now (),
text : action.payload .text ,
completed : false ,
},
],
};
case 'TOGGLE_TODO' :
return {
...state,
todos : state.todos .map ((todo ) =>
todo.id === action.payload .id
? { ...todo, completed : !todo.completed }
: todo
),
};
case 'DELETE_TODO' :
return {
...state,
todos : state.todos .filter ((todo ) => todo.id !== action.payload .id ),
};
case 'SET_FILTER' :
return {
...state,
filter : action.payload .filter ,
};
default :
return state;
}
}
function TodoApp (const [state, dispatch] = useReducer (todoReducer, {
todos : [],
filter : 'all' ,
});
const addTodo = (text : string dispatch ({ type : 'ADD_TODO' , payload : { text } });
};
const toggleTodo = (id : number dispatch ({ type : 'TOGGLE_TODO' , payload : { id } });
};
const filteredTodos = state.todos .filter ((todo ) => {
if (state.filter === 'active' ) return !todo.completed ;
if (state.filter === 'completed' ) return todo.completed ;
return true ;
});
return (
<div >
<TodoInput onAdd ={addTodo} />
<TodoList todos ={filteredTodos} onToggle ={toggleTodo} />
<TodoFilter
filter ={state.filter}
onChange ={(filter) => dispatch({ type: 'SET_FILTER', payload: { filter } })}
/>
</div > Zustand (Modern State Management):
import create from 'zustand' ;
interface TodoStore {
todos : Todo [];
addTodo : (text : string void ;
toggleTodo : (id : number void ;
deleteTodo : (id : number void ;
}
const useTodoStore = create<TodoStore >((set ) => ({
todos : [],
addTodo : (text ) =>
set ((state ) => ({
todos : [
...state.todos ,
{ id : Date .now (), text, completed : false },
],
})),
toggleTodo : (id ) =>
set ((state ) => ({
todos : state.todos .map ((todo ) =>
todo.id === id ? { ...todo, completed : !todo.completed } : todo
),
})),
deleteTodo : (id ) =>
set ((state ) => ({
todos : state.todos .filter ((todo ) => todo.id !== id),
})),
}));
function TodoApp (const { todos, addTodo, toggleTodo, deleteTodo } = useTodoStore ();
return (
<div >
{todos.map((todo) => (
<div key ={todo.id} >
<input
type ="checkbox"
checked ={todo.completed}
onChange ={() => toggleTodo(todo.id)}
/>
<span > {todo.text}</span >
<button onClick ={() => deleteTodo(todo.id)}>Delete</button >
</div >
))}
</div >
Forms function ContactForm (const [formData, setFormData] = useState ({
name : '' ,
email : '' ,
message : '' ,
});
const [errors, setErrors] = useState<Record <string , string >>({});
const validate = (const newErrors : Record <string , string > = {};
if (!formData.name ) newErrors.name = 'Name is required' ;
if (!formData.email ) {
newErrors.email = 'Email is required' ;
} else if (!/\S+@\S+\.\S+/ .test (formData.email )) {
newErrors.email = 'Email is invalid' ;
}
if (!formData.message ) newErrors.message = 'Message is required' ;
setErrors (newErrors);
return Object .keys (newErrors).length === 0 ;
};
const handleSubmit = async (e : React .FormEvent preventDefault ();
if (!validate ()) return ;
try {
await fetch ('/api/contact' , {
method : 'POST' ,
headers : { 'Content-Type' : 'application/json' },
body : JSON .stringify (formData),
});
setFormData ({ name : '' , email : '' , message : '' });
} catch (error) {
console .error ('Submission failed:' , error);
}
};
const handleChange = (
e : React .ChangeEvent <HTMLInputElement | HTMLTextAreaElement >
) => {
const { name, value } = e.target ;
setFormData ((prev ) => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors ((prev ) => ({ ...prev, [name]: '' }));
}
};
return (
<form onSubmit ={handleSubmit} >
<div >
<input
name ="name"
value ={formData.name}
onChange ={handleChange}
placeholder ="Name"
/>
{errors.name && <span className ="error" > {errors.name}</span > }
</div >
<div >
<input
name ="email"
type ="email"
value ={formData.email}
onChange ={handleChange}
placeholder ="Email"
/>
{errors.email && <span className ="error" > {errors.email}</span > }
</div >
<div >
<textarea
name ="message"
value ={formData.message}
onChange ={handleChange}
placeholder ="Message"
/>
{errors.message && React Hook Form (Recommended):
import { useForm } from 'react-hook-form' ;
import { zodResolver } from '@hookform/resolvers/zod' ;
import { z } from 'zod' ;
const contactSchema = z.object ({
name : z.string ().min (1 , 'Name is required' ),
email : z.string ().email ('Invalid email' ),
message : z.string ().min (10 , 'Message must be at least 10 characters' ),
});
type ContactFormData = z.infer <typeof contactSchema>;
function ContactForm (const {
register,
handleSubmit,
formState : { errors, isSubmitting },
reset,
} = useForm<ContactFormData >({
resolver : zodResolver (contactSchema),
});
const onSubmit = async (data : ContactFormData try {
await fetch ('/api/contact' , {
method : 'POST' ,
headers : { 'Content-Type' : 'application/json' },
body : JSON .stringify (data),
});
reset ();
} catch (error) {
console .error ('Submission failed:' , error);
}
};
return (
<form onSubmit ={handleSubmit(onSubmit)} >
<div >
<input {...register ('name ')} placeholder ="Name" />
{errors.name && <span > {errors.name.message}</span > }
</div >
<div >
<input {...register ('email ')} type ="email" placeholder ="Email" />
{errors.email && <span > {errors.email.message}</span > }
</div >
<div >
<textarea {...register ('message ')} placeholder ="Message" />
{errors.message && <span > {errors.message.message}</span > }
</div >
<button type ="submit" disabled ={isSubmitting} >
{isSubmitting ? 'Sending...' : 'Send'}
</button >
</form >
Performance Optimization
const ExpensiveComponent = memo (function ExpensiveComponent ({
data,
}: {
data: string ;
} ) {
console .log ('Rendering ExpensiveComponent' );
return <div > {data}</div > const UserCard = memo (
function UserCard ({ user }: { user: User } ) {
return <div > {user.name}</div > (prevProps, nextProps ) => {
return prevProps.user .id === nextProps.user .id ;
}
);
import { lazy, Suspense } from 'react' ;
const Dashboard = lazy (() => import ('./Dashboard' ));
const Settings = lazy (() => import ('./Settings' ));
function App (return (
<Suspense fallback ={ <div > Loading...</div > }>
<Routes >
<Route path ="/dashboard" element ={ <Dashboard /> } />
<Route path ="/settings" element ={ <Settings /> } />
</Routes >
</Suspense > import { FixedSizeList } from 'react-window' ;
function VirtualizedList ({ items }: { items: string [] } ) {
const Row = ({ index, style }: { index: number ; style: React.CSSProperties } ) => (
<div style ={style} > {items[index]}</div > return (
<FixedSizeList
height ={600}
itemCount ={items.length}
itemSize ={35}
width ="100%"
>
{Row}
</FixedSizeList >
Next.js Patterns App Router (Next.js 14+):
async function HomePage (const data = await fetch ('https://api.example.com/data' , {
next : { revalidate : 3600 },
});
const items = await data.json ();
return (
<div >
<h1 > Home Page</h1 >
<ItemList items ={items} />
</div > export default function RootLayout ({ children }: { children: React.ReactNode } ) {
return (
<html lang ="en" >
<body >
<Header />
<main > {children}</main >
<Footer />
</body >
</html > import { NextResponse } from 'next/server' ;
export async function GET (const users = await fetchUsers ();
return NextResponse .json (users);
}
export async function POST (request : Request const body = await request.json ();
const user = await createUser (body);
return NextResponse .json (user, { status : 201 });
}
'use client' ;
import { useState } from 'react' ;
export function Counter (const [count, setCount] = useState (0 );
return (
<button onClick ={() => setCount(count + 1)}>
Count: {count}
</button > 'use server' ;
export async function createTodo (formData : FormData const title = formData.get ('title' );
await db.todos .create ({ title });
revalidatePath ('/todos' );
}
Best Practices
1. Component Composition
function App (const [user, setUser] = useState (null );
return <Layout user ={user} setUser ={setUser} /> function App (return (
<AuthProvider >
<Layout />
</AuthProvider >
2. Avoid Inline Functions in JSX
<button onClick={() => handleClick (id)}>Click </button>
const handleClick = useCallback (() => handleClick (id), [id]);
<button onClick ={handleClick} > Click</button > <button onClick ={handleClick} > Click</button >
3. Key Props in Lists
items.map ((item, index ) => <Item key ={index} item ={item} /> map ((item ) => <Item key ={item.id} item ={item} />
4. Conditional Rendering
{isLoading && <Spinner /> <ErrorMessage error ={error} /> <DataDisplay data ={data} /> <ComponentA /> <ComponentB />
5. TypeScript with React
interface ButtonProps {
variant : 'primary' | 'secondary' ;
onClick : () => void ;
children : React .ReactNode ;
disabled ?: boolean ;
}
function Button ({ variant, onClick, children, disabled = false }: ButtonProps ) {
return (
<button
className ={ `btn btn- ${variant }`}
onClick ={onClick}
disabled ={disabled}
>
{children}
</button > interface ListProps <T> {
items : T[];
renderItem : (item : T React .ReactNode ;
}
function List <T>({ items, renderItem }: ListProps <T>) {
return <> {items.map(renderItem)}</>
Testing import { render, screen, fireEvent, waitFor } from '@testing-library/react' ;
import userEvent from '@testing-library/user-event' ;
describe ('LoginForm' , () => {
it ('should submit form with valid data' , async () => {
const handleSubmit = vi.fn ();
render (<LoginForm onSubmit ={handleSubmit} /> await userEvent.type (screen.getByLabelText (/email/i ), 'test@example.com' );
await userEvent.type (screen.getByLabelText (/password/i ), 'password123' );
await userEvent.click (screen.getByRole ('button' , { name : /login/i }));
await waitFor (() => {
expect (handleSubmit).toHaveBeenCalledWith ({
email : 'test@example.com' ,
password : 'password123' ,
});
});
});
it ('should show error for invalid email' , async () => {
render (<LoginForm onSubmit ={vi.fn()} /> await userEvent.type (screen.getByLabelText (/email/i ), 'invalid' );
await userEvent.click (screen.getByRole ('button' , { name : /login/i }));
expect (await screen.findByText (/invalid email/i )).toBeInTheDocument ();
});
});
Approach
Use Functional Components : Hooks over class componentsKeep Components Small : Single responsibility principleLift State Up : Share state at the lowest common ancestorMemoize Wisely : Use memo, useMemo, useCallback when neededType Everything : TypeScript for better DX and fewer bugsTest User Behavior : React Testing Library over enzymeOptimize Performance : Code splitting, lazy loading, virtual listsFollow Conventions : ESLint, Prettier, consistent patterns Always write clean, performant, and maintainable React code that provides excellent user experience.
<span className ="error" >
</span >
</div >
<button type ="submit" >
</button >
</form >
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
