A presentation component describes what a view should look like without directly performing DOM updates. Its output comes from inputs, while application state remains outside the component. This separates application logic from low-level DOM manipulation and keeps the view easier to maintain. section 3.0 section 1.2.2
A simple presentation component has three responsibilities:
- Receive application data as inputs. section 1.2.2
- Return a virtual DOM representation of its view. section 1.2.2
- Leave DOM reconciliation and the entire application state to the surrounding application or framework. section 1.2.2
A small view function
function greetingView(name) { return { type: "h1", children: ["Hello, " + name] }; } The function receives its input and returns a description of the view. It does not store application state or manipulate the DOM directly; a framework can reconcile the returned representation with the document. section 1.2.2 section 3.0
Figure 1.3 Implementation plan for the framework we’ll build
Use the implementation plan to place stateless components before stateful components, subcomponents, and lifecycle hooks. section 1.2.2
