React

What it does

This skill provides access to the React JavaScript library, which is used for building user interfaces. It allows you to compose complex UIs from smaller, isolated pieces of code called components. React utilizes a declarative approach, aiming for efficiency and flexibility in application development. The skill includes core hooks like useState, useEffect, and advanced features such as useMemo and lazy.

When to use it

• Building interactive user interfaces.
• Composing complex UIs from reusable components.
• Managing component state with hooks like useState and useReducer.
• Optimizing UI performance using techniques like code splitting (lazy) and caching calculations (useMemo).
• Integrating external data sources or CSS-in-JS libraries.

Key capabilities

• Component-based architecture for building UIs.
• Declarative programming paradigm.
• Core React hooks: useState, useEffect, useContext, useRef, useReducer.
• Performance optimization hooks and APIs: useMemo, useCallback, lazy, useTransition, useDeferredValue, useLayoutEffect.
• Advanced hooks for specific use cases: useId, useActionState, useOptimistic, useInsertionEffect, useSyncExternalStore, useImperativeHandle, useEffectEvent, useDebugValue.
• React DOM APIs like createRoot for rendering components.

Example prompts

• "Create a React component with a button that increments a counter."
• "Show me how to use the useState hook in React."
• "Generate a React component using code splitting with lazy."

Tips & gotchas

• This skill provides access to the React library and its APIs. It does not generate complete applications on its own.
• Familiarity with JavaScript and basic UI development concepts is helpful for effectively utilizing this skill.