A component is an isolated package that separates concerns around related functionality, data, or user interface. Components make larger systems easier to organize and can be assembled into web applications. section 9.4
In a React interface, a component owns local state and returns markup. A list component can hold entries and a page number, render each entry, and respond to a More button without exposing its internal implementation. section 9.4
A stateful component commonly divides its responsibilities into:
- State: stores values such as the current page, fetched entries, or a fetching status. section 9.5
- Actions or messages: represent events such as incrementing a page, starting a search, or recording success and failure. section 9.5
- View: converts the current state into user-interface output, including loading text, list entries, links, and controls. section 9.5
A list component across frameworks
The React version initializes entries, maps them into list items, and updates the page when the user clicks More. The Yew version models Fetching, Success, and Failed states; create initializes the component, update handles messages and asynchronous searches, and view renders the matching result. section 9.4 section 9.5
Listing 9.16 List.jsx: Creating a component with static data
import React, { useEffect, useState } from 'react'
const List = () => {
const [entries, setEntries] = useState([{id:"abc", title:"title"}]) #1
const [page, setPage] = useState(0) #2
return (
<>
<ul>
{entries?.map((v, i) => { #3
return <li key={i}>
<a href={`${v.id}`} target='_blank'>{v.title}</a>
</li>
})}
</ul>
<button onClick={() => setPage((page) => page + 1)}>More</button> #4
</>
)
}
export default List;
Inspect the compact React implementation showing local state, mapped entries, links, and pagination. section 9.4
