preact · Preact Docs
Preact Components
Explains the fundamental building blocks of Preact by detailing the implementation and differences between functional components and class components, including props usage and lifecycle methods.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Components
Explains the fundamental building blocks of Preact by detailing the implementation and differences between functional components and class components, including props usage and lifecycle methods.
When To Use
Use when you need to implement UI elements using either functional patterns with props or class-based patterns with state and lifecycle methods in Preact.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-components-workflow-guide.md | A comprehensive guide covering Preact component essentials, hooks, signals, context, and testing strategies. | Questions about a comprehensive guide covering Preact component essentials, hooks, signals, context, and testing strategies. |
examples/preact-components-functional-component.text | A functional component example demonstrating how to use props and render content in Preact. | Exact payloads, commands, or snippets shown in A functional component example demonstrating how to use props and render content in Preact. |
examples/preact-components-class-component-lifecycle.text | A class-based Preact component demonstrating lifecycle methods like componentDidMount and componentWillUnmount using a clock timer. | Exact payloads, commands, or snippets shown in A class-based Preact component demonstrating lifecycle methods like componentDidMount and componentWillUnmount using... |
examples/preact-components-error-boundary-class.text | A class-based component implementation of an Error Boundary in Preact using getDerivedStateFromError and componentDidCatch. | Exact payloads, commands, or snippets shown in A class-based component implementation of an Error Boundary in Preact using getDerivedStateFromError and componentDid... |
examples/preact-components-functional-render.text | A text-based example demonstrating the definition of functional components and the use of the render function in Preact. | Exact payloads, commands, or snippets shown in A text-based example demonstrating the definition of functional components and the use of the render function in Preact. |
examples/preact-components-syntax-equivalence.text | A text example demonstrating the syntactic equivalence between function declarations and JSX component syntax in Preact. | Exact payloads, commands, or snippets shown in A text example demonstrating the syntactic equivalence between function declarations and JSX component syntax in Preact. |
examples/preact-components-functional.text | A text representation of a functional Preact component returning an array of elements. | Exact payloads, commands, or snippets shown in A text representation of a functional Preact component returning an array of elements. |
examples/preact-components-functional-component-key.text | A functional component example demonstrating the use of props and the importance of the key attribute during list rendering in Preact. | Exact payloads, commands, or snippets shown in A functional component example demonstrating the use of props and the importance of the key attribute during list ren... |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/components